Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -10,6 +10,7 @@ import TeamCardTen from '@/components/sections/team/TeamCardTen';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import DotGridBackground from '@/components/background/DotGridBackground';
 import { Sparkles } from 'lucide-react';
 
 export default function LandingPage() {
@@ -26,7 +27,7 @@ export default function LandingPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" className="sticky top-0 z-50 backdrop-blur-lg bg-black/50 dark:bg-black/70 border-b border-white/10 dark:border-white/5">
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "hero" },
@@ -67,164 +68,182 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="work" data-section="work">
-        <ProductCardFour
-          title="Featured Work"
-          description="Explore our latest portfolio of high-impact web design projects that showcase our commitment to excellence and innovation."
-          tag="Case Studies"
-          products={[
-            {
-              id: "1",              name: "E-Commerce Platform Redesign",              price: "2024",              variant: "B2C Luxury Retail",              imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-sales-landing-page-template_23-2148826283.jpg",              imageAlt: "E-commerce platform design"
-            },
-            {
-              id: "2",              name: "SaaS Dashboard Overhaul",              price: "2024",              variant: "Enterprise Software",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-landing-page-template-with-illustrations_23-2148264774.jpg",              imageAlt: "SaaS dashboard interface"
-            },
-            {
-              id: "3",              name: "Creative Agency Website",              price: "2023",              variant: "Brand & Portfolio",              imageSrc: "http://img.b2bpic.net/free-psd/creating-websites-landing-page-template_23-2148772426.jpg",              imageAlt: "Creative agency portfolio"
-            }
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
+      <div id="work" data-section="work" className="relative">
+        <DotGridBackground size="medium" perspectiveThreeD={false} className="absolute inset-0 opacity-20" />
+        <div className="relative z-10">
+          <ProductCardFour
+            title="Featured Work"
+            description="Explore our latest portfolio of high-impact web design projects that showcase our commitment to excellence and innovation."
+            tag="Case Studies"
+            products={[
+              {
+                id: "1",                name: "E-Commerce Platform Redesign",                price: "2024",                variant: "B2C Luxury Retail",                imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-sales-landing-page-template_23-2148826283.jpg",                imageAlt: "E-commerce platform design"
+              },
+              {
+                id: "2",                name: "SaaS Dashboard Overhaul",                price: "2024",                variant: "Enterprise Software",                imageSrc: "http://img.b2bpic.net/free-vector/gradient-landing-page-template-with-illustrations_23-2148264774.jpg",                imageAlt: "SaaS dashboard interface"
+              },
+              {
+                id: "3",                name: "Creative Agency Website",                price: "2023",                variant: "Brand & Portfolio",                imageSrc: "http://img.b2bpic.net/free-psd/creating-websites-landing-page-template_23-2148772426.jpg",                imageAlt: "Creative agency portfolio"
+              }
+            ]}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
       </div>
 
-      <div id="services" data-section="services">
-        <FeatureCardSixteen
-          title="What Sets Us Apart"
-          description="We combine strategic thinking with pixel-perfect execution to deliver websites that don't just look beautiful—they perform."
-          tag="Our Approach"
-          negativeCard={{
-            items: [
-              "Generic templates",              "Slow load times",              "Poor user experience",              "No conversion focus"
-            ]
-          }}
-          positiveCard={{
-            items: [
-              "Custom-built solutions",              "Lightning-fast performance",              "Intuitive interactions",              "Conversion-optimized design"
-            ]
-          }}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="process" data-section="process">
-        <TeamCardTen
-          title="Our proven design process transforms your vision into digital reality through strategic planning, creative execution, and continuous optimization."
-          tag="Process"
-          members={[
-            {
-              id: "1",              name: "Strategy & Discovery",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional business headshot portrait"
-            },
-            {
-              id: "2",              name: "Design & Prototyping",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg",              imageAlt: "marketing director professional headshot"
-            },
-            {
-              id: "3",              name: "Development & Testing",              imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg",              imageAlt: "tech startup founder portrait"
-            },
-            {
-              id: "4",              name: "Launch & Optimize",              imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-11786.jpg",              imageAlt: "product manager professional headshot"
-            }
-          ]}
-          memberVariant="default"
-          useInvertedBackground={false}
-          membersAnimation="slide-up"
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSixteen
-          title="What Our Clients Say"
-          description="Real feedback from brands we've partnered with to transform their digital presence."
-          tag="Testimonials"
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Chen",              role: "CEO",              company: "Luxe Retail Co",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional business headshot portrait"
-            },
-            {
-              id: "2",              name: "Marcus Johnson",              role: "Founder",              company: "CloudSync Analytics",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg",              imageAlt: "marketing director professional headshot"
-            },
-            {
-              id: "3",              name: "Emily Rodriguez",              role: "Marketing Director",              company: "GrowthStudio Agency",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg",              imageAlt: "tech startup founder portrait"
-            },
-            {
-              id: "4",              name: "David Park",              role: "Product Lead",              company: "InnovateTech Ventures",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-11786.jpg",              imageAlt: "product manager professional headshot"
-            }
-          ]}
-          kpiItems={[
-            { value: "150+", label: "Projects Delivered" },
-            { value: "98%", label: "Client Satisfaction" },
-            { value: "8+", label: "Years Excellence" }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="contact" data-section="contact">
-        <ContactFaq
-          ctaTitle="Ready to Transform Your Web Presence?"
-          ctaDescription="Let's connect and discuss how Oasis can bring your vision to life with beautiful, high-performing design."
-          ctaButton={{ text: "Start Your Project", href: "mailto:massimomolin10@gmail.com" }}
-          ctaIcon={Sparkles}
-          faqs={[
-            {
-              id: "1",              title: "What's your typical project timeline?",              content: "Most projects take 8-12 weeks from discovery to launch, depending on scope and complexity. We work in collaborative sprints to ensure quality and your involvement throughout."
-            },
-            {
-              id: "2",              title: "Do you offer post-launch support?",              content: "Absolutely. We provide 30 days of complimentary support after launch, plus optional ongoing maintenance and optimization packages to keep your site performing at its best."
-            },
-            {
-              id: "3",              title: "What's included in your design package?",              content: "Our packages include strategy, wireframing, visual design, responsive prototyping, development, testing, and deployment. Exact deliverables vary based on project scope."
-            },
-            {
-              id: "4",              title: "How do you approach mobile responsiveness?",              content: "We design mobile-first, ensuring your website looks and functions beautifully on all devices. Every interaction and layout is optimized for the user's context."
-            }
-          ]}
-          useInvertedBackground={false}
-          animationType="slide-up"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={[
-            {
-              title: "Navigate",              items: [
-                { label: "Home", href: "#hero" },
-                { label: "About", href: "#about" },
-                { label: "Services", href: "#services" },
-                { label: "Work", href: "#work" }
+      <div id="services" data-section="services" className="relative">
+        <DotGridBackground size="medium" perspectiveThreeD={false} className="absolute inset-0 opacity-15" />
+        <div className="relative z-10">
+          <FeatureCardSixteen
+            title="What Sets Us Apart"
+            description="We combine strategic thinking with pixel-perfect execution to deliver websites that don't just look beautiful—they perform."
+            tag="Our Approach"
+            negativeCard={{
+              items: [
+                "Generic templates",                "Slow load times",                "Poor user experience",                "No conversion focus"
               ]
-            },
-            {
-              title: "Resources",              items: [
-                { label: "Case Studies", href: "#work" },
-                { label: "Process", href: "#process" },
-                { label: "Testimonials", href: "#testimonials" },
-                { label: "Contact", href: "#contact" }
+            }}
+            positiveCard={{
+              items: [
+                "Custom-built solutions",                "Lightning-fast performance",                "Intuitive interactions",                "Conversion-optimized design"
               ]
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Email", href: "mailto:massimomolin10@gmail.com" },
-                { label: "LinkedIn", href: "https://linkedin.com" },
-                { label: "Instagram", href: "https://instagram.com" },
-                { label: "Twitter", href: "https://twitter.com" }
-              ]
-            }
-          ]}
-          bottomLeftText="© 2025 Oasis Design Agency. All rights reserved."
-          bottomRightText="Crafted with precision and passion"
-        />
+            }}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+      </div>
+
+      <div id="process" data-section="process" className="relative">
+        <DotGridBackground size="medium" perspectiveThreeD={false} className="absolute inset-0 opacity-20" />
+        <div className="relative z-10">
+          <TeamCardTen
+            title="Our proven design process transforms your vision into digital reality through strategic planning, creative execution, and continuous optimization."
+            tag="Process"
+            members={[
+              {
+                id: "1",                name: "Strategy & Discovery",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",                imageAlt: "professional business headshot portrait"
+              },
+              {
+                id: "2",                name: "Design & Prototyping",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg?_wi=1",                imageAlt: "marketing director professional headshot"
+              },
+              {
+                id: "3",                name: "Development & Testing",                imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg?_wi=1",                imageAlt: "tech startup founder portrait"
+              },
+              {
+                id: "4",                name: "Launch & Optimize",                imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-11786.jpg?_wi=1",                imageAlt: "product manager professional headshot"
+              }
+            ]}
+            memberVariant="default"
+            useInvertedBackground={false}
+            membersAnimation="slide-up"
+          />
+        </div>
+      </div>
+
+      <div id="testimonials" data-section="testimonials" className="relative">
+        <DotGridBackground size="medium" perspectiveThreeD={false} className="absolute inset-0 opacity-15" />
+        <div className="relative z-10">
+          <TestimonialCardSixteen
+            title="What Our Clients Say"
+            description="Real feedback from brands we've partnered with to transform their digital presence."
+            tag="Testimonials"
+            testimonials={[
+              {
+                id: "1",                name: "Sarah Chen",                role: "CEO",                company: "Luxe Retail Co",                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",                imageAlt: "professional business headshot portrait"
+              },
+              {
+                id: "2",                name: "Marcus Johnson",                role: "Founder",                company: "CloudSync Analytics",                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg?_wi=2",                imageAlt: "marketing director professional headshot"
+              },
+              {
+                id: "3",                name: "Emily Rodriguez",                role: "Marketing Director",                company: "GrowthStudio Agency",                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg?_wi=2",                imageAlt: "tech startup founder portrait"
+              },
+              {
+                id: "4",                name: "David Park",                role: "Product Lead",                company: "InnovateTech Ventures",                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-11786.jpg?_wi=2",                imageAlt: "product manager professional headshot"
+              }
+            ]}
+            kpiItems={[
+              { value: "150+", label: "Projects Delivered" },
+              { value: "98%", label: "Client Satisfaction" },
+              { value: "8+", label: "Years Excellence" }
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+      </div>
+
+      <div id="contact" data-section="contact" className="relative">
+        <DotGridBackground size="medium" perspectiveThreeD={false} className="absolute inset-0 opacity-20" />
+        <div className="relative z-10">
+          <ContactFaq
+            ctaTitle="Ready to Transform Your Web Presence?"
+            ctaDescription="Let's connect and discuss how Oasis can bring your vision to life with beautiful, high-performing design."
+            ctaButton={{ text: "Start Your Project", href: "mailto:massimomolin10@gmail.com" }}
+            ctaIcon={Sparkles}
+            faqs={[
+              {
+                id: "1",                title: "What's your typical project timeline?",                content: "Most projects take 8-12 weeks from discovery to launch, depending on scope and complexity. We work in collaborative sprints to ensure quality and your involvement throughout."
+              },
+              {
+                id: "2",                title: "Do you offer post-launch support?",                content: "Absolutely. We provide 30 days of complimentary support after launch, plus optional ongoing maintenance and optimization packages to keep your site performing at its best."
+              },
+              {
+                id: "3",                title: "What's included in your design package?",                content: "Our packages include strategy, wireframing, visual design, responsive prototyping, development, testing, and deployment. Exact deliverables vary based on project scope."
+              },
+              {
+                id: "4",                title: "How do you approach mobile responsiveness?",                content: "We design mobile-first, ensuring your website looks and functions beautifully on all devices. Every interaction and layout is optimized for the user's context."
+              }
+            ]}
+            useInvertedBackground={false}
+            animationType="slide-up"
+          />
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer" className="relative">
+        <DotGridBackground size="medium" perspectiveThreeD={false} className="absolute inset-0 opacity-10" />
+        <div className="relative z-10">
+          <FooterSimple
+            columns={[
+              {
+                title: "Navigate",                items: [
+                  { label: "Home", href: "#hero" },
+                  { label: "About", href: "#about" },
+                  { label: "Services", href: "#services" },
+                  { label: "Work", href: "#work" }
+                ]
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Case Studies", href: "#work" },
+                  { label: "Process", href: "#process" },
+                  { label: "Testimonials", href: "#testimonials" },
+                  { label: "Contact", href: "#contact" }
+                ]
+              },
+              {
+                title: "Connect",                items: [
+                  { label: "Email", href: "mailto:massimomolin10@gmail.com" },
+                  { label: "LinkedIn", href: "https://linkedin.com" },
+                  { label: "Instagram", href: "https://instagram.com" },
+                  { label: "Twitter", href: "https://twitter.com" }
+                ]
+              }
+            ]}
+            bottomLeftText="© 2025 Oasis Design Agency. All rights reserved."
+            bottomRightText="Crafted with precision and passion"
+          />
+        </div>
       </div>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #120a00e6;
-  --primary-cta: #FF7B05;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #120a00e6;
+  --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;
-  --background-accent: #FF7B05;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);