Update theme colors

Merge version_3 into main

src/app/page.tsx

@@ -2,194 +2,142 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { Clock, Fish, Trash2 } from "lucide-react";
+import { Cpu, Zap, Palette, BookOpen } from "lucide-react";
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 
-export default function LandingPage() {
+export default function PortfolioPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="reveal-blur"
         borderRadius="rounded"
         contentWidth="mediumSmall"
-        sizing="large"
+        sizing="medium"
-        background="floatingGradient"
+        background="noise"
-        cardStyle="solid"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarStyleFullscreen
             navItems={[
-        {
+              { name: "Work", id: "hero" },
-          name: "Home",          id: "hero"},
+              { name: "Experience", id: "experience" },
-        {
+              { name: "About", id: "about" },
-          name: "Mission",          id: "about"},
+              { name: "Services", id: "features" },
-        {
+              { name: "Contact", id: "contact" }
-          name: "Solutions",          id: "features"},
-        {
-          name: "Get Involved",          id: "contact"},
             ]}
-      brandName="Plastique World"
+            brandName="Portfolio"
           />
         </div>
 
         <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
+          <HeroSplitDualMedia
-      background={{
+            title="Creative Digital Designer"
-        variant: "gradient-bars"}}
+            description="Crafting meaningful digital experiences that blend aesthetic beauty with functional precision. Focused on building human-centric products that make an impact."
-      title="Clean Our World, Together."
+            background={{ variant: "sparkles-gradient" }}
-      description="Every piece of plastic matters. Join the movement to raise awareness and reduce waste in our oceans and communities."
+            tag="Available for Hire"
-      buttons={[
+            rating={5}
-        {
+            ratingText="Over 50+ successful projects completed"
-          text: "Get Involved",          href: "#contact"},
+            mediaItems={[
+                { imageSrc: "https://img.b2bpic.net/free-photo/designer-working-office_23-2148494956.jpg", imageAlt: "Hero Image 1" },
+                { imageSrc: "https://img.b2bpic.net/free-photo/workspace-home-office_23-2148494956.jpg", imageAlt: "Hero Image 2" }
             ]}
-      carouselItems={[
+            buttons={[{ text: "View My Work", href: "#features" }]}
-        {
+          />
-          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/leaf-heart-with-copy-space-white-background_23-2148494956.jpg?_wi=1",          imageAlt: "Plastic impact"},
+        </div>
-        {
+
-          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/volunteering-concept-environment-protection-with-young-woman-activist_273609-37028.jpg?_wi=1",          imageAlt: "Sustainable nature"},
+        <div id="experience" data-section="experience">
-        {
+          <MetricCardFourteen
-          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/group-volunteers-collecting-trash-beach_23-2147827047.jpg?_wi=1",          imageAlt: "Community clean"},
+            title="Professional Journey"
-        {
+            tag="Timeline"
-          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-empty-waste-plastic-water-bottle-sand_23-2148214464.jpg?_wi=1",          imageAlt: "Waste reduction"},
+            metrics={[
-        {
+                { id: "2024", value: "Senior Designer", description: "Leading UX initiatives for enterprise SaaS products." },
-          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/ocean-pollution-concept-cropped-shot-busy-volunteers-pick-up-old-shoes-other-garbage-bags_273609-43687.jpg?_wi=1",          imageAlt: "Clean beach"},
+                { id: "2021", value: "UX Lead", description: "Managed design teams and scaled component libraries." },
-        {
+                { id: "2018", value: "Front-end Dev", description: "Building accessible interfaces for global clients." }
-          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/ocean-plastic-pollution-awareness-post_53876-105253.jpg",          imageAlt: "Wildlife protection"},
             ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="about" data-section="about">
-      <MediaAbout
+          <TextSplitAbout
-      useInvertedBackground={true}
+            title="My Philosophy"
-      title="Our Mission"
+            description={["I believe that great design is not just about aesthetics, but about solving problems for the user. My approach combines research, creative exploration, and technical execution to deliver solutions that resonate.", "With a background in both front-end engineering and UI/UX design, I bridge the gap between creative vision and implementation excellence."]}
-      description="Plastic World is a dedicated platform to expose the truth about plastic pollution. We empower individuals to make sustainable choices and advocate for meaningful environmental change."
+            useInvertedBackground={false}
-      imageSrc="http://img.b2bpic.net/free-photo/decorative-background-with-leaf-word-love_23-2147608755.jpg"
-      imageAlt="Our Mission"
           />
         </div>
 
         <div id="problems" data-section="problems">
-      <MetricCardOne
+          <MetricCardThree
+            title="What I Bring"
+            description="Core competencies for digital excellence."
+            metrics={[
+              { id: "1", icon: Cpu, title: "Web Development", value: "Modern" },
+              { id: "2", icon: Zap, title: "Performance Optimization", value: "Speed" },
+              { id: "3", icon: Palette, title: "UX Design", value: "Clean" },
+              { id: "4", icon: BookOpen, title: "Technical Writing", value: "Clear" }
+            ]}
             animationType="slide-up"
             textboxLayout="split"
-      gridVariant="bento-grid"
             useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          value: "8M",          title: "Tons per year",          description: "Plastic entering our oceans annually.",          icon: Trash2,
-        },
-        {
-          id: "m2",          value: "500",          title: "Years",          description: "Time plastic takes to decompose.",          icon: Clock,
-        },
-        {
-          id: "m3",          value: "100K",          title: "Marine lives",          description: "Lost to plastic waste every year.",          icon: Fish,
-        },
-      ]}
-      title="The Reality of Waste"
-      description="The numbers don't lie. Plastic is devastating our ecosystems at an alarming rate."
           />
         </div>
 
         <div id="features" data-section="features">
-      <FeatureCardNine
+          <FeatureCardSix
-      animationType="slide-up"
+            title="Featured Projects"
-      textboxLayout="default"
+            description="A selection of projects where design meets code to solve real-world problems."
-      useInvertedBackground={true}
+            textboxLayout="split"
             features={[
-        {
+              { title: "SaaS Dashboard", description: "High-performance interface for financial analytics.", imageSrc: "https://img.b2bpic.net/free-photo/dashboard-ui-concept_23-2148814057.jpg" },
-          title: "Switch to Reusables",          description: "Replace single-use bottles and bags with durable alternatives.",          phoneOne: {
+              { title: "Mobile Design System", description: "Unified component library for scalable apps.", imageSrc: "https://img.b2bpic.net/free-photo/mobile-app-ui_23-2148814057.jpg" }
-            imageSrc: "http://img.b2bpic.net/free-photo/net-string-bag-environmental-friendly-essential_53876-128873.jpg",            imageAlt: "Reusables"},
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/copy-space-bag-with-leaf_23-2148576698.jpg",            imageAlt: "Reusables"}
-        },
-        {
-          title: "Community Cleanups",          description: "Join local efforts to remove waste from parks and beaches.",          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/close-up-girls-putting-hands-together_23-2149332152.jpg",            imageAlt: "Cleanup"},
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947469.jpg",            imageAlt: "Cleanup"}
-        },
-        {
-          title: "Proper Recycling",          description: "Educate yourself on what can actually be recycled in your area.",          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/compost-still-life-concept_23-2149068966.jpg",            imageAlt: "Recycle"},
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/recycling-glass-bottle_23-2152005811.jpg",            imageAlt: "Recycle"}
-        },
             ]}
-      showStepNumbers={true}
+            useInvertedBackground={false}
-      title="Practical Solutions"
-      description="Small actions lead to massive change. Start with these simple daily habits."
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
+          <TestimonialCardFifteen
-      textboxLayout="split"
+            testimonial="Their work truly transformed our online presence. Professional, creative, and always delivered ahead of schedule. Highly recommended for any product team."
+            author="Jane Doe, CEO at TechInnovate"
+            rating={5}
+            ratingAnimation="slide-up"
+            avatarsAnimation="opacity"
+            avatars={[{ src: "https://img.b2bpic.net/free-photo/happy-woman_23-2148814057.jpg", alt: "Client" }, { src: "https://img.b2bpic.net/free-photo/professional-man_23-2148814057.jpg", alt: "Partner" }]
+            }
             useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",          name: "Alice Green",          date: "Oct 2024",          title: "Volunteer",          quote: "I feel empowered knowing I'm making a difference.",          tag: "Active",          avatarSrc: "http://img.b2bpic.net/free-photo/smiley-man-holding-pot-with-small-tree_23-2148814057.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/leaf-heart-with-copy-space-white-background_23-2148494956.jpg?_wi=2",          imageAlt: "happy community volunteer nature"},
-        {
-          id: "2",          name: "Mark Rivers",          date: "Sep 2024",          title: "Advocate",          quote: "Plastic World opened my eyes to real sustainability.",          tag: "Advocate",          avatarSrc: "http://img.b2bpic.net/free-photo/woman-dress-with-pruner_1398-5270.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/volunteering-concept-environment-protection-with-young-woman-activist_273609-37028.jpg?_wi=2",          imageAlt: "happy community volunteer nature"},
-        {
-          id: "3",          name: "Elena Smith",          date: "Aug 2024",          title: "Member",          quote: "The resources here are just incredibly practical.",          tag: "Learner",          avatarSrc: "http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950168.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/group-volunteers-collecting-trash-beach_23-2147827047.jpg?_wi=2",          imageAlt: "happy community volunteer nature"},
-        {
-          id: "4",          name: "James Bond",          date: "Jul 2024",          title: "Leader",          quote: "Together, we are actually cleaning our oceans.",          tag: "Expert",          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-young-male-gardener-wearing-gardening-hat-holding-flower-flowerpot-isolated-green-wall_141793-83074.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-empty-waste-plastic-water-bottle-sand_23-2148214464.jpg?_wi=2",          imageAlt: "happy community volunteer nature"},
-        {
-          id: "5",          name: "Sarah Bell",          date: "Jun 2024",          title: "Student",          quote: "My school project was inspired by these guides.",          tag: "Student",          avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-kid-nature_23-2148895601.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/ocean-pollution-concept-cropped-shot-busy-volunteers-pick-up-old-shoes-other-garbage-bags_273609-43687.jpg?_wi=2",          imageAlt: "happy community volunteer nature"},
-      ]}
-      title="Voices for Change"
-      description="Hear from the community members taking action every single day."
           />
         </div>
 
         <div id="contact" data-section="contact">
-      <ContactSplit
+          <ContactCTA
-      useInvertedBackground={true}
+            tag="Get In Touch"
-      background={{
+            title="Portfolio Inquiries"
-        variant: "plain"}}
+            description="Interested in collaborating or have a question about my work? I'm always open to discussing new projects and creative opportunities."
-      tag="Get Involved"
+            buttons={[{ text: "Send an Email", href: "mailto:hello@portfolio.com" }, { text: "LinkedIn", href: "https://linkedin.com/in/me" }]}
-      title="Join Our Community"
+            background={{ variant: "plain" }}
-      description="Sign up for updates and find out how you can contribute to local plastic reduction initiatives."
+            useInvertedBackground={false}
-      imageSrc="http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950177.jpg"
-      imageAlt="Contact us"
-      mediaAnimation="slide-up"
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterBaseCard
-      logoText="Plastique World"
+            logoText="Portfolio"
             columns={[
-        {
+                { title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Projects", href: "#features" }, { label: "Contact", href: "#contact" }] },
-          title: "Navigation",          items: [
+                { title: "Connect", items: [{ label: "LinkedIn", href: "https://linkedin.com" }, { label: "Email", href: "mailto:hello@portfolio.com" }] }
-            {
-              label: "About Us",              href: "#about"},
-            {
-              label: "Solutions",              href: "#features"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy Policy",              href: "#"},
-            {
-              label: "Terms of Use",              href: "#"},
-          ],
-        },
             ]}
           />
         </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #f9f9f9;
-  --foreground: #1c1c1c;
+  --foreground: #000612e6;
-  --primary-cta: #1c1c1c;
+  --primary-cta: #15479c;
-  --primary-cta-text: #f5f5f5;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #1c1c1c;
+  --secondary-cta-text: #000612e6;
-  --accent: #159c49;
+  --accent: #e2e2e2;
-  --background-accent: #a8e8ba;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);