From 283a7191474fa1d15ab4e650b6c80efaac1c0175 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 1 Apr 2026 06:51:37 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 329 +++++++++++++++--------------------------------
 1 file changed, 102 insertions(+), 227 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b6a8722..a3c8bda 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,6 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import { Repeat, Target } from "lucide-react";
@@ -17,239 +16,115 @@ export default function LandingPage() {
         defaultButtonVariant="shift-hover"
         defaultTextAnimation="entrance-slide"
         borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "home",
-        },
-        {
-          name: "How it Works",
-          id: "about",
-        },
-        {
-          name: "Algorithm",
-          id: "features",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-      ]}
-      brandName="SortEdu"
-      button={{
-        text: "Start Learning",
-        href: "#",
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "home" },
+              { name: "How it Works", id: "about" },
+              { name: "Algorithm", id: "features" },
+              { name: "FAQ", id: "faq" },
+            ]}
+            brandName="SortEdu"
+            button={{ text: "Start Learning", href: "#" }}
+          />
+        </div>
 
-  <div id="home" data-section="home">
-      <HeroLogoBillboardSplit
-      background={{
-        variant: "radial-gradient",
-      }}
-      logoText="Master Quick Sort"
-      description="Visualize the elegance of divide-and-conquer sorting. Interactive learning for developers, students, and algorithm enthusiasts."
-      buttons={[
-        {
-          text: "Watch Demo",
-          href: "#features",
-        },
-        {
-          text: "Learn More",
-          href: "#about",
-        },
-      ]}
-      layoutOrder="default"
-      imageSrc="http://img.b2bpic.net/free-vector/advanced-tech-concept-landing-page_23-2148326208.jpg?_wi=1"
-      imageAlt="Quick sort visualization"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="home" data-section="home">
+          <HeroLogoBillboardSplit
+            background={{ variant: "radial-gradient" }}
+            logoText="Master Quick Sort"
+            description="Visualize the elegance of divide-and-conquer sorting. Interactive learning for developers, students, and algorithm enthusiasts."
+            buttons={[
+              { text: "Watch Demo", href: "#features" },
+              { text: "Learn More", href: "#about" },
+            ]}
+            layoutOrder="default"
+            imageSrc="http://img.b2bpic.net/free-vector/advanced-tech-concept-landing-page_23-2148326208.jpg"
+            imageAlt="Quick sort visualization"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Why Quick Sort?"
-      description={[
-        "Quick Sort is a highly efficient, divide-and-conquer sorting algorithm. It works by picking a 'pivot' element and partitioning the array into two sub-arrays: elements less than the pivot and elements greater than the pivot.",
-        "Through recursive sorting, the entire array becomes ordered with an average complexity of O(n log n). This makes it faster and more space-efficient than many other common sorting algorithms.",
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextSplitAbout
+            useInvertedBackground={false}
+            title="Why Quick Sort?"
+            description={[
+              "Quick Sort is a highly efficient, divide-and-conquer sorting algorithm. It works by picking a 'pivot' element and partitioning the array into two sub-arrays: elements less than the pivot and elements greater than the pivot.",              "Through recursive sorting, the entire array becomes ordered with an average complexity of O(n log n). This makes it faster and more space-efficient than many other common sorting algorithms."]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Choose Pivot",
-          description: "The algorithm picks an element from the array to act as the pivot point.",
-          bentoComponent: "reveal-icon",
-          icon: Target,
-          imageSrc: "http://img.b2bpic.net/free-vector/advanced-tech-concept-landing-page_23-2148326208.jpg?_wi=2",
-          imageAlt: "abstract data visualization colorful bars",
-        },
-        {
-          title: "Partitioning",
-          description: "Elements are rearranged so those smaller than the pivot move left, and larger move right.",
-          bentoComponent: "animated-bar-chart",
-          imageSrc: "http://img.b2bpic.net/free-vector/big-data-flat-background_23-2148000679.jpg",
-          imageAlt: "algorithm explanation diagram flat design",
-        },
-        {
-          title: "Recursive Sort",
-          description: "The sub-arrays are then sorted independently using the same process until completion.",
-          bentoComponent: "reveal-icon",
-          icon: Repeat,
-          imageSrc: "http://img.b2bpic.net/free-psd/woman-holding-colorful-arrows_23-2149992399.jpg?_wi=1",
-          imageAlt: "customer support mascot 3d illustration",
-        },
-      ]}
-      title="Algorithm Steps in Action"
-      description="Break down the complexity into manageable steps to master the process."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            features={[
+              {
+                title: "Choose Pivot",                description: "The algorithm picks an element from the array to act as the pivot point.",                bentoComponent: "reveal-icon",                icon: Target,
+              },
+              {
+                title: "Partitioning",                description: "Elements are rearranged so those smaller than the pivot move left, and larger move right.",                bentoComponent: "animated-bar-chart"},
+              {
+                title: "Recursive Sort",                description: "The sub-arrays are then sorted independently using the same process until completion.",                bentoComponent: "reveal-icon",                icon: Repeat,
+              },
+            ]}
+            title="Algorithm Steps in Action"
+            description="Break down the complexity into manageable steps to master the process."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "What is the time complexity?",
-          content: "Quick Sort has an average time complexity of O(n log n) and a worst-case of O(n^2).",
-        },
-        {
-          id: "2",
-          title: "Is it stable?",
-          content: "Quick Sort is generally not considered a stable sorting algorithm.",
-        },
-        {
-          id: "3",
-          title: "Why is it named 'Quick'?",
-          content: "It is named 'Quick Sort' because it typically performs much faster than other O(n log n) algorithms like Merge Sort in practical scenarios.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-psd/woman-holding-colorful-arrows_23-2149992399.jpg?_wi=2"
-      imageAlt="Friendly educational mascot"
-      mediaAnimation="slide-up"
-      title="Common Questions"
-      description="Everything you need to know about Quick Sort."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              {
+                id: "1",                title: "What is the time complexity?",                content: "Quick Sort has an average time complexity of O(n log n) and a worst-case of O(n^2)."},
+              {
+                id: "2",                title: "Is it stable?",                content: "Quick Sort is generally not considered a stable sorting algorithm."},
+              {
+                id: "3",                title: "Why is it named 'Quick'?",                content: "It is named 'Quick Sort' because it typically performs much faster than other O(n log n) algorithms like Merge Sort in practical scenarios."},
+            ]}
+            imageSrc="http://img.b2bpic.net/free-psd/woman-holding-colorful-arrows_23-2149992399.jpg"
+            imageAlt="Friendly educational mascot"
+            mediaAnimation="slide-up"
+            title="Common Questions"
+            description="Everything you need to know about Quick Sort."
+            faqsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="metric" data-section="metric">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Quick Sort Performance"
-      description="Performance metrics compared to standard sorting algorithms."
-      metrics={[
-        {
-          id: "1",
-          value: "O(n log n)",
-          title: "Average Time",
-          items: [
-            "Efficiency",
-            "Scalability",
-            "Fast Processing",
-          ],
-        },
-        {
-          id: "2",
-          value: "O(n²)",
-          title: "Worst Time",
-          items: [
-            "Bad Pivot",
-            "High Complexity",
-            "Rare Case",
-          ],
-        },
-        {
-          id: "3",
-          value: "O(log n)",
-          title: "Space",
-          items: [
-            "Memory Efficient",
-            "In-place Sorting",
-            "Low Overhead",
-          ],
-        },
-        {
-          id: "4",
-          value: "Low",
-          title: "Stability",
-          items: [
-            "Not Stable",
-            "Swap Based",
-            "Positional Shifts",
-          ],
-        },
-        {
-          id: "5",
-          value: "Divide",
-          title: "Strategy",
-          items: [
-            "Recursive",
-            "Partitioning",
-            "Divide & Conquer",
-          ],
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Algorithm Guide",
-              href: "#",
-            },
-            {
-              label: "Visualize",
-              href: "#",
-            },
-            {
-              label: "Complexity Analysis",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Community",
-          items: [
-            {
-              label: "GitHub",
-              href: "#",
-            },
-            {
-              label: "Discord",
-              href: "#",
-            },
-            {
-              label: "Twitter",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="SortEdu"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Resources",                items: [
+                  { label: "Algorithm Guide", href: "#" },
+                  { label: "Visualize", href: "#" },
+                  { label: "Complexity Analysis", href: "#" },
+                ],
+              },
+              {
+                title: "Community",                items: [
+                  { label: "GitHub", href: "#" },
+                  { label: "Discord", href: "#" },
+                  { label: "Twitter", href: "#" },
+                ],
+              },
+            ]}
+            logoText="SortEdu"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1