Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -1,65 +1,66 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
-import { Code, Users, Globe, MessageCircle, Sparkles } from "lucide-react";
-
-export default function PersonalGridTemplatePage() {
-    const titleSegments = [
-        { type: "text" as const, content: "I help founders" },
-        { type: "image" as const, src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/personal-grid/grid1.webp", alt: "Damien Ghader" },
-        { type: "text" as const, content: "build products" },
-        { type: "image" as const, src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/personal-grid/grid2.webp", alt: "" },
-        { type: "text" as const, content: "with AI" },
-    ];
-
-    const socialLinks = [
-        { icon: Globe, label: "damienghader", href: "https://twitter.com" },
-        { icon: MessageCircle, label: "damienghader", href: "https://instagram.com" },
-        { icon: Sparkles, label: "damienghader", href: "https://linkedin.com" },
-    ];
-
-    const linkCards = [
-        {
-            icon: Code,
-            title: "Work with my agency",
-            description: "Work with my agency to build your MVP",
-            button: { text: "Get started", href: "#" },
-        },
-        {
-            icon: Sparkles,
-            title: "20% off your Webild plan",
-            description: "Use my promo code to get Webild credits",
-            button: { text: "Get credits", href: "#" },
-        },
-        {
-            icon: Users,
-            title: "Join my community",
-            description: "Join the AI Founders Club",
-            button: { text: "Sign up", href: "#" },
-        },
-    ];
+import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import TeamCardSix from "@/components/sections/team/TeamCardSix";
+import { Github, Linkedin, Mail, Sparkles, Code, Globe } from "lucide-react";
 
+export default function AchMadzPortfolio() {
     return (
         <ThemeProvider
-            defaultButtonVariant="text-stagger"
-            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="soft"
             contentWidth="medium"
-            sizing="medium"
-            background="none"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="flat"
-            secondaryButtonStyle="solid"
-            headingFontWeight="medium"
+            sizing="largeSizeMediumTitles"
+            background="noiseDiagonalGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="radial-glow"
+            secondaryButtonStyle="glass"
+            headingFontWeight="semibold"
         >
-            <HeroPersonalLinks
-                background={{ variant: "downward-rays-animated-grid" }}
-                title="I help people design software with AI"
-                titleSegments={titleSegments}
-                socialLinks={socialLinks}
-                linkCards={linkCards}
-            />
+            <div id="hero">
+                <HeroCarouselLogo
+                    logoText="Ach Madz"
+                    description="High-end digital craftsmanship for premium web experiences. Architecting performant, visually stunning solutions that set the standard for digital excellence."
+                    buttons={[{ text: "Work With Me", href: "#contact" }]}
+                    slides={[
+                        { imageSrc: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000" },
+                        { imageSrc: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=2000" }
+                    ]}
+                    autoplayDelay={5000}
+                    showDimOverlay={true}
+                />
+            </div>
+
+            <div id="about">
+                <TextSplitAbout
+                    title="Engineering Digital Mastery"
+                    description={[
+                        "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."
+                    ]}
+                    useInvertedBackground={true}
+                    buttons={[{ text: "Learn More" }]}
+                />
+            </div>
+
+            <div id="team">
+                <TeamCardSix
+                    title="Technical Expertise"
+                    description="Deploying world-class technical solutions for ambitious projects."
+                    gridVariant="one-large-left-three-stacked-right"
+                    animationType="depth-3d"
+                    textboxLayout="split"
+                    useInvertedBackground={false}
+                    members={[
+                        { id: "1", name: "Ach Madz", role: "Lead Software Engineer" },
+                        { id: "2", name: "Architecture", role: "Frontend Excellence" },
+                        { id: "3", name: "Innovation", role: "Strategic Design" },
+                        { id: "4", name: "Performance", role: "Scalable Systems" }
+                    ]}
+                />
+            </div>
         </ThemeProvider>
     );
-}
+}

src/app/styles/variables.css

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