From 677ac3afa9158aee6b49017cd7cd612133cf5a23 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 21 Apr 2026 15:11:15 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 539 +++++++++++++++--------------------------------
 1 file changed, 166 insertions(+), 373 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9d5bd4b..3dc6937 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,390 +20,183 @@ export default function LandingPage() {
         defaultButtonVariant="elastic-effect"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
+        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: "About",
-          id: "#about",
-        },
-        {
-          name: "Work",
-          id: "#work",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="My Portfolio"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "About", id: "#about" },
+              { name: "Work", id: "#work" },
+              { name: "Contact", id: "#contact" }
+            ]}
+            brandName="My Portfolio"
+            button={{ text: "Get Started", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      title="Crafting Digital Experiences"
-      description="I'm a designer and developer passionate about building clean, high-impact digital products. Let's create something meaningful together."
-      carouselItems={[
-        {
-          id: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-posing-with-perfect-skin_23-2149369982.jpg?_wi=1",
-          imageAlt: "Creative workspace",
-        },
-        {
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/wooden-desk-concept-with-space-laptop_23-2147731382.jpg?_wi=1",
-          imageAlt: "Design studio",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/colorful-painted-paper-texture_23-2148177463.jpg?_wi=1",
-          imageAlt: "Design concept",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-laptop-flowerpot_23-2147689407.jpg",
-          imageAlt: "Dev workspace",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-wall_23-2148106976.jpg",
-          imageAlt: "Architectural lines",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/various-adhesive-notes-floor_23-2147696031.jpg",
-          imageAlt: "Teamwork",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardRotatedCarousel
+            background={{ variant: "rotated-rays-animated" }}
+            title="Crafting Digital Experiences"
+            description="I'm a designer and developer passionate about building clean, high-impact digital products. Let's create something meaningful together."
+            carouselItems={[
+              { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-posing-with-perfect-skin_23-2149369982.jpg", imageAlt: "Creative workspace" },
+              { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/wooden-desk-concept-with-space-laptop_23-2147731382.jpg", imageAlt: "Design studio" },
+              { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/colorful-painted-paper-texture_23-2148177463.jpg", imageAlt: "Design concept" },
+              { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-laptop-flowerpot_23-2147689407.jpg", imageAlt: "Dev workspace" },
+              { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-wall_23-2148106976.jpg", imageAlt: "Architectural lines" },
+              { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/various-adhesive-notes-floor_23-2147696031.jpg", imageAlt: "Teamwork" }
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={true}
-      title="My Expertise"
-      metrics={[
-        {
-          icon: Code,
-          label: "Projects Completed",
-          value: "50+",
-        },
-        {
-          icon: Users,
-          label: "Clients Served",
-          value: "20+",
-        },
-        {
-          icon: Award,
-          label: "Design Awards",
-          value: "5",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            useInvertedBackground={true}
+            title="My Expertise"
+            metrics={[
+              { icon: Code, label: "Projects Completed", value: "50+" },
+              { icon: Users, label: "Clients Served", value: "20+" },
+              { icon: Award, label: "Design Awards", value: "5" }
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Web Development",
-          description: "Responsive and accessible front-end development.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/digital-graphic-tablet-laptop-mock-up-with-office-objects-white-background_23-2147880630.jpg",
-            imageAlt: "Laptop development",
-          },
-          items: [
-            {
-              icon: Globe,
-              text: "Next.js & React",
-            },
-            {
-              icon: Zap,
-              text: "Performance optimized",
-            },
-          ],
-          reverse: false,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-posing-with-perfect-skin_23-2149369982.jpg?_wi=2",
-          imageAlt: "Digital graphic tablet and laptop mock up with office objects on white background",
-        },
-        {
-          title: "UX/UI Design",
-          description: "User-centric design systems that convert.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-laptop-stationeries-white-tabletop_23-2147880499.jpg",
-            imageAlt: "Figma workspace",
-          },
-          items: [
-            {
-              icon: Layout,
-              text: "Figma & Framer",
-            },
-            {
-              icon: Palette,
-              text: "System consistency",
-            },
-          ],
-          reverse: true,
-          imageSrc: "http://img.b2bpic.net/free-photo/wooden-desk-concept-with-space-laptop_23-2147731382.jpg?_wi=2",
-          imageAlt: "Digital graphic tablet and laptop mock up with office objects on white background",
-        },
-        {
-          title: "Brand Strategy",
-          description: "Defining your identity in a noisy market.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-top-view-office-table-desk-workspace-background_1150-6664.jpg",
-            imageAlt: "Brand workshop",
-          },
-          items: [
-            {
-              icon: Target,
-              text: "Market positioning",
-            },
-            {
-              icon: Briefcase,
-              text: "Brand workshops",
-            },
-          ],
-          reverse: false,
-          imageSrc: "http://img.b2bpic.net/free-photo/colorful-painted-paper-texture_23-2148177463.jpg?_wi=2",
-          imageAlt: "Digital graphic tablet and laptop mock up with office objects on white background",
-        },
-      ]}
-      title="What I Do Best"
-      description="I specialize in delivering holistic digital solutions that balance aesthetic beauty with functional precision."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "Web Development",                description: "Responsive and accessible front-end development.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/digital-graphic-tablet-laptop-mock-up-with-office-objects-white-background_23-2147880630.jpg", imageAlt: "Laptop development" },
+                items: [
+                  { icon: Globe, text: "Next.js & React" },
+                  { icon: Zap, text: "Performance optimized" }
+                ],
+                reverse: false
+              },
+              {
+                title: "UX/UI Design",                description: "User-centric design systems that convert.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-laptop-stationeries-white-tabletop_23-2147880499.jpg", imageAlt: "Figma workspace" },
+                items: [
+                  { icon: Layout, text: "Figma & Framer" },
+                  { icon: Palette, text: "System consistency" }
+                ],
+                reverse: true
+              },
+              {
+                title: "Brand Strategy",                description: "Defining your identity in a noisy market.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-top-view-office-table-desk-workspace-background_1150-6664.jpg", imageAlt: "Brand workshop" },
+                items: [
+                  { icon: Target, text: "Market positioning" },
+                  { icon: Briefcase, text: "Brand workshops" }
+                ],
+                reverse: false
+              }
+            ]}
+            title="What I Do Best"
+            description="I specialize in delivering holistic digital solutions that balance aesthetic beauty with functional precision."
+          />
+        </div>
 
-  <div id="work" data-section="work">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "E-commerce Platform",
-          price: "Case Study",
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-mature-woman-sitting-stool_23-2148275043.jpg",
-        },
-        {
-          id: "p2",
-          name: "SaaS Dashboard UI",
-          price: "Case Study",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915826.jpg",
-        },
-        {
-          id: "p3",
-          name: "Mobile Banking App",
-          price: "Case Study",
-          imageSrc: "http://img.b2bpic.net/free-photo/illuminated-portal-architecture-golden-light_23-2151986498.jpg",
-        },
-        {
-          id: "p4",
-          name: "Design Portfolio System",
-          price: "Case Study",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-working-his-laptop_53876-49293.jpg",
-        },
-        {
-          id: "p5",
-          name: "Real Estate Listing",
-          price: "Case Study",
-          imageSrc: "http://img.b2bpic.net/free-photo/windows-building-textures_1203-7134.jpg",
-        },
-        {
-          id: "p6",
-          name: "Travel Booking App",
-          price: "Case Study",
-          imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-interacting-graph_1170-1085.jpg",
-        },
-      ]}
-      title="Selected Works"
-      description="A collection of projects showcasing my design and development capabilities."
-    />
-  </div>
+        <div id="work" data-section="work">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={true}
+            products={[
+              { id: "p1", name: "E-commerce Platform", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/elegant-mature-woman-sitting-stool_23-2148275043.jpg" },
+              { id: "p2", name: "SaaS Dashboard UI", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915826.jpg" },
+              { id: "p3", name: "Mobile Banking App", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/illuminated-portal-architecture-golden-light_23-2151986498.jpg" },
+              { id: "p4", name: "Design Portfolio System", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/man-working-his-laptop_53876-49293.jpg" },
+              { id: "p5", name: "Real Estate Listing", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/windows-building-textures_1203-7134.jpg" },
+              { id: "p6", name: "Travel Booking App", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-interacting-graph_1170-1085.jpg" }
+            ]}
+            title="Selected Works"
+            description="A collection of projects showcasing my design and development capabilities."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Miller",
-          role: "CEO",
-          company: "Innovate",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-businesswoman-with-folded-arms_1262-1775.jpg",
-        },
-        {
-          id: "t2",
-          name: "David Chen",
-          role: "CTO",
-          company: "TechLab",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-wearing-suit-tie-standing-classroom_181624-14287.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emma Wilson",
-          role: "CMO",
-          company: "GrowthCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg",
-        },
-        {
-          id: "t4",
-          name: "James Bond",
-          role: "Founder",
-          company: "Agency",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-businessman-wearing-suit-standing-with-crossed-arms-with-isolated-studio-white-background_1150-63677.jpg",
-        },
-        {
-          id: "t5",
-          name: "Alice Brown",
-          role: "Designer",
-          company: "Studio",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-white-suit-studio_1303-20663.jpg",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "100%",
-          label: "Client Satisfaction",
-        },
-        {
-          value: "24h",
-          label: "Avg Response Time",
-        },
-        {
-          value: "90%",
-          label: "Return Clients",
-        },
-      ]}
-      title="Client Feedback"
-      description="Don't take my word for it; hear what clients have to say about working with me."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSixteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Sarah Miller", role: "CEO", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-young-businesswoman-with-folded-arms_1262-1775.jpg" },
+              { id: "t2", name: "David Chen", role: "CTO", company: "TechLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-wearing-suit-tie-standing-classroom_181624-14287.jpg" },
+              { id: "t3", name: "Emma Wilson", role: "CMO", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg" },
+              { id: "t4", name: "James Bond", role: "Founder", company: "Agency", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-businessman-wearing-suit-standing-with-crossed-arms-with-isolated-studio-white-background_1150-63677.jpg" },
+              { id: "t5", name: "Alice Brown", role: "Designer", company: "Studio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-white-suit-studio_1303-20663.jpg" }
+            ]}
+            kpiItems={[
+              { value: "100%", label: "Client Satisfaction" },
+              { value: "24h", label: "Avg Response Time" },
+              { value: "90%", label: "Return Clients" }
+            ]}
+            title="Client Feedback"
+            description="Don't take my word for it; hear what clients have to say about working with me."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "Availability",
-          content: "I am currently accepting new projects for the upcoming quarter.",
-        },
-        {
-          id: "q2",
-          title: "Work Process",
-          content: "I start with research, moving to wireframes, prototypes, and development.",
-        },
-        {
-          id: "q3",
-          title: "Tools Used",
-          content: "I primarily use Figma for design and Next.js for development.",
-        },
-        {
-          id: "q4",
-          title: "Pricing",
-          content: "Pricing depends on the scope and complexity of your requirements.",
-        },
-        {
-          id: "q5",
-          title: "Revision Policy",
-          content: "I include 3 rounds of revisions in every standard project.",
-        },
-      ]}
-      sideTitle="Frequently Asked"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            useInvertedBackground={true}
+            faqs={[
+              { id: "q1", title: "Availability", content: "I am currently accepting new projects for the upcoming quarter." },
+              { id: "q2", title: "Work Process", content: "I start with research, moving to wireframes, prototypes, and development." },
+              { id: "q3", title: "Tools Used", content: "I primarily use Figma for design and Next.js for development." },
+              { id: "q4", title: "Pricing", content: "Pricing depends on the scope and complexity of your requirements." },
+              { id: "q5", title: "Revision Policy", content: "I include 3 rounds of revisions in every standard project." }
+            ]}
+            sideTitle="Frequently Asked"
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "TechCorp",
-        "InnovateLab",
-        "GrowthCo",
-        "StartupXYZ",
-        "DigitalAgency",
-        "CreativeStudio",
-        "FutureBrand",
-      ]}
-      title="Trusted Partners"
-      description="I have collaborated with some of the most forward-thinking teams."
-    />
-  </div>
+        <div id="socialProof" data-section="socialProof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ", "DigitalAgency", "CreativeStudio", "FutureBrand"]}
+            title="Trusted Partners"
+            description="I have collaborated with some of the most forward-thinking teams."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Let's Collaborate"
-      title="Have a project in mind?"
-      description="Send me a message to discuss your goals and how we can work together."
-      buttons={[
-        {
-          text: "Email Me",
-          href: "mailto:hello@example.com",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Let's Collaborate"
+            title="Have a project in mind?"
+            description="Send me a message to discuss your goals and how we can work together."
+            buttons={[{ text: "Email Me", href: "mailto:hello@example.com" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="My Portfolio"
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Work",
-              href: "#work",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "Twitter",
-              href: "#",
-            },
-            {
-              label: "LinkedIn",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2024 Portfolio. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="My Portfolio"
+            columns={[
+              {
+                title: "Navigation",                items: [{ label: "About", href: "#about" }, { label: "Work", href: "#work" }]
+              },
+              {
+                title: "Connect",                items: [{ label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }]
+              }
+            ]}
+            copyrightText="© 2024 Portfolio. All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1