Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { motion } from "framer-motion";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
@@ -21,11 +22,11 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumSizeLargeTitles"
-        background="fluid"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="light"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
         <div className="[&>div]:sticky [&>div]:top-0 [&>div]:h-screen [&>div]:overflow-hidden">
@@ -37,26 +38,33 @@ export default function LandingPage() {
                 { name: "Services", id: "#services" },
                 { name: "Contact", id: "#contact" },
               ]}
-              brandName="Portfolio"
+              brandName="PORTFOLIO"
             />
           </div>
 
-          <div id="hero" data-section="hero">
+          <motion.div 
+            id="hero" 
+            data-section="hero"
+            initial={{ opacity: 0, y: 100 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+          >
             <HeroCarouselLogo
               logoText="PORTFOLIO"
               description="Scroll through layered projects that unfold in real time. Experience design that transcends static display."
               buttons={[{ text: "Explore My Work", href: "#work" }]}
               slides={[
-                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1", imageAlt: "Abstract red shapes 1" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1", imageAlt: "Abstract white shapes 1" },
                 { imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=1", imageAlt: "Architecture patterns" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg", imageAlt: "Liquid red lines" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg", imageAlt: "Red sculpture" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg", imageAlt: "Abstract red grid" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg", imageAlt: "Liquid lines" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg", imageAlt: "Sculpture" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg", imageAlt: "Abstract grid" },
                 { imageSrc: "http://img.b2bpic.net/free-photo/medical-syringe-symbol-vaccination-stop-coronavirus-concept-red-background_559531-10291.jpg", imageAlt: "Typography art" },
               ]}
               autoplayDelay={4000}
             />
-          </div>
+          </motion.div>
 
           <div id="about" data-section="about">
             <SplitAbout
@@ -101,9 +109,6 @@ export default function LandingPage() {
                 { id: "p1", name: "UI Dashboard", price: "UX Case Study", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg" },
                 { id: "p2", name: "Branding Suite", price: "Graphic Design", variant: "Print", imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543017.jpg" },
                 { id: "p3", name: "App Concept", price: "Product Design", variant: "Mobile", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg" },
-                { id: "p4", name: "Gallery Poster", price: "Design System", variant: "Art", imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093376.jpg" },
-                { id: "p5", name: "Digital Tool", price: "Tech Innovation", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-modern-spiral-staircase-lights_181624-26451.jpg" },
-                { id: "p6", name: "Multimedia Installation", price: "Art Direction", variant: "Mixed", imageSrc: "http://img.b2bpic.net/free-photo/rectangular-scroll-ribbon-logo-label_53876-13825.jpg" },
               ]}
               title="Featured Projects"
               description="A selection of creative work focused on high visual impact."
@@ -135,9 +140,6 @@ export default function LandingPage() {
               avatars={[
                 { src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg", alt: "Client 1" },
                 { src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Client 2" },
-                { src: "http://img.b2bpic.net/free-photo/portrait-serious-young-businessman-glasses_1262-3810.jpg", alt: "Client 3" },
-                { src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg", alt: "Client 4" },
-                { src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg", alt: "Client 5" },
               ]}
               ratingAnimation="slide-up"
               avatarsAnimation="blur-reveal"
@@ -150,7 +152,6 @@ export default function LandingPage() {
               faqs={[
                 { id: "q1", title: "Available for freelance?", content: "Yes, I am currently accepting new projects." },
                 { id: "q2", title: "How do you work?", content: "I start with deep discovery before prototyping." },
-                { id: "q3", title: "Do you offer maintenance?", content: "I provide ongoing support for all my projects." },
               ]}
               sideTitle="Common Questions"
               faqsAnimation="slide-up"
@@ -160,7 +161,7 @@ export default function LandingPage() {
           <div id="contact" data-section="contact">
             <ContactSplit
               useInvertedBackground={false}
-              background={{ variant: "animated-grid" }}
+              background={{ variant: "plain" }}
               tag="Let's Talk"
               title="Ready to build something together?"
               description="Let's push the boundaries of digital experience. Send me a message and we'll start the conversation."
@@ -174,7 +175,6 @@ export default function LandingPage() {
               columns={[
                 { items: [{ label: "Work", href: "#work" }, { label: "About", href: "#about" }] },
                 { items: [{ label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
-                { items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }] },
               ]}
               logoText="PORTFOLIO"
             />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000000;
   --primary-cta: #e63946;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
   --accent: #e63946;
-  --background-accent: #5e1919;
+  --background-accent: #f9f9f9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);