From afb20c4ea6917f0fe46d79cf270020f6aec21587 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 27 Apr 2026 16:16:29 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 403 +++++++++--------------------------------------
 1 file changed, 72 insertions(+), 331 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 23e5c24..445e51b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,16 +3,16 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import { Award, Calendar, Code2, Star, Users } from "lucide-react";
+import FaqBase from '@/components/sections/faq/FaqBase';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { Award, Calendar, Code2, Star, Users, Brain, Target, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,388 +30,129 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleApple
+      <NavbarStyleCentered
       navItems={[
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Work",
-          id: "#work",
-        },
-        {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "About", id: "#about" },
+        { name: "Expertise", id: "#features" },
+        { name: "Work", id: "#work" },
+        { name: "Contact", id: "#contact" },
       ]}
-      brandName="Portfolio"
+      brandName="Creative Professional"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardGallery
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Crafting Digital Experiences"
-      description="Showcasing expertise through thoughtful design and engineering."
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894457.jpg",
-          imageAlt: "modern abstract background gradient",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/steel-blue-abstract-background-wallpaper-image_53876-104016.jpg",
-          imageAlt: "geometric shape design",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/earth-tone-textured-background-brown-abstract-art_53876-126567.jpg",
-          imageAlt: "elegant minimal background",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-paint-stained-white-foam-backdrop_23-2148078880.jpg",
-          imageAlt: "clean creative abstract",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-vases-with-different-shapes_23-2149681142.jpg",
-          imageAlt: "soft gradient background light",
-        },
-      ]}
-      mediaAnimation="slide-up"
+      <HeroBillboardDashboard
+      title="Design & Engineering"
+      description="Helping brands build digital products that perform."
+      dashboard={{
+        title: "Project Tracker",        stats: [
+          { title: "Active", values: [10, 5, 2], description: "Ongoing projects" },
+          { title: "Speed", values: [85, 90, 88], description: "Performance metric" },
+          { title: "Growth", values: [120, 150, 135], description: "Yearly progress" },
+        ],
+        logoIcon: Brain,
+        sidebarItems: [{ icon: Zap, active: true }, { icon: Target }],
+        imageSrc: "http://img.b2bpic.net/free-photo/designer-desk-office-creative-working-space_23-2148281358.jpg"}}
     />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",
-          content: "About ",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
-          alt: "professional man portrait studio",
-        },
-        {
-          type: "text",
-          content: " Me",
-        },
+      <TextSplitAbout
+      title="About Me"
+      description={[
+        "I am a creative professional focused on building meaningful user experiences.",        "With years of experience, I bridge the gap between business strategy and high-fidelity design."
       ]}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSeven
+      <FeatureHoverPattern
+      title="My Expertise"
+      description="Leveraging technical skills to drive creative solutions."
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Design",
-          description: "User-centered interface design.",
-          imageSrc: "http://img.b2bpic.net/free-photo/ideas-windows-bulb-question-mark-speech-bubble-sign_53876-120475.jpg",
-          imageAlt: "abstract design icon",
-        },
-        {
-          title: "Engineering",
-          description: "Robust and scalable code.",
-          imageSrc: "http://img.b2bpic.net/free-photo/binary-code-background_1048-6190.jpg",
-          imageAlt: "software code abstract",
-        },
-        {
-          title: "Strategy",
-          description: "Data-driven business decisions.",
-          imageSrc: "http://img.b2bpic.net/free-vector/universal-business-icons-collectio_1390-50.jpg",
-          imageAlt: "business growth icon",
-        },
-        {
-          title: "Product",
-          description: "Bridging business and user needs.",
-          imageSrc: "http://img.b2bpic.net/free-photo/creative-ideas-identity-product-develop-design_53876-167129.jpg",
-          imageAlt: "Creative Ideas Identity Product Develop Design",
-        },
-        {
-          title: "Marketing",
-          description: "Amplifying brand presence.",
-          imageSrc: "http://img.b2bpic.net/free-vector/20-business-startup-outline-icon-presentation_1142-22224.jpg",
-          imageAlt: "20 Business Startup Outline icon for presentation",
-        },
+        { icon: Brain, title: "Design Strategy", description: "Crafting intuitive journeys." },
+        { icon: Zap, title: "Web Development", description: "Building robust front-ends." },
+        { icon: Target, title: "Product Management", description: "Leading successful releases." }
       ]}
-      title="Areas of Expertise"
-      description="Skills and tools that drive impact."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardEleven
+      title="Key Milestones"
+      description="Data-driven results for every project."
       animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "10+",
-          title: "Projects",
-          description: "Completed successfully",
-          icon: Award,
-        },
-        {
-          id: "m2",
-          value: "5+",
-          title: "Clients",
-          description: "Across multiple industries",
-          icon: Users,
-        },
-        {
-          id: "m3",
-          value: "100%",
-          title: "Satisfaction",
-          description: "Delivering high value",
-          icon: Star,
-        },
-        {
-          id: "m4",
-          value: "3",
-          title: "Years",
-          description: "Industry experience",
-          icon: Calendar,
-        },
-        {
-          id: "m5",
-          value: "15+",
-          title: "Features",
-          description: "Implemented & shipped",
-          icon: Code2,
-        },
+        { id: "1", value: "50+", title: "Projects", description: "Successfully shipped", imageSrc: "http://img.b2bpic.net/free-photo/successful-business-team-working-office_23-2148421867.jpg" },
+        { id: "2", value: "15+", title: "Clients", description: "Industry partners", imageSrc: "http://img.b2bpic.net/free-photo/top-view-business-people-meeting_23-2148483756.jpg" }
       ]}
-      title="Professional Milestones"
-      description="Measured results through dedication."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardTwo
+      title="Feedback"
+      description="What partners say."
       animationType="slide-up"
       textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       testimonials={[
-        {
-          id: "t1",
-          name: "Alice Smith",
-          role: "PM",
-          company: "Tech Corp",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-seaside_23-2149412668.jpg",
-        },
-        {
-          id: "t2",
-          name: "Bob Jones",
-          role: "Founder",
-          company: "StartUp",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg",
-        },
-        {
-          id: "t3",
-          name: "Charlie Day",
-          role: "Eng",
-          company: "SoftCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-nature_23-2148523898.jpg",
-        },
-        {
-          id: "t4",
-          name: "Dana White",
-          role: "CEO",
-          company: "Innovate",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-business-female_23-2148411859.jpg",
-        },
-        {
-          id: "t5",
-          name: "Evan Wright",
-          role: "CTO",
-          company: "Devs",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-6565.jpg",
-        },
+        { id: "1", name: "Alex R.", role: "Founder", testimonial: "Fantastic work on our recent launch.", icon: Star },
+        { id: "2", name: "Sam L.", role: "Product Lead", testimonial: "Professional and highly efficient.", icon: Star }
       ]}
-      kpiItems={[
-        {
-          value: "50+",
-          label: "Collaborations",
-        },
-        {
-          value: "99%",
-          label: "Success Rate",
-        },
-        {
-          value: "15",
-          label: "Awards",
-        },
-      ]}
-      title="Trusted by Peers"
-      description="Genuine feedback from collaborators."
     />
   </div>
 
   <div id="work" data-section="work">
-      <ProductCardTwo
+      <ProductCardThree
+      title="Recent Work"
+      description="A curated selection of my projects."
       animationType="slide-up"
-      textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          brand: "Brand",
-          name: "Web App",
-          price: "$0",
-          rating: 5,
-          reviewCount: "10",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hands-holding-electronic-devices-set_107791-15405.jpg",
-        },
-        {
-          id: "p2",
-          brand: "Brand",
-          name: "Mobile",
-          price: "$0",
-          rating: 5,
-          reviewCount: "10",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-child-hands-holding-phone-with-dads-incoming-call-display_169016-43119.jpg",
-        },
-        {
-          id: "p3",
-          brand: "Brand",
-          name: "Design",
-          price: "$0",
-          rating: 5,
-          reviewCount: "10",
-          imageSrc: "http://img.b2bpic.net/free-psd/geometric-landing-page-design-template_23-2149069287.jpg",
-        },
-        {
-          id: "p4",
-          brand: "Brand",
-          name: "Logo",
-          price: "$0",
-          rating: 5,
-          reviewCount: "10",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345460.jpg",
-        },
-        {
-          id: "p5",
-          brand: "Brand",
-          name: "Branding",
-          price: "$0",
-          rating: 5,
-          reviewCount: "10",
-          imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg",
-        },
-        {
-          id: "p6",
-          brand: "Brand",
-          name: "Print",
-          price: "$0",
-          rating: 5,
-          reviewCount: "10",
-          imageSrc: "http://img.b2bpic.net/free-vector/modern-business-flyer-template_23-2147894430.jpg",
-        },
+        { id: "p1", name: "Dash UI", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/dashboard-ui-mockup_23-2149544865.jpg" },
+        { id: "p2", name: "Web App", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/web-app-concept_23-2149544865.jpg" },
+        { id: "p3", name: "Identity", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/branding-identity-mockup_23-2149544865.jpg" }
       ]}
-      title="Selected Projects"
-      description="A collection of recent works."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Location?",
-          content: "Remote primarily.",
-        },
-        {
-          id: "f2",
-          title: "Availability?",
-          content: "Open for new projects.",
-        },
-        {
-          id: "f3",
-          title: "Consulting?",
-          content: "Yes, always.",
-        },
-        {
-          id: "f4",
-          title: "Process?",
-          content: "Collaborative and iterative.",
-        },
-        {
-          id: "f5",
-          title: "Timeline?",
-          content: "Project dependent, usually 4-8 weeks.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-bookshelf-water-dispenser-business-office-empty-desk-with-decorations-watercooler-startup-space-shelves-with-minimal-decor-decorative-plants-refreshment_482257-27791.jpg"
-      title="Frequently Asked"
-      description="Common inquiries."
+      <FaqBase
+      title="Inquiries"
+      description="Answers to common questions."
       faqsAnimation="slide-up"
-      mediaAnimation="slide-up"
+      textboxLayout="split"
+      faqs={[
+        { id: "q1", title: "Available?", content: "Yes, I am currently accepting new projects." },
+        { id: "q2", title: "Remote?", content: "Available for global remote work." }
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contact"
-      title="Let's Collaborate"
-      description="Reach out for inquiries."
+      title="Contact Me"
+      description="Let's talk about your vision."
+      tag="Collaboration"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
+      <FooterMedia
+      imageSrc="http://img.b2bpic.net/free-photo/abstract-textured-background_23-2149544865.jpg"
+      logoText="Portfolio"
       columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Work",
-              href: "#work",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Links", items: [{ label: "Home", href: "#" }, { label: "About", href: "#about" }] }
       ]}
-      bottomLeftText="© 2024 Portfolio."
-      bottomRightText="All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1