From 34302b84da39bd799fb126e48fda15a022ead416 Mon Sep 17 00:00:00 2001
From: myselfaryan <aaryansharma.1210@gmail.com>
Date: Tue, 3 Dec 2024 15:12:17 +0530
Subject: [PATCH 1/2] Folder restructuring and Feature section

---
 app/page.tsx                                  |  16 +-
 components/landing/about-us.tsx               | 186 ++++++++++++++++++
 components/{ => landing}/faq.tsx              |   0
 components/{ => landing}/features.tsx         |   2 +-
 .../{ => landing}/gemini-effect-demo.tsx      |   2 +-
 components/{ => landing}/gemini-section.tsx   |   2 +-
 components/{ => landing}/vortex-demo.tsx      |   2 +-
 next.config.js                                |   5 +
 package-lock.json                             |  68 ++++++-
 package.json                                  |   6 +-
 10 files changed, 269 insertions(+), 20 deletions(-)
 create mode 100644 components/landing/about-us.tsx
 rename components/{ => landing}/faq.tsx (100%)
 rename components/{ => landing}/features.tsx (97%)
 rename components/{ => landing}/gemini-effect-demo.tsx (96%)
 rename components/{ => landing}/gemini-section.tsx (95%)
 rename components/{ => landing}/vortex-demo.tsx (98%)

diff --git a/app/page.tsx b/app/page.tsx
index 449a21d..a8bb704 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,10 @@
 import Image from "next/image";
-import { Button } from "@/components/ui/button";
-import { FAQ } from "@/components/faq";
-import { VortexDemo } from "@/components/vortex-demo";
-import { Features } from "@/components/features";
-import { GeminiSection } from "@/components/gemini-section";
+import { Button } from "../components/ui/button";
+import { FAQ } from "../components/landing/faq";
+import { VortexDemo } from "../components/landing/vortex-demo";
+import { Features } from "../components/landing/features";
+import { GeminiSection } from "../components/landing/gemini-section";
+import { AboutUs } from "../components/landing/about-us";
 
 export default function Home() {
   return (
@@ -61,6 +62,11 @@ export default function Home() {
         {/* Gemini Effect Section */}
         <GeminiSection />
 
+        {/* About Us Section */}
+        <section className="relative bg-black">
+          <AboutUs />
+        </section>
+
         {/* Features Section */}
         <section className="relative bg-black">
           <Features />
diff --git a/components/landing/about-us.tsx b/components/landing/about-us.tsx
new file mode 100644
index 0000000..3d78db2
--- /dev/null
+++ b/components/landing/about-us.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+import { IconBrandYoutubeFilled, IconCode, IconMessageCircle, IconRocket, IconBrain } from "@tabler/icons-react";
+import Link from "next/link";
+
+export function AboutUs() {
+  const features = [
+    {
+      title: "Automated Assessment",
+      description:
+        "Evaluate student code submissions automatically with our powerful testing framework and AI-driven analysis.",
+      skeleton: <SkeletonOne />,
+      className:
+        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
+    },
+    {
+      title: "Real-time Feedback",
+      description:
+        "Provide instant feedback to students with detailed insights and suggestions for improvement.",
+      skeleton: <SkeletonTwo />,
+      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+    },
+    {
+      title: "Interactive Learning",
+      description:
+        "Engage students with our interactive coding environment and real-time collaboration features.",
+      skeleton: <SkeletonThree />,
+      className:
+        "col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
+    },
+    {
+      title: "Seamless Integration",
+      description:
+        "Easily integrate with your existing LMS and development tools for a smooth teaching experience.",
+      skeleton: <SkeletonFour />,
+      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
+    },
+  ];
+
+  return (
+    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
+      <div className="px-8">
+        <h4 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-white">
+          Transform Your Teaching Experience
+        </h4>
+
+        <p className="text-sm lg:text-base max-w-2xl my-4 mx-auto text-neutral-400 text-center font-normal">
+          Pariksa provides cutting-edge tools and features to make coding education more effective, engaging, and efficient for both educators and students.
+        </p>
+      </div>
+
+      <div className="relative">
+        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
+          {features.map((feature) => (
+            <FeatureCard key={feature.title} className={feature.className}>
+              <FeatureTitle>{feature.title}</FeatureTitle>
+              <FeatureDescription>{feature.description}</FeatureDescription>
+              <div className="h-full w-full">{feature.skeleton}</div>
+            </FeatureCard>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const FeatureCard = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
+      {children}
+    </div>
+  );
+};
+
+const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <p className="max-w-5xl mx-auto text-left tracking-tight text-white text-xl md:text-2xl md:leading-snug">
+      {children}
+    </p>
+  );
+};
+
+const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <p className={cn(
+      "text-sm md:text-base max-w-4xl text-left mx-auto",
+      "text-neutral-400 text-center font-normal",
+      "text-left max-w-sm mx-0 md:text-sm my-2"
+    )}>
+      {children}
+    </p>
+  );
+};
+
+const SkeletonOne = () => {
+  return (
+    <div className="relative flex py-8 px-2 gap-10 h-full">
+      <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
+        <motion.div 
+          className="flex flex-col items-center justify-center h-full space-y-4"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <IconCode className="w-16 h-16 text-blue-500" />
+          <div className="text-center space-y-2">
+            <div className="h-2 w-24 bg-blue-500/20 rounded-full mx-auto" />
+            <div className="h-2 w-16 bg-blue-500/20 rounded-full mx-auto" />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+const SkeletonTwo = () => {
+  return (
+    <div className="relative flex py-8 px-2 gap-10 h-full">
+      <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
+        <motion.div 
+          className="flex flex-col items-center justify-center h-full space-y-4"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+        >
+          <IconMessageCircle className="w-16 h-16 text-green-500" />
+          <div className="text-center space-y-2">
+            <div className="h-2 w-24 bg-green-500/20 rounded-full mx-auto" />
+            <div className="h-2 w-16 bg-green-500/20 rounded-full mx-auto" />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+const SkeletonThree = () => {
+  return (
+    <div className="relative flex py-8 px-2 gap-10 h-full">
+      <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
+        <motion.div 
+          className="flex flex-col items-center justify-center h-full space-y-4"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <IconBrain className="w-16 h-16 text-purple-500" />
+          <div className="text-center space-y-2">
+            <div className="h-2 w-24 bg-purple-500/20 rounded-full mx-auto" />
+            <div className="h-2 w-16 bg-purple-500/20 rounded-full mx-auto" />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+const SkeletonFour = () => {
+  return (
+    <div className="relative flex py-8 px-2 gap-10 h-full">
+      <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
+        <motion.div 
+          className="flex flex-col items-center justify-center h-full space-y-4"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <IconRocket className="w-16 h-16 text-orange-500" />
+          <div className="text-center space-y-2">
+            <div className="h-2 w-24 bg-orange-500/20 rounded-full mx-auto" />
+            <div className="h-2 w-16 bg-orange-500/20 rounded-full mx-auto" />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/faq.tsx b/components/landing/faq.tsx
similarity index 100%
rename from components/faq.tsx
rename to components/landing/faq.tsx
diff --git a/components/features.tsx b/components/landing/features.tsx
similarity index 97%
rename from components/features.tsx
rename to components/landing/features.tsx
index eb6e7a7..d72ed3c 100644
--- a/components/features.tsx
+++ b/components/landing/features.tsx
@@ -1,4 +1,4 @@
-import { InfiniteMovingCards } from "./ui/infinite-moving-cards";
+import { InfiniteMovingCards } from "../ui/infinite-moving-cards";
 import {
   CodeIcon,
   BrainCircuitIcon,
diff --git a/components/gemini-effect-demo.tsx b/components/landing/gemini-effect-demo.tsx
similarity index 96%
rename from components/gemini-effect-demo.tsx
rename to components/landing/gemini-effect-demo.tsx
index 133ef8e..606e46e 100644
--- a/components/gemini-effect-demo.tsx
+++ b/components/landing/gemini-effect-demo.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useScroll, useTransform } from "framer-motion";
 import React from "react";
-import { GoogleGeminiEffect } from "./ui/google-gemini-effect";
+import { GoogleGeminiEffect } from "@/components/ui/google-gemini-effect";
 
 export function GeminiEffectDemo() {
   const ref = React.useRef(null);
diff --git a/components/gemini-section.tsx b/components/landing/gemini-section.tsx
similarity index 95%
rename from components/gemini-section.tsx
rename to components/landing/gemini-section.tsx
index 1726191..97ddc3b 100644
--- a/components/gemini-section.tsx
+++ b/components/landing/gemini-section.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useScroll, useTransform } from "framer-motion";
 import React from "react";
-import { GoogleGeminiEffect } from "./ui/google-gemini-effect";
+import { GoogleGeminiEffect } from "../ui/google-gemini-effect";
 
 export function GeminiSection() {
   const ref = React.useRef(null);
diff --git a/components/vortex-demo.tsx b/components/landing/vortex-demo.tsx
similarity index 98%
rename from components/vortex-demo.tsx
rename to components/landing/vortex-demo.tsx
index 3fa18ad..e274d87 100644
--- a/components/vortex-demo.tsx
+++ b/components/landing/vortex-demo.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Vortex } from "./ui/vortex";
+import { Vortex } from "../ui/vortex";
 import { motion } from "framer-motion";
 
 export function VortexDemo() {
diff --git a/next.config.js b/next.config.js
index 783b14a..0e497d8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,4 +8,9 @@ const nextConfig = {
 
     return config;
   },
+  images: {
+    domains: ['images.unsplash.com', 'assets.aceternity.com'],
+  },
 }
+
+module.exports = nextConfig
diff --git a/package-lock.json b/package-lock.json
index dd04b7e..4e9c38a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.4",
+        "@tabler/icons-react": "^3.24.0",
         "@types/bcryptjs": "^2.4.6",
         "@uiw/codemirror-themes-all": "^4.23.6",
         "@uiw/react-codemirror": "^4.23.6",
@@ -35,9 +36,10 @@
         "bcryptjs": "^2.4.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cobe": "^0.6.3",
         "dotenv": "^16.4.5",
         "drizzle-orm": "^0.37.0",
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.13.1",
         "lucide-react": "^0.446.0",
         "next": "14.2.13",
         "pg": "^8.13.1",
@@ -50,7 +52,7 @@
         "react-syntax-highlighter": "^15.5.0",
         "recharts": "^2.12.7",
         "simplex-noise": "^4.0.3",
-        "tailwind-merge": "^2.5.2",
+        "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.23.8"
       },
@@ -2904,6 +2906,30 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.24.0.tgz",
+      "integrity": "sha512-qNis9e90QcdxAGV3wNIeX0Ba2R7ktm0cnqOToKHJfC2kj3fvJwEVLsw63K0/fm7NW8rSZjDSTQRmMnSg8g/wrg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.24.0.tgz",
+      "integrity": "sha512-m9c7TmlcDmKqvZAasG5rv1YvazZDrVEhNdNFa2d1Bzotc0dh+iceFdiZCEcYPDb5UcRyLAMvOaOC9y/5sfMMWw==",
+      "dependencies": {
+        "@tabler/icons": "3.24.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
@@ -5519,6 +5545,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/cobe": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/cobe/-/cobe-0.6.3.tgz",
+      "integrity": "sha512-WHr7X4o1ym94GZ96h7b1pNemZJacbOzd02dZtnVwuC4oWBaLg96PBmp2rIS1SAhUDhhC/QyS9WEqkpZIs/ZBTg==",
+      "dependencies": {
+        "phenomenon": "^1.6.0"
+      }
+    },
     "node_modules/codemirror": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
@@ -7047,11 +7081,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.12.0.tgz",
-      "integrity": "sha512-gZaZeqFM6pX9kMVti60hYAa75jGpSsGYWAHbBfIkuHN7DkVHVkxSxeNYnrGmHuM0zPkWTzQx10ZT+fDjn7N4SA==",
-      "license": "MIT",
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.1.tgz",
+      "integrity": "sha512-F40tpGTHByhn9h3zdBQPcEro+pSLtzARcocbNqAyfBI+u9S+KZuHH/7O9+z+GEkoF3eqFxfvVw0eBDytohwqmQ==",
       "dependencies": {
+        "motion-dom": "^11.13.0",
+        "motion-utils": "^11.13.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -9869,6 +9904,16 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+    },
+    "node_modules/motion-utils": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -10448,6 +10493,11 @@
         "split2": "^4.1.0"
       }
     },
+    "node_modules/phenomenon": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/phenomenon/-/phenomenon-1.6.0.tgz",
+      "integrity": "sha512-7h9/fjPD3qNlgggzm88cY58l9sudZ6Ey+UmZsizfhtawO6E3srZQXywaNm2lBwT72TbpHYRPy7ytIHeBUD/G0A=="
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -12321,9 +12371,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
-      "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
diff --git a/package.json b/package.json
index 936b9a7..3e20f5a 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
+    "@tabler/icons-react": "^3.24.0",
     "@types/bcryptjs": "^2.4.6",
     "@uiw/codemirror-themes-all": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
@@ -38,9 +39,10 @@
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cobe": "^0.6.3",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.37.0",
-    "framer-motion": "^11.12.0",
+    "framer-motion": "^11.13.1",
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "pg": "^8.13.1",
@@ -53,7 +55,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.12.7",
     "simplex-noise": "^4.0.3",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },

From 5ae73304ae1eb4fe91a561ca65e669c8b093f22b Mon Sep 17 00:00:00 2001
From: myselfaryan <aaryansharma.1210@gmail.com>
Date: Tue, 3 Dec 2024 15:19:46 +0530
Subject: [PATCH 2/2] Fix formatting in about us

---
 components/landing/about-us.tsx | 35 +++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/components/landing/about-us.tsx b/components/landing/about-us.tsx
index 3d78db2..645d344 100644
--- a/components/landing/about-us.tsx
+++ b/components/landing/about-us.tsx
@@ -3,7 +3,13 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
-import { IconBrandYoutubeFilled, IconCode, IconMessageCircle, IconRocket, IconBrain } from "@tabler/icons-react";
+import {
+  IconBrandYoutubeFilled,
+  IconCode,
+  IconMessageCircle,
+  IconRocket,
+  IconBrain,
+} from "@tabler/icons-react";
 import Link from "next/link";
 
 export function AboutUs() {
@@ -28,8 +34,7 @@ export function AboutUs() {
       description:
         "Engage students with our interactive coding environment and real-time collaboration features.",
       skeleton: <SkeletonThree />,
-      className:
-        "col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
+      className: "col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
     },
     {
       title: "Seamless Integration",
@@ -48,7 +53,9 @@ export function AboutUs() {
         </h4>
 
         <p className="text-sm lg:text-base max-w-2xl my-4 mx-auto text-neutral-400 text-center font-normal">
-          Pariksa provides cutting-edge tools and features to make coding education more effective, engaging, and efficient for both educators and students.
+          Pariksa provides cutting-edge tools and features to make coding
+          education more effective, engaging, and efficient for both educators
+          and students.
         </p>
       </div>
 
@@ -91,11 +98,13 @@ const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
 
 const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
   return (
-    <p className={cn(
-      "text-sm md:text-base max-w-4xl text-left mx-auto",
-      "text-neutral-400 text-center font-normal",
-      "text-left max-w-sm mx-0 md:text-sm my-2"
-    )}>
+    <p
+      className={cn(
+        "text-sm md:text-base max-w-4xl text-left mx-auto",
+        "text-neutral-400 text-center font-normal",
+        "text-left max-w-sm mx-0 md:text-sm my-2",
+      )}
+    >
       {children}
     </p>
   );
@@ -105,7 +114,7 @@ const SkeletonOne = () => {
   return (
     <div className="relative flex py-8 px-2 gap-10 h-full">
       <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
-        <motion.div 
+        <motion.div
           className="flex flex-col items-center justify-center h-full space-y-4"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -126,7 +135,7 @@ const SkeletonTwo = () => {
   return (
     <div className="relative flex py-8 px-2 gap-10 h-full">
       <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
-        <motion.div 
+        <motion.div
           className="flex flex-col items-center justify-center h-full space-y-4"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -147,7 +156,7 @@ const SkeletonThree = () => {
   return (
     <div className="relative flex py-8 px-2 gap-10 h-full">
       <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
-        <motion.div 
+        <motion.div
           className="flex flex-col items-center justify-center h-full space-y-4"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -168,7 +177,7 @@ const SkeletonFour = () => {
   return (
     <div className="relative flex py-8 px-2 gap-10 h-full">
       <div className="w-full p-8 mx-auto bg-neutral-900 shadow-2xl group h-full rounded-xl border border-neutral-800">
-        <motion.div 
+        <motion.div
           className="flex flex-col items-center justify-center h-full space-y-4"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}