Update src/app/services/page.tsx

Merge version_1 into main

src/app/contact/page.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
+import { Linkedin, Facebook, Instagram, Youtube } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="SEFAMAR"
+          navItems={[
+            { name: "Home", id: "#hero" },
+            { name: "About Us", id: "#about" },
+            { name: "Solutions", id: "#solutions" },
+            { name: "Why Sefamar", id: "#why-us" },
+            { name: "Brands", id: "#brands" },
+            { name: "Performance", id: "#performance" },
+            { name: "Services", id: "#services" },
+            { name: "Testimonials", id: "#testimonials" },
+            { name: "Projects", id: "/projects" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Request a Quote",            href: "/contact"
+          }}
+        />
+      </div>
+
+      <div id="contact-us" data-section="contact-us">
+        <ContactSplitForm
+          title="Get In Touch with Sefamar"
+          description={`We're here to help you with your heavy transport, industrial equipment, and fleet solution needs. Reach out via the form, or use our direct contact information below.\n\n**Address:** 123 Industrial Zone, Casablanca, Morocco\n**Phone:** +212 522 123456\n**Email:** info@sefamar.ma\n**Business Hours:** Mon-Fri: 9:00 AM - 5:00 PM\n\nFor urgent inquiries, please use the WhatsApp button below.`}
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            { name: "company", type: "text", placeholder: "Company Name", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number (Optional)" },
+            { name: "email", type: "email", placeholder: "Work Email", required: true }
+          ]}
+          multiSelect={{
+            name: "industry",            label: "Industry",            options: ["Construction", "Logistics", "Mining", "Agriculture", "Manufacturing", "Public Sector", "Other"]
+          }}
+          textarea={{
+            name: "message",            placeholder: "Your Message",            rows: 4,
+            required: true
+          }}
+          useInvertedBackground={true}
+          imageSrc="http://img.b2bpic.net/free-photo/google-maps-navigation-car-traveling-city-road_1163-5591.jpg" 
+          imageAlt="Google Map location of Sefamar office"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Send Your Message"
+          ariaLabel="Sefamar Contact Page"
+        />
+        <div className="container mx-auto px-4 py-8 text-center">
+          <ButtonDirectionalHover
+            text="Chat on WhatsApp"
+            href="https://wa.me/212522123456"
+            ariaLabel="Chat with Sefamar on WhatsApp"
+            className="mt-4"
+          />
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="SEFAMAR"
+          copyrightText="© 2024 Sefamar. All rights reserved."
+          socialLinks={[
+            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+            { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            { icon: Youtube, href: "#", ariaLabel: "YouTube" }
+          ]}
+          ariaLabel="Sefamar Site Footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -11,6 +11,7 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterCard from '@/components/sections/footer/FooterCard';
+import ContactForm from '@/components/form/ContactForm';
 import { Truck, Settings, Wrench, MapPin, HardHat, Award, ShieldCheck, Globe, Users, ClipboardCheck, Zap, Linkedin, Facebook, Instagram, Youtube } from "lucide-react";
 
 export default function LandingPage() {
@@ -39,6 +40,7 @@ export default function LandingPage() {
             { name: "Performance", id: "#performance" },
             { name: "Services", id: "#services" },
             { name: "Testimonials", id: "#testimonials" },
+            { name: "Newsletter", id: "#newsletter" },
             { name: "Contact", id: "#contact" }
           ]}
           button={{
@@ -94,7 +96,7 @@ export default function LandingPage() {
             { icon: MapPin, title: "Fleet Management", description: "Advanced systems for tracking, optimization, and complete operational control." },
             { icon: HardHat, title: "Industrial Equipment", description: "High-performance machinery and tools for every industrial need." }
           ]}
-          animationType="scale-rotate"
+          animationType="blur-reveal"
           textboxLayout="default"
           useInvertedBackground={true}
           ariaLabel="Sefamar Business Divisions"
@@ -113,7 +115,7 @@ export default function LandingPage() {
             { icon: ClipboardCheck, title: "Genuine Parts", description: "Guaranteed OEM quality for optimal performance and durability." },
             { icon: Zap, title: "Fast Service", description: "Rapid response and efficient service to minimize your downtime." }
           ]}
-          animationType="scale-rotate"
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           ariaLabel="Why Choose Sefamar"
@@ -162,7 +164,7 @@ export default function LandingPage() {
           ]}
           carouselMode="buttons"
           gridVariant="three-columns-all-equal-width"
-          animationType="blur-reveal"
+          animationType="scale-rotate"
           useInvertedBackground={true}
           ariaLabel="Sefamar Services Showcase"
           textboxLayout="default"
@@ -181,12 +183,25 @@ export default function LandingPage() {
           ]}
           carouselMode="buttons"
           gridVariant="uniform-all-items-equal"
-          animationType="blur-reveal"
+          animationType="depth-3d"
           useInvertedBackground={false}
           ariaLabel="Customer Testimonials"
           textboxLayout="default"
         />
       </div>
+      <div id="newsletter" data-section="newsletter">
+        <ContactForm
+          tag="STAY CONNECTED"
+          title="Subscribe to Our Newsletter"
+          description="Get the latest updates, special offers, and industry insights directly to your inbox."
+          inputPlaceholder="Enter your email address"
+          buttonText="Subscribe"
+          onSubmit={(email) => console.log("Newsletter subscribed:", email)}
+          centered={true}
+          className="py-24"
+          useInvertedBackground={false}
+        />
+      </div>
       <div id="contact" data-section="contact">
         <ContactSplitForm
           title="Request a Custom Quote"

src/app/projects/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Linkedin, Facebook, Instagram, Youtube } from "lucide-react";
+
+export default function ProjectsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="SEFAMAR"
+          navItems={[
+            { name: "Home", id: "#hero" },
+            { name: "About Us", id: "#about" },
+            { name: "Solutions", id: "#solutions" },
+            { name: "Why Sefamar", id: "#why-us" },
+            { name: "Brands", id: "#brands" },
+            { name: "Performance", id: "#performance" },
+            { name: "Services", id: "#services" },
+            { name: "Testimonials", id: "#testimonials" },
+            { name: "Projects", id: "/projects" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Request a Quote",            href: "/contact"
+          }}
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardFour
+          title="Our Projects: Driving Success Across Industries"
+          description="Explore our diverse portfolio of heavy transport, industrial equipment, and fleet management projects. See how we deliver tailored solutions and achieve tangible results for our clients."
+          products={[
+            {
+              id: "proj-1",              name: "Large Transport Fleet Optimization",              variant: "Client Industry: Logistics & Supply Chain",              price: "Before: Inefficient routing, high fuel costs. After: 20% cost reduction, 15% faster deliveries.",              imageSrc: "http://img.b2bpic.net/free-photo/view-city-from-car_23-2149175239.jpg",              imageAlt: "Optimized heavy transport fleet"
+            },
+            {
+              id: "proj-2",              name: "Advanced Industrial Machinery Upgrade",              variant: "Client Industry: Manufacturing",              price: "Before: Outdated equipment, frequent breakdowns. After: 30% increase in production efficiency, reduced downtime.",              imageSrc: "http://img.b2bpic.net/free-photo/construction-engineer-working-his-laptop-site_23-2149204018.jpg",              imageAlt: "Upgraded industrial machinery"
+            },
+            {
+              id: "proj-3",              name: "Heavy Equipment Deployment for Mining",              variant: "Client Industry: Mining & Extraction",              price: "Before: Limited operational capacity. After: Full-scale deployment of specialized excavation and hauling equipment.",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-building-machine-doing-construction-work_23-2149021422.jpg",              imageAlt: "Heavy mining equipment on site"
+            },
+            {
+              id: "proj-4",              name: "Integrated Logistics for Large Construction Site",              variant: "Client Industry: Construction",              price: "Before: Complex material flow, delays. After: Streamlined logistics, timely delivery of all resources.",              imageSrc: "http://img.b2bpic.net/free-photo/builder-using-tablet-construction-site_23-2149348427.jpg",              imageAlt: "Construction site logistics"
+            },
+            {
+              id: "proj-5",              name: "Agricultural Fleet Modernization",              variant: "Client Industry: Agriculture",              price: "Before: Aging farm machinery, high maintenance. After: New generation tractors and implements, improved yield.",              imageSrc: "http://img.b2bpic.net/free-photo/farmer-driving-tractor-field_23-2149187310.jpg",              imageAlt: "Modern agricultural fleet"
+            },
+            {
+              id: "proj-6",              name: "Public Sector Vehicle Maintenance Contract",              variant: "Client Industry: Public Services",              price: "Before: Varied service quality, long repair times. After: Centralized, efficient, and guaranteed maintenance for entire fleet.",              imageSrc: "http://img.b2bpic.net/free-photo/car-repair-workshop-with-a-car-lift_23-2149303522.jpg",              imageAlt: "Public service vehicle maintenance"
+            }
+          ]}
+          carouselMode="buttons"
+          gridVariant="two-columns-alternating-heights"
+          animationType="blur-reveal"
+          useInvertedBackground={false}
+          ariaLabel="Sefamar Projects Portfolio"
+          textboxLayout="default"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="SEFAMAR"
+          copyrightText="© 2024 Sefamar. All rights reserved."
+          socialLinks={[
+            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+            { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            { icon: Youtube, href: "#", ariaLabel: "YouTube" }
+          ]}
+          ariaLabel="Sefamar Site Footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Truck, Settings, Wrench, Box, Snowflake, BusFront, Ambulance, DraftingCompass, Layers, Monitor, Share2, Globe, ClipboardCheck, ShipWheel, FileText, Package2, Scale, Phone, HardHat, Computer, GraduationCap, CalendarCheck, RefreshCw, Linkedin, Facebook, Instagram, Youtube, ShieldCheck } from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="SEFAMAR"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About Us", id: "/#about" },
+            { name: "Solutions", id: "/#solutions" },
+            { name: "Why Sefamar", id: "/#why-us" },
+            { name: "Brands", id: "/#brands" },
+            { name: "Performance", id: "/#performance" },
+            { name: "Services", id: "/services" },
+            { name: "Testimonials", id: "/#testimonials" },
+            { name: "Contact", id: "/#contact" }
+          ]}
+          button={{
+            text: "Request a Quote",            href: "/#contact"
+          }}
+        />
+      </div>
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="Our Services"
+          description="Comprehensive solutions for all your heavy transport, industrial equipment, and logistics needs."
+          buttons={[
+            { text: "Get a Quote", href: "/#contact" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/traveling-with-off-road-car_23-2151473001.jpg?_wi=1"
+          imageAlt="Heavy truck on road"
+          showDimOverlay={true}
+          ariaLabel="Services Hero Section"
+        />
+      </div>
+      <div id="custom-vehicle-manufacturing" data-section="custom-vehicle-manufacturing">
+        <FeatureHoverPattern
+          tag="Manufacturing"
+          title="Custom Vehicle Body Manufacturing"
+          description="Tailored bodywork solutions for various applications, built to the highest standards of quality and durability."
+          features={[
+            { icon: Box, title: "Specialized Cargo Bodies", description: "Robust and custom-designed bodies for diverse cargo transport requirements." },
+            { icon: Snowflake, title: "Refrigerated Units", description: "Advanced climate-controlled solutions for perishable goods, ensuring optimal freshness." },
+            { icon: BusFront, title: "Passenger Transport", description: "Safe and comfortable body designs for buses and people carriers." },
+            { icon: Ambulance, title: "Emergency Vehicles", description: "Custom fabrication for ambulances and other critical response vehicles." },
+            { icon: DraftingCompass, title: "Custom Engineering", description: "Precision engineering to meet unique specifications and operational demands." },
+            { icon: Layers, title: "Material Selection & Fabrication", description: "Expert advice and usage of high-quality materials for maximum durability." }
+          ]}
+          animationType="scale-rotate"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Custom Vehicle Body Manufacturing Services"
+        />
+      </div>
+      <div id="man-truck-solutions" data-section="man-truck-solutions">
+        <FeatureHoverPattern
+          tag="MAN Partnership"
+          title="MAN Truck Solutions"
+          description="As an official dealer and service center for MAN Trucks, we offer comprehensive sales, genuine parts, and expert maintenance for your MAN fleet."
+          features={[
+            { icon: Truck, title: "New Truck Sales", description: "Access to the latest models of MAN heavy-duty trucks and commercial vehicles." },
+            { icon: Wrench, title: "Genuine MAN Parts", description: "Ensuring vehicle integrity and performance with authentic MAN spare parts." },
+            { icon: Settings, title: "Certified Service & Maintenance", description: "Factory-trained technicians provide top-tier service to maximize uptime." },
+            { icon: Monitor, title: "Advanced Diagnostic Services", description: "State-of-the-art diagnostics for precise issue identification and resolution." },
+            { icon: ShieldCheck, title: "Warranty Support & Claims", description: "Full support for all MAN warranty services and claims processing." },
+            { icon: Share2, title: "Fleet Integration & Optimization", description: "Solutions for seamless integration and efficient management of your MAN fleet." }
+          ]}
+          animationType="scale-rotate"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          ariaLabel="MAN Truck Solutions"
+        />
+      </div>
+      <div id="vehicle-import-export" data-section="vehicle-import-export">
+        <FeatureHoverPattern
+          tag="Logistics"
+          title="Vehicle Import & Export"
+          description="We provide seamless global logistics and specialized services for the efficient import and export of vehicles and industrial equipment."
+          features={[
+            { icon: Globe, title: "Global Sourcing & Procurement", description: "Assistance in sourcing and acquiring vehicles from international markets." },
+            { icon: ClipboardCheck, title: "Customs Clearance & Duties", description: "Expert handling of all customs procedures and regulatory compliance." },
+            { icon: ShipWheel, title: "Freight Management & Shipping", description: "Optimized freight solutions by sea, air, and land for timely delivery." },
+            { icon: FileText, title: "Documentation & Legal Handling", description: "Complete management of all necessary import/export documentation." },
+            { icon: Package2, title: "Door-to-Door Delivery", description: "Full-service logistics from origin to final destination." },
+            { icon: Scale, title: "Insurance & Trade Compliance", description: "Comprehensive insurance options and adherence to international trade laws." }
+          ]}
+          animationType="scale-rotate"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Vehicle Import & Export Services"
+        />
+      </div>
+      <div id="technical-support" data-section="technical-support">
+        <FeatureHoverPattern
+          tag="Support"
+          title="Dedicated Technical Support"
+          description="Our highly skilled technical team offers rapid, reliable support and expertise to ensure your equipment and vehicles operate at peak performance, minimizing downtime."
+          features={[
+            { icon: Phone, title: "24/7 Technical Helpline", description: "Around-the-clock access to expert advice and immediate troubleshooting." },
+            { icon: HardHat, title: "On-Site Assistance & Repair", description: "Rapid deployment of technicians for on-location diagnosis and repair." },
+            { icon: Computer, title: "Remote Diagnostics & Monitoring", description: "Advanced remote systems for proactive identification and resolution of issues." },
+            { icon: GraduationCap, title: "Operator Training Programs", description: "Comprehensive training for your team on equipment operation and maintenance." },
+            { icon: CalendarCheck, title: "Scheduled Preventative Maintenance", description: "Proactive service plans to prevent breakdowns and extend equipment life." },
+            { icon: RefreshCw, title: "Software Updates & Upgrades", description: "Ensuring your systems are current with the latest performance and security enhancements." }
+          ]}
+          animationType="scale-rotate"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          ariaLabel="Technical Support Services"
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="SEFAMAR"
+          copyrightText="© 2024 Sefamar. All rights reserved."
+          socialLinks={[
+            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+            { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            { icon: Youtube, href: "#", ariaLabel: "YouTube" }
+          ]}
+          ariaLabel="Sefamar Site Footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F8FAFC;
-  --card: #FFFFFF;
-  --foreground: #0B1220;
-  --primary-cta: #D4A017;
+  --background: #f5faff;
+  --card: #f1f8ff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
   --primary-cta-text: #0B1220;
-  --secondary-cta: #4A5568;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #FFFFFF;
-  --accent: #D4A017;
-  --background-accent: #D4A017;
+  --accent: #a8cce8;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);