From 983f6ab581b338e881353389a9330239690460c5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 15 Apr 2026 10:05:45 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 353 +++++++++++++++++------------------------------
 1 file changed, 130 insertions(+), 223 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4421dbc..aa96e65 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,247 +2,154 @@
 
 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 FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Award, CheckCircle, Zap } from "lucide-react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Award, CheckCircle, Zap } from "lucide-react";
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
+      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">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Skills",
-          id: "#skills",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="VA Portfolio"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "About", id: "#about" },
+              { name: "Skills", id: "#skills" },
+              { name: "Contact", id: "#contact" }
+            ]}
+            brandName="VA Portfolio"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "gradient-bars",
-      }}
-      logoText="Professional Virtual Assistant"
-      description="5+ Years of excellence in administrative support, web development, and customer care. Delivering precision and reliability to your business."
-      buttons={[
-        {
-          text: "View Work",
-          href: "#about",
-        },
-        {
-          text: "Contact Me",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/manager-holding-online-videocall-with-remotely-working-employees_482257-101080.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "gradient-bars" }}
+            logoText="Professional Virtual Assistant"
+            description="5+ Years of excellence in administrative support, web development, and customer care. Delivering precision and reliability to your business."
+            buttons={[
+              { text: "View Work", href: "#about" },
+              { text: "Contact Me", href: "#contact" }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/manager-holding-online-videocall-with-remotely-working-employees_482257-101080.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="About My Expertise"
-      description="With over 5 years of dedicated experience, I bridge the gap between technical programming and professional customer support. I specialize in HTML, CSS, JavaScript, and advanced data management. Multilingual with fluent English, Serbian, and basic Italian."
-      imageSrc="http://img.b2bpic.net/free-photo/smiling-woman-using-digital-tablet-home-office_329181-4278.jpg"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MediaAbout
+            useInvertedBackground={false}
+            title="About My Expertise"
+            description="With over 5 years of dedicated experience, I bridge the gap between technical programming and professional customer support. I specialize in HTML, CSS, JavaScript, and advanced data management. Multilingual with fluent English, Serbian, and basic Italian."
+            imageSrc="http://img.b2bpic.net/free-photo/smiling-woman-using-digital-tablet-home-office_329181-4278.jpg"
+          />
+        </div>
 
-  <div id="skills" data-section="skills">
-      <FeatureCardTwentyNine
-      animationType="slide-up"
-      textboxLayout="inline-image"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Programming",
-          description: "Expert in JavaScript, HTML, and CSS for dynamic web solutions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/retro-computer-icon-isolated_53876-71278.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/code-icon-front-side-with-white-background_187299-39824.jpg",
-          buttonText: "Explore",
-        },
-        {
-          title: "Data Management",
-          description: "Advanced data entry and Excel analysis for high-precision reporting.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884896.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/seo-optimization-3d-render-cartoon-illustration_107791-16996.jpg",
-          buttonText: "Explore",
-        },
-        {
-          title: "Languages",
-          description: "Fluent in English, Serbian, and basic Italian for global communication.",
-          imageSrc: "http://img.b2bpic.net/free-vector/call-center-support-banners-consultation-free-call-operator-technical-assistance-information-vector-illustration_1284-46201.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-vector/education-dictionaries-communication-different-languages-translation-dictionary-concepts-flat-style_1284-41319.jpg",
-          buttonText: "Explore",
-        },
-      ]}
-      title="My Core Competencies"
-      description="Comprehensive skill set built to empower businesses and automate workflows."
-    />
-  </div>
+        <div id="skills" data-section="skills">
+          <FeatureCardTwentyNine
+            animationType="slide-up"
+            textboxLayout="inline-image"
+            gridVariant="bento-grid"
+            useInvertedBackground={true}
+            features={[
+              {
+                title: "Programming",                description: "Expert in JavaScript, HTML, and CSS for dynamic web solutions.",                imageSrc: "http://img.b2bpic.net/free-photo/retro-computer-icon-isolated_53876-71278.jpg",                titleImageSrc: "http://img.b2bpic.net/free-photo/code-icon-front-side-with-white-background_187299-39824.jpg",                buttonText: "Explore"
+              },
+              {
+                title: "Data Management",                description: "Advanced data entry and Excel analysis for high-precision reporting.",                imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884896.jpg",                titleImageSrc: "http://img.b2bpic.net/free-photo/seo-optimization-3d-render-cartoon-illustration_107791-16996.jpg",                buttonText: "Explore"
+              },
+              {
+                title: "Languages",                description: "Fluent in English, Serbian, and basic Italian for global communication.",                imageSrc: "http://img.b2bpic.net/free-vector/call-center-support-banners-consultation-free-call-operator-technical-assistance-information-vector-illustration_1284-46201.jpg",                titleImageSrc: "http://img.b2bpic.net/free-vector/education-dictionaries-communication-different-languages-translation-dictionary-concepts-flat-style_1284-41319.jpg",                buttonText: "Explore"
+              }
+            ]}
+            title="My Core Competencies"
+            description="Comprehensive skill set built to empower businesses and automate workflows."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          icon: Award,
-          title: "Years Experience",
-          value: "5+",
-        },
-        {
-          id: "m2",
-          icon: Zap,
-          title: "Completed Projects",
-          value: "200+",
-        },
-        {
-          id: "m3",
-          icon: CheckCircle,
-          title: "Customer Satisfaction",
-          value: "100%",
-        },
-      ]}
-      title="Professional Impact"
-      description="Quantifiable results achieved through consistent performance."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", icon: Award, title: "Years Experience", value: "5+" },
+              { id: "m2", icon: Zap, title: "Completed Projects", value: "200+" },
+              { id: "m3", icon: CheckCircle, title: "Customer Satisfaction", value: "100%" }
+            ]}
+            title="Professional Impact"
+            description="Quantifiable results achieved through consistent performance."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Client One",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
-        },
-        {
-          id: "2",
-          name: "Client Two",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-business-man-standing-outside_1262-3488.jpg",
-        },
-        {
-          id: "3",
-          name: "Client Three",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-employee-with-coffee-cup-office_482257-119420.jpg",
-        },
-        {
-          id: "4",
-          name: "Client Four",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
-        },
-        {
-          id: "5",
-          name: "Client Five",
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-business-coach-posing-training-room_74855-3026.jpg",
-        },
-      ]}
-      cardTitle="Client Success Stories"
-      cardTag="Testimonials"
-      cardAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwelve
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", name: "Client One", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg" },
+              { id: "2", name: "Client Two", imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-business-man-standing-outside_1262-3488.jpg" },
+              { id: "3", name: "Client Three", imageSrc: "http://img.b2bpic.net/free-photo/male-employee-with-coffee-cup-office_482257-119420.jpg" },
+              { id: "4", name: "Client Four", imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg" },
+              { id: "5", name: "Client Five", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-business-coach-posing-training-room_74855-3026.jpg" }
+            ]}
+            cardTitle="Client Success Stories"
+            cardTag="Testimonials"
+            cardAnimation="slide-up"
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Can you handle short-term projects?",
-          content: "Yes, I am available for both project-based and ongoing virtual assistance tasks.",
-        },
-        {
-          id: "f2",
-          title: "Do you work with non-English speakers?",
-          content: "Yes, I am fluent in Serbian and have a basic understanding of Italian.",
-        },
-        {
-          id: "f3",
-          title: "How do you ensure data accuracy?",
-          content: "I follow strict verification protocols and use automated data entry tools.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/businesswoman-office-holding-tablet_23-2152013704.jpg"
-      title="Frequently Asked"
-      description="Common inquiries regarding my services and workflow."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Can you handle short-term projects?", content: "Yes, I am available for both project-based and ongoing virtual assistance tasks." },
+              { id: "f2", title: "Do you work with non-English speakers?", content: "Yes, I am fluent in Serbian and have a basic understanding of Italian." },
+              { id: "f3", title: "How do you ensure data accuracy?", content: "I follow strict verification protocols and use automated data entry tools." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/businesswoman-office-holding-tablet_23-2152013704.jpg"
+            title="Frequently Asked"
+            description="Common inquiries regarding my services and workflow."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={true}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Get in touch"
-      title="Let's Work Together"
-      description="Ready to streamline your business? Send a message and let's start a conversation about how I can help."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            useInvertedBackground={true}
+            background={{ variant: "gradient-bars" }}
+            tag="Get in touch"
+            title="Let's Work Together"
+            description="Ready to streamline your business? Send a message and let's start a conversation about how I can help."
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Skills",
-              href: "#skills",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="VA Portfolio"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "About", href: "#about" }, { label: "Skills", href: "#skills" }] },
+              { items: [{ label: "Contact", href: "#contact" }, { label: "Privacy", href: "#" }] }
+            ]}
+            logoText="VA Portfolio"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1