Update src/app/page.tsx

src/app/page.tsx

@@ -12,7 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { Award, CheckCircle, Clock } from "lucide-react";
+import { Award, CheckCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -22,28 +22,19 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="compact"
         sizing="mediumLargeSizeMediumTitles"
-        background="circleGradient"
+        background="noise"
-        cardStyle="solid"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="flat"
+        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "About", id: "about" },
-          name: "About",
+        { name: "Works", id: "features" },
-          id: "about",
+        { name: "Contact", id: "contact" },
-        },
-        {
-          name: "Works",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Portfolio"
     />
@@ -51,111 +42,18 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain",
-      }}
       title="Creative Portfolio"
       description="Showcasing high-impact designs, strategic concepts, and visual excellence built with precision and passion."
       leftCarouselItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-minimalist-wedding-invitation_23-2148242357.jpg", imageAlt: "Hero Creative 1" },
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-minimalist-wedding-invitation_23-2148242357.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151776101.jpg", imageAlt: "Hero Creative 2" },
-          imageAlt: "Hero Creative 1",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151776101.jpg",
-          imageAlt: "Hero Creative 2",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg",
-          imageAlt: "Hero Creative 3",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-shapes-facebook-cover_23-2149098199.jpg",
-          imageAlt: "Hero Creative 4",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-wedding-paper-with-dried-plant_23-2149374589.jpg",
-          imageAlt: "Hero Creative 5",
-        },
       ]}
       rightCarouselItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-psd/art-gallery-banner-template_23-2148596130.jpg", imageAlt: "Hero Creative 3" },
-          imageSrc: "http://img.b2bpic.net/free-psd/art-gallery-banner-template_23-2148596130.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-photo/red-coffee-cup-open-laptop-white-background_23-2148178591.jpg", imageAlt: "Hero Creative 4" },
-          imageAlt: "Hero Creative 6",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/red-coffee-cup-open-laptop-white-background_23-2148178591.jpg",
-          imageAlt: "Hero Creative 7",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",
-          imageAlt: "Hero Creative 8",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151272900.jpg",
-          imageAlt: "Hero Creative 9",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-shades-pink-each-other-divided-by-line_181624-5214.jpg",
-          imageAlt: "Hero Creative 10",
-        },
-      ]}
-      buttons={[
-        {
-          text: "View Projects",
-          href: "#features",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/houndstongue-leaves-white-background-text-space_53876-97375.jpg",
-          alt: "Avatar 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/top-view-notebook-with-plant_23-2148838842.jpg",
-          alt: "Avatar 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/dried-leaf-frame-botanical-background_53876-106189.jpg",
-          alt: "Avatar 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/tropical-palm-leaf-simple-social-media-banner-background_53876-96889.jpg",
-          alt: "Avatar 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-vector/fluid-gradient-background-templates_53876-80614.jpg",
-          alt: "Avatar 5",
-        },
-      ]}
-      avatarText="Trusted by 50+ clients worldwide"
-      marqueeItems={[
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/yellow-red-dye-water_23-2147745440.jpg",
-          alt: "Marquee 1",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/flat-lay-shades-red-papers-close-up_23-2148263920.jpg",
-          alt: "Marquee 2",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/detail-tasty-jelly-cake_23-2147840383.jpg",
-          alt: "Marquee 3",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/single-curved-sheet-paper_23-2148319062.jpg",
-          alt: "Marquee 4",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/abstract-banners-with-chrome-elements_1284-25621.jpg",
-          alt: "Marquee 5",
-        },
       ]}
+      buttons={[{ text: "View Projects", href: "#features" }]}
     />
   </div>
 
@@ -166,18 +64,8 @@ export default function LandingPage() {
       title="About My Creative Journey"
       description="With over 5 years of experience in digital design and strategy, I transform complex ideas into visually compelling realities that resonate with audiences."
       bulletPoints={[
-        {
+        { title: "Design Strategy", description: "Focused on user-centric design principles." },
-          title: "Design Strategy",
+        { title: "Visual Excellence", description: "High fidelity production across digital media." },
-          description: "Focused on user-centric design principles.",
-        },
-        {
-          title: "Visual Excellence",
-          description: "High fidelity production across digital media.",
-        },
-        {
-          title: "Collaboration",
-          description: "Working closely with teams for results.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-posing-black-white-medium-shot_23-2149411384.jpg"
     />
@@ -190,21 +78,8 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Brand Identity", description: "Crafting visual identities for startups.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg" },
-          title: "Brand Identity",
+        { title: "Web Platforms", description: "Design systems for scalable platforms.", imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg" },
-          description: "Crafting visual identities for startups.",
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",
-        },
-        {
-          title: "Web Platforms",
-          description: "Design systems for scalable platforms.",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg",
-        },
-        {
-          title: "Motion Graphics",
-          description: "High end animations and transitions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bright-curves-paper-sheets_23-2148428671.jpg",
-        },
       ]}
       title="Selected Works"
       description="A collection of design projects ranging from branding to UI/UX and motion design."
@@ -218,61 +93,21 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
       metrics={[
-        {
+        { id: "m1", value: "50+", title: "Projects", description: "Delivered successfully.", icon: CheckCircle },
-          id: "m1",
+        { id: "m2", value: "20+", title: "Brands", description: "Collaborated with global brands.", icon: Award },
-          value: "50+",
-          title: "Projects",
-          description: "Delivered successfully.",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          value: "20+",
-          title: "Brands",
-          description: "Collaborated with global brands.",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          value: "5",
-          title: "Years",
-          description: "Of industry experience.",
-          icon: Clock,
-        },
       ]}
       title="Impact by Numbers"
-      description="Measuring success through tangible project outcomes and growth metrics."
+      description="Measuring success through tangible project outcomes."
     />
   </div>
 
   <div id="testimonial" data-section="testimonial">
       <TestimonialCardFifteen
       useInvertedBackground={false}
-      testimonial="Working with this designer was a fantastic experience. The attention to detail and ability to understand our vision was truly impressive."
+      testimonial="Working with this designer was a fantastic experience."
       rating={5}
       author="Sarah Miller, Design Lead"
-      avatars={[
+      avatars={[{ src: "https://i.pravatar.cc/150?u=1", alt: "User 1" }, { src: "https://i.pravatar.cc/150?u=2", alt: "User 2" }]}
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-blonde-short-haired-woman-posing-white-shirt_23-2149021781.jpg",
-          alt: "Sarah",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/charming-young-woman-stylish-beige-dress-sits-comfortable-pose-wooden-bench-leans-h_197531-33584.jpg",
-          alt: "Colleague A",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-with-messy-bun-posing_23-2149435265.jpg",
-          alt: "Colleague B",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting_23-2149213193.jpg",
-          alt: "Colleague C",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-autumn-clothes_23-2149071320.jpg",
-          alt: "Colleague D",
-        },
-      ]}
       ratingAnimation="blur-reveal"
       avatarsAnimation="slide-up"
     />
@@ -280,94 +115,42 @@ export default function LandingPage() {
 
   <div id="socialProof" data-section="socialProof">
       <SocialProofOne
-      textboxLayout="default"
+      names={["InnovateTech", "CreativePulse", "GlobalDesign"]}
-      useInvertedBackground={true}
-      names={[
-        "InnovateTech",
-        "CreativePulse",
-        "GlobalDesign",
-        "NextGenSaaS",
-        "VisualGrowth",
-        "DesignStream",
-        "FutureWorks",
-      ]}
       title="Trusted By Industry Leaders"
-      description="I have had the pleasure of working with exceptional organizations worldwide."
+      description="Partnering with top companies to deliver excellence."
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "Do you accept new clients?", content: "Yes, I am always open to new project opportunities." }
-          id: "f1",
-          title: "Do you accept new clients?",
-          content: "Yes, I am always open to new project opportunities.",
-        },
-        {
-          id: "f2",
-          title: "What is your process?",
-          content: "I follow a design-thinking process from discovery to final delivery.",
-        },
-        {
-          id: "f3",
-          title: "Are your designs responsive?",
-          content: "Every project is mobile-first and fully responsive.",
-        },
       ]}
       sideTitle="Frequently Asked Questions"
-      sideDescription="Need more info? Let's clarify."
       faqsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
-      useInvertedBackground={true}
+      background={{ variant: "plain" }}
-      background={{
-        variant: "plain",
-      }}
       tag="Let's Talk"
       title="Let's Get Started"
       description="Ready to bring your ideas to life? Contact me to discuss your next big project."
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseCard
       logoText="Portfolio"
-      columns={[
+      columns={[{ title: "Links", items: [{ label: "About", href: "#about" }] }]}
-        {
-          title: "Links",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Projects",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "Twitter",
-              href: "#",
-            },
-            {
-              label: "LinkedIn",
-              href: "#",
-            },
-          ],
-        },
-      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #1a1a1a;
-  --card: #ffffff;
+  --card: #262626;
-  --foreground: #250c0d;
+  --foreground: #f5f5f5;
-  --primary-cta: #b82b40;
+  --primary-cta: #f97316;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #fef08a;
   --secondary-cta-text: #250c0d;
-  --accent: #b90941;
+  --accent: #f97316;
-  --background-accent: #e8a8b6;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);