From 540b74c469949b58349f4a26095d4436c7635823 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 1 May 2026 10:15:15 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 271 ++++++++---------------------------------------
 1 file changed, 42 insertions(+), 229 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8822ba4..77a7963 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,22 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Projects",
-          id: "projects",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Projects", id: "projects" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="DevStudio"
     />
@@ -54,31 +42,15 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background="gradient-bars"
+      background={{ variant: "gradient-bars" }}
       title="Crafting Genius Digital Experiences"
       description="Fullstack developer creating liquid-smooth interfaces and Three.js animations. Transforming creative visions into high-performance code."
       tag="Available for Work"
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-abstract-background-with-particle-lines_53876-104054.jpg",
-          imageAlt: "abstract liquid glass dark background",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/technology-abstract-background-with-particle-lines_53876-104054.jpg",          imageAlt: "abstract liquid glass dark background"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-shape-glowing-with-bright-holographic-colors_23-2151037237.jpg",
-          imageAlt: "3d floating abstract tech elements",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/light-blue-3d-abstract-wave-pattern_53876-95187.jpg",
-          imageAlt: "Light blue 3D abstract wave pattern",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desk-with-laptop-mouse_23-2148291124.jpg",
-          imageAlt: "Flat lay desk with laptop and mouse",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-plexus-design_1048-14928.jpg",
-          imageAlt: "3D render of a modern technology background with a plexus design",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/3d-shape-glowing-with-bright-holographic-colors_23-2151037237.jpg",          imageAlt: "3d floating abstract tech elements"}
       ]}
       mediaAnimation="blur-reveal"
       rating={5}
@@ -92,18 +64,9 @@ export default function LandingPage() {
       title="Turning Ideas into Reality"
       description="With a passion for liquid glass aesthetics and Three.js, I build applications that are as visually stunning as they are technically robust."
       metrics={[
-        {
-          value: "100+",
-          title: "Projects Completed",
-        },
-        {
-          value: "50+",
-          title: "Happy Clients",
-        },
-        {
-          value: "5+",
-          title: "Years Experience",
-        },
+        { value: "100+", title: "Projects Completed" },
+        { value: "50+", title: "Happy Clients" },
+        { value: "5+", title: "Years Experience" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/side-view-emo-teen-writing-notebook_23-2149829803.jpg"
       imageAlt="developer portrait dark workspace"
@@ -118,41 +81,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
-          id: "1",
-          title: "3D Animation",
-          description: "Expert in Three.js and WebGL for immersive visuals.",
-          tag: "Creative",
-          imageSrc: "http://img.b2bpic.net/free-photo/bubbles-black-background_23-2149345719.jpg",
-        },
-        {
-          id: "2",
-          title: "Fullstack Architecture",
-          description: "Robust backend systems paired with elegant frontends.",
-          tag: "Technical",
-          imageSrc: "http://img.b2bpic.net/free-vector/glassmorphism-matte-ui-icon-set-with-blurred-neon-gradient-mobile-app-design-transparent-frosted_88138-1729.jpg",
-        },
-        {
-          id: "3",
-          title: "Liquid Interfaces",
-          description: "High-fidelity UI/UX with glassmorphism and motion.",
-          tag: "Design",
-          imageSrc: "http://img.b2bpic.net/free-photo/detail-black-feather-edge-background_23-2148114627.jpg",
-        },
-        {
-          id: "4",
-          title: "Cloud Solutions",
-          description: "Scalable architecture hosted on reliable infrastructure.",
-          tag: "Cloud",
-          imageSrc: "http://img.b2bpic.net/free-photo/crystal-ball-still-life_52683-115501.jpg",
-        },
-        {
-          id: "5",
-          title: "Data Visualization",
-          description: "Meaningful insights through interactive dashboard charts.",
-          tag: "Analytics",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037160.jpg",
-        },
+        { id: "1", title: "3D Animation", description: "Expert in Three.js and WebGL for immersive visuals.", tag: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/bubbles-black-background_23-2149345719.jpg" },
+        { id: "2", title: "Fullstack Architecture", description: "Robust backend systems paired with elegant frontends.", tag: "Technical", imageSrc: "http://img.b2bpic.net/free-vector/glassmorphism-matte-ui-icon-set-with-blurred-neon-gradient-mobile-app-design-transparent-frosted_88138-1729.jpg" },
+        { id: "3", title: "Liquid Interfaces", description: "High-fidelity UI/UX with glassmorphism and motion.", tag: "Design", imageSrc: "http://img.b2bpic.net/free-photo/detail-black-feather-edge-background_23-2148114627.jpg" },
+        { id: "4", title: "Cloud Solutions", description: "Scalable architecture hosted on reliable infrastructure.", tag: "Cloud", imageSrc: "http://img.b2bpic.net/free-photo/crystal-ball-still-life_52683-115501.jpg" },
+        { id: "5", title: "Data Visualization", description: "Meaningful insights through interactive dashboard charts.", tag: "Analytics", imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037160.jpg" },
       ]}
       title="My Development Core"
       description="Technologies I leverage to create genius digital solutions."
@@ -161,52 +94,17 @@ export default function LandingPage() {
 
   <div id="projects" data-section="projects">
       <ProductCardFour
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="bento-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "1",
-          name: "SaaS Platform",
-          price: "View Demo",
-          variant: "Web App",
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-glassmorphism-mobile-app-template_23-2149441706.jpg",
-        },
-        {
-          id: "2",
-          name: "Mobile Dashboard",
-          price: "View Case",
-          variant: "Mobile",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg",
-        },
-        {
-          id: "3",
-          name: "Corporate Portal",
-          price: "View Live",
-          variant: "Web",
-          imageSrc: "http://img.b2bpic.net/free-photo/multicultural-team-women-leaders-hold-online-conference-call_482257-123708.jpg",
-        },
-        {
-          id: "4",
-          name: "Digital Shop",
-          price: "View Demo",
-          variant: "Ecommerce",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg",
-        },
-        {
-          id: "5",
-          name: "Analytics Hub",
-          price: "View Case",
-          variant: "SaaS",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg",
-        },
-        {
-          id: "6",
-          name: "Start-up Launchpad",
-          price: "View Live",
-          variant: "Web App",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-manager-analyzing-marketing-statistics-working-overhours-project-strategy-startup-office-entrepreneur-planning-business-investment-help-increase-company-profit_482257-66319.jpg",
-        },
+        { id: "1", name: "SaaS Platform", price: "View Demo", variant: "Web App", imageSrc: "http://img.b2bpic.net/free-vector/gradient-glassmorphism-mobile-app-template_23-2149441706.jpg" },
+        { id: "2", name: "Mobile Dashboard", price: "View Case", variant: "Mobile", imageSrc: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg" },
+        { id: "3", name: "Corporate Portal", price: "View Live", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/multicultural-team-women-leaders-hold-online-conference-call_482257-123708.jpg" },
+        { id: "4", name: "Digital Shop", price: "View Demo", variant: "Ecommerce", imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg" },
+        { id: "5", name: "Analytics Hub", price: "View Case", variant: "SaaS", imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg" },
+        { id: "6", name: "Start-up Launchpad", price: "View Live", variant: "Web App", imageSrc: "http://img.b2bpic.net/free-photo/african-american-manager-analyzing-marketing-statistics-working-overhours-project-strategy-startup-office-entrepreneur-planning-business-investment-help-increase-company-profit_482257-66319.jpg" },
       ]}
       title="Featured Projects"
       description="Selected works demonstrating high performance and creative design."
@@ -220,21 +118,9 @@ export default function LandingPage() {
       gridVariant="bento-grid"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "1",
-          value: "99.9%",
-          description: "Uptime Reliability",
-        },
-        {
-          id: "2",
-          value: "0.5s",
-          description: "Avg Load Speed",
-        },
-        {
-          id: "3",
-          value: "40%",
-          description: "Engagement Boost",
-        },
+        { id: "1", value: "99.9%", description: "Uptime Reliability" },
+        { id: "2", value: "0.5s", description: "Avg Load Speed" },
+        { id: "3", value: "40%", description: "Engagement Boost" },
       ]}
       title="Technical Performance"
       description="Data-driven results for every project I handle."
@@ -248,46 +134,11 @@ export default function LandingPage() {
       gridVariant="bento-grid"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Alex Rivers",
-          role: "CEO",
-          company: "TechFusion",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg",
-        },
-        {
-          id: "2",
-          name: "Sarah Chen",
-          role: "CTO",
-          company: "Innovate",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-with-tablet-side-view_23-2149457729.jpg",
-        },
-        {
-          id: "3",
-          name: "Mike Ross",
-          role: "Founder",
-          company: "StartupX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
-        },
-        {
-          id: "4",
-          name: "Elena King",
-          role: "Design Head",
-          company: "Creative Hub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-long-blonde-hair-red-jacket_23-2149020127.jpg",
-        },
-        {
-          id: "5",
-          name: "Jason Lee",
-          role: "Product Manager",
-          company: "GlobalCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/night-workaholic_1098-13344.jpg",
-        },
+        { id: "1", name: "Alex Rivers", role: "CEO", company: "TechFusion", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg" },
+        { id: "2", name: "Sarah Chen", role: "CTO", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-woman-with-tablet-side-view_23-2149457729.jpg" },
+        { id: "3", name: "Mike Ross", role: "Founder", company: "StartupX", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg" },
+        { id: "4", name: "Elena King", role: "Design Head", company: "Creative Hub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-long-blonde-hair-red-jacket_23-2149020127.jpg" },
+        { id: "5", name: "Jason Lee", role: "Product Manager", company: "GlobalCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/night-workaholic_1098-13344.jpg" },
       ]}
       title="Words from Partners"
       description="Trusted by visionary leaders in the industry."
@@ -299,21 +150,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "1",
-          title: "How do you work?",
-          content: "I use agile methodologies with deep focus on animation.",
-        },
-        {
-          id: "2",
-          title: "Can you use Three.js?",
-          content: "Yes, it is my preferred tool for creative web experiences.",
-        },
-        {
-          id: "3",
-          title: "Is the design responsive?",
-          content: "Absolutely, performance on all devices is guaranteed.",
-        },
+        { id: "1", title: "How do you work?", content: "I use agile methodologies with deep focus on animation." },
+        { id: "2", title: "Can you use Three.js?", content: "Yes, it is my preferred tool for creative web experiences." },
+        { id: "3", title: "Is the design responsive?", content: "Absolutely, performance on all devices is guaranteed." },
       ]}
       title="Frequently Asked Questions"
       description="Common questions about my development process."
@@ -327,23 +166,11 @@ export default function LandingPage() {
       title="Start a Project"
       description="Ready to build something genius together?"
       inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
+        { name: "email", type: "email", placeholder: "Your Email", required: true },
       ]}
       textarea={{
-        name: "message",
-        placeholder: "Tell me about your idea...",
-        required: true,
+        name: "message",        placeholder: "Tell me about your idea...",        required: true,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/abstract-orange-glowing-lines-background_1017-3201.jpg"
     />
@@ -355,29 +182,15 @@ export default function LandingPage() {
       logoText="DevStudio"
       columns={[
         {
-          title: "Navigation",
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "Projects",
-              href: "#projects",
-            },
+          title: "Navigation",          items: [
+            { label: "Home", href: "#hero" },
+            { label: "Projects", href: "#projects" },
           ],
         },
         {
-          title: "Social",
-          items: [
-            {
-              label: "Github",
-              href: "#",
-            },
-            {
-              label: "LinkedIn",
-              href: "#",
-            },
+          title: "Social",          items: [
+            { label: "Github", href: "#" },
+            { label: "LinkedIn", href: "#" },
           ],
         },
       ]}
-- 
2.49.1