Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -1,69 +1,63 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import HeroSignup from "@/components/sections/hero/HeroSignup";
+import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
-import SplitAbout from "@/components/sections/about/SplitAbout";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
+import TeamCardSix from "@/components/sections/team/TeamCardSix";
 import { Github, Linkedin, Mail, Sparkles, Code, Globe } from "lucide-react";
 
 export default function AchMadzPortfolio() {
     return (
         <ThemeProvider
-            defaultButtonVariant="hover-magnetic"
+            defaultButtonVariant="elastic-effect"
             defaultTextAnimation="reveal-blur"
-            borderRadius="pill"
+            borderRadius="soft"
             contentWidth="medium"
-            sizing="medium"
+            sizing="largeSizeMediumTitles"
-            background="fluid"
+            background="noiseDiagonalGradient"
             cardStyle="glass-elevated"
-            primaryButtonStyle="gradient"
+            primaryButtonStyle="radial-glow"
             secondaryButtonStyle="glass"
             headingFontWeight="semibold"
         >
             <div id="hero">
-                <HeroSignup
+                <HeroCarouselLogo
-                    tag="Software Engineer & Creator"
+                    logoText="Ach Madz"
-                    tagIcon={Sparkles}
+                    description="High-end digital craftsmanship for premium web experiences. Architecting performant, visually stunning solutions that set the standard for digital excellence."
-                    title="Ach Madz: Building Digital Excellence"
+                    buttons={[{ text: "Work With Me", href: "#contact" }]}
-                    description="I am a passionate software engineer focused on crafting clean, modern, and performant web experiences. I love turning complex ideas into elegant, user-friendly solutions."
+                    slides={[
-                    background={{ variant: "glowing-orb" }}
+                        { imageSrc: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000" },
-                    buttonText="Get in Touch"
+                        { imageSrc: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=2000" }
+                    ]}
+                    autoplayDelay={5000}
+                    showDimOverlay={true}
                 />
             </div>
 
             <div id="about">
-                <SplitAbout
+                <TextSplitAbout
-                    title="More about my journey"
+                    title="Engineering Digital Mastery"
-                    description="With years of experience in full-stack development, I focus on building scalable web applications. My approach combines aesthetic design with robust engineering to deliver lasting impact."
+                    description={[
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CqQjwbrkg4MwzJUItUsihWdcBc/uploaded-1777111132044-0c8dl9zt.png"
+                        "With a meticulous approach to frontend architecture, I bridge the gap between complex engineering and refined aesthetics.",                        "My focus is exclusively on high-performance delivery, ensuring every pixel and interaction serves a strategic purpose in creating premium web ecosystems."
-                    imageAlt="Ach Madz"
-                    imagePosition="left"
-                    textboxLayout="default"
-                    useInvertedBackground={false}
-                    bulletPoints={[
-                        { title: "Frontend Architecture", description: "Building reactive and fluid interfaces using modern frameworks.", icon: Code },
-                        { title: "Performance Optimization", description: "Ensuring fast load times and seamless user journeys.", icon: Globe },
-                        { title: "Innovation & Strategy", description: "Designing thoughtful solutions to solve real-world problems.", icon: Sparkles }
                     ]}
+                    useInvertedBackground={true}
+                    buttons={[{ text: "Learn More" }]}
                 />
             </div>
 
             <div id="team">
-                <TeamCardTwo
+                <TeamCardSix
-                    title="My Professional Focus"
+                    title="Technical Expertise"
-                    description="Always exploring new frontiers in technology and design."
+                    description="Deploying world-class technical solutions for ambitious projects."
-                    gridVariant="uniform-all-items-equal"
+                    gridVariant="one-large-left-three-stacked-right"
-                    animationType="slide-up"
+                    animationType="depth-3d"
-                    textboxLayout="default"
+                    textboxLayout="split"
                     useInvertedBackground={false}
                     members={[
-                        {
+                        { id: "1", name: "Ach Madz", role: "Lead Software Engineer" },
-                            id: "1",                            name: "Ach Madz",                            role: "Full Stack Engineer",                            description: "Passionate about creating modern digital ecosystems.",                            socialLinks: [
+                        { id: "2", name: "Architecture", role: "Frontend Excellence" },
-                                { icon: Github, url: "#" },
+                        { id: "3", name: "Innovation", role: "Strategic Design" },
-                                { icon: Linkedin, url: "#" },
+                        { id: "4", name: "Performance", role: "Scalable Systems" }
-                                { icon: Mail, url: "#" }
-                            ]
-                        }
                     ]}
                 />
             </div>

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #0a0a0a;
-  --card: #1a1a1a;
+  --card: #121212;
-  --foreground: #ffffffe6;
+  --foreground: #f5f5f5;
-  --primary-cta: #e6e6e6;
+  --primary-cta: #ffffff;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #1f1f1f;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
+  --accent: #3b82f6;
-  --background-accent: #737373;
+  --background-accent: #171717;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);