Update src/app/contact/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Building2, Briefcase, Award, Users } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Services", id: "#services" },
+            { name: "Why Us", id: "#why-us" },
+            { name: "Testimonials", id: "#testimonials" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Business Center 2.0"
+          bottomLeftText="Marrakesh, Morocco"
+          bottomRightText="+212 (0) 5 24 XX XX XX"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MediaAbout
+          title="About Business Center 2.0"
+          description="Founded in 2009, Business Center 2.0 has been Marrakesh's leading business solutions provider. We are dedicated to helping entrepreneurs and companies establish, grow, and succeed in Morocco's dynamic business environment. With over 15 years of experience and 500+ successful business formations, we've become the trusted partner for businesses across all sectors."
+          tag="Our Story"
+          tagIcon={Building2}
+          tagAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/focused-business-colleagues-arguing_1262-20538.jpg?_wi=2"
+          imageAlt="Business Center 2.0 office team"
+          buttons={[
+            { text: "Back to Home", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="mission" data-section="mission">
+        <MediaAbout
+          title="Our Mission & Values"
+          description="Our mission is to empower entrepreneurs and businesses by providing comprehensive, accessible, and professional business solutions. We believe in integrity, excellence, and client success. We combine deep local knowledge with international best practices to deliver services that exceed expectations. Every business we help succeed strengthens Marrakesh's economy and creates opportunities for growth."
+          tag="Core Values"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/experienced-smiling-businessman-giving-presentation-executive-team_23-2147923355.jpg"
+          imageAlt="Business team presenting"
+          buttons={[
+            { text: "Our Services", href: "/#services" }
+          ]}
+          buttonAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardSixteen
+          title="What Makes Us Different"
+          description="We're not just another business service provider. Here's what sets Business Center 2.0 apart from the competition."
+          tag="Our Difference"
+          tagIcon={Briefcase}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          negativeCard={{
+            items: [
+              "Generic one-size-fits-all services",              "Lack of personalized attention",              "Slow and bureaucratic processes",              "Poor after-sales support"
+            ]
+          }}
+          positiveCard={{
+            items: [
+              "Customized solutions for every business",              "Dedicated personal consultants",              "Fast turnaround with quality assurance",              "Long-term ongoing support relationships"
+            ]
+          }}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <ProductCardTwo
+          title="Our Expert Team"
+          description="Our team consists of experienced professionals with deep expertise in business law, accounting, and entrepreneurship."
+          tag="Meet the Team"
+          tagIcon={Users}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          gridVariant="three-columns-all-equal-width"
+          products={[
+            {
+              id: "1",              brand: "Legal Expertise",              name: "Business Law & Compliance",              price: "Expert Guidance",              rating: 5,
+              reviewCount: "Professional",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg",              imageAlt: "Legal professional"
+            },
+            {
+              id: "2",              brand: "Financial Expertise",              name: "Accounting & Financial Planning",              price: "Expert Guidance",              rating: 5,
+              reviewCount: "Professional",              imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-with-gray-beard_1262-3872.jpg",              imageAlt: "Financial professional"
+            },
+            {
+              id: "3",              brand: "Business Expertise",              name: "Business Consulting & Strategy",              price: "Expert Guidance",              rating: 5,
+              reviewCount: "Professional",              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-with-face-mask-presenting-his-coworkers-new-project-whiteboard-office_637285-9181.jpg?_wi=2",              imageAlt: "Business consultant"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Business Center 2.0"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Phone, Mail, MapPin, Facebook, Linkedin, Twitter } from 'lucide-react';
+import { useState } from 'react';
+import Input from '@/components/form/Input';
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: ''
+  });
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Form submission would be handled here
+    setIsSubmitted(true);
+    setTimeout(() => {
+      setIsSubmitted(false);
+      setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Services", id: "/#services" },
+            { name: "Why Us", id: "/#why-us" },
+            { name: "Testimonials", id: "/#testimonials" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Business Center 2.0"
+          bottomLeftText="Marrakesh, Morocco"
+          bottomRightText="+212 (0) 5 24 XX XX XX"
+        />
+      </div>
+
+      <div id="contact-info" data-section="contact-info" className="w-full min-h-screen flex items-center justify-center py-20 px-4">
+        <div className="w-full max-w-4xl">
+          <h1 className="text-4xl md:text-5xl font-bold mb-6 text-center">Get In Touch</h1>
+          <p className="text-lg text-center mb-12 opacity-75">We're here to help. Contact us with any questions or inquiries about our business services.</p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+            {/* Phone */}
+            <div className="bg-card rounded-lg p-6 text-center">
+              <Phone className="w-8 h-8 mx-auto mb-4" style={{ color: 'var(--color-primary-cta)' }} />
+              <h3 className="text-lg font-semibold mb-2">Call Us</h3>
+              <a href="tel:+212524XXXXXX" className="hover:opacity-75 transition">
+                +212 (0) 5 24 XX XX XX
+              </a>
+            </div>
+
+            {/* Email */}
+            <div className="bg-card rounded-lg p-6 text-center">
+              <Mail className="w-8 h-8 mx-auto mb-4" style={{ color: 'var(--color-primary-cta)' }} />
+              <h3 className="text-lg font-semibold mb-2">Email Us</h3>
+              <a href="mailto:info@businesscenter2.ma" className="hover:opacity-75 transition break-all">
+                info@businesscenter2.ma
+              </a>
+            </div>
+
+            {/* Address */}
+            <div className="bg-card rounded-lg p-6 text-center">
+              <MapPin className="w-8 h-8 mx-auto mb-4" style={{ color: 'var(--color-primary-cta)' }} />
+              <h3 className="text-lg font-semibold mb-2">Visit Us</h3>
+              <p>
+                Avenue Mohammed V<br />
+                Marrakesh, Morocco
+              </p>
+            </div>
+          </div>
+
+          {/* Contact Form */}
+          <div className="bg-card rounded-lg p-8 mb-12">
+            <h2 className="text-2xl font-bold mb-6">Send us a Message</h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  value={formData.name}
+                  onChange={(value) => handleInputChange('name', value)}
+                  type="text"
+                  placeholder="Your Name"
+                  required={true}
+                />
+                <Input
+                  value={formData.email}
+                  onChange={(value) => handleInputChange('email', value)}
+                  type="email"
+                  placeholder="Your Email"
+                  required={true}
+                />
+              </div>
+              <Input
+                value={formData.phone}
+                onChange={(value) => handleInputChange('phone', value)}
+                type="tel"
+                placeholder="Your Phone Number"
+              />
+              <Input
+                value={formData.subject}
+                onChange={(value) => handleInputChange('subject', value)}
+                type="text"
+                placeholder="Subject"
+                required={true}
+              />
+              <textarea
+                value={formData.message}
+                onChange={(e) => handleInputChange('message', e.target.value)}
+                placeholder="Your Message"
+                required
+                rows={6}
+                className="w-full px-4 py-3 rounded-lg border border-accent bg-secondary-button-bg text-foreground placeholder-foreground placeholder-opacity-75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition"
+              />
+              <button
+                type="submit"
+                style={{ backgroundColor: 'var(--color-primary-cta)' }}
+                className="w-full px-8 py-3 rounded-lg font-semibold text-white hover:opacity-90 transition"
+              >
+                {isSubmitted ? 'Message Sent!' : 'Send Message'}
+              </button>
+            </form>
+          </div>
+
+          {/* Google Maps Embed */}
+          <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6">Find Us On Map</h2>
+            <div className="rounded-lg overflow-hidden h-96 md:h-96">
+              <iframe
+                width="100%"
+                height="100%"
+                frameBorder={0}
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3397.6841693355476!2d-8.009166!3d31.629719!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xdafee62fa5f2f9f%3A0x1234567890abc!2sMarrakesh%2C%20Morocco!5e0!3m2!1sen!2s!4v1234567890"
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Business Center 2.0 Location"
+              />
+            </div>
+          </div>
+
+          {/* Social Media Links */}
+          <div className="text-center">
+            <h3 className="text-2xl font-bold mb-6">Follow Us</h3>
+            <div className="flex justify-center gap-6">
+              <a
+                href="https://www.facebook.com/businesscenter2"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-3 bg-card rounded-full hover:opacity-75 transition"
+                aria-label="Facebook"
+              >
+                <Facebook className="w-6 h-6" style={{ color: 'var(--color-primary-cta)' }} />
+              </a>
+              <a
+                href="https://www.linkedin.com/company/businesscenter2"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-3 bg-card rounded-full hover:opacity-75 transition"
+                aria-label="LinkedIn"
+              >
+                <Linkedin className="w-6 h-6" style={{ color: 'var(--color-primary-cta)' }} />
+              </a>
+              <a
+                href="https://www.twitter.com/businesscenter2"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-3 bg-card rounded-full hover:opacity-75 transition"
+                aria-label="Twitter"
+              >
+                <Twitter className="w-6 h-6" style={{ color: 'var(--color-primary-cta)' }} />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="contact-faq" data-section="contact-faq">
+        <ContactFaq
+          ctaTitle="Still Have Questions?"
+          ctaDescription="Check out our FAQ section or reach out to our team directly. We're always happy to help."
+          ctaIcon={Phone}
+          ctaButton={{ text: "Call Us Now", href: "tel:+212524XXXXXX" }}
+          useInvertedBackground={false}
+          animationType="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "What are your business hours?",              content: "We're open Monday to Friday from 9:00 AM to 6:00 PM, and Saturday from 10:00 AM to 2:00 PM (Morocco time). We're closed on Sundays and public holidays. For urgent matters, you can reach our emergency line."
+            },
+            {
+              id: "2",              title: "How quickly will you respond to my inquiry?",              content: "We aim to respond to all inquiries within 24 business hours. For urgent matters, please call us directly or mark your email as urgent. Phone calls are typically answered within 2-4 hours during business hours."
+            },
+            {
+              id: "3",              title: "Can I schedule a free consultation?",              content: "Absolutely! We offer free initial consultations for all new clients. You can schedule one by calling us, emailing us, or filling out the contact form. We typically schedule consultations within 2-3 business days."
+            },
+            {
+              id: "4",              title: "Do you offer virtual meetings?",              content: "Yes, we offer virtual consultations via Zoom, Google Meet, or Microsoft Teams for clients who prefer to meet remotely. Simply let us know your preference when you contact us."
+            },
+            {
+              id: "5",              title: "What's the best way to reach you?",              content: "You can reach us by phone (fastest response), email, or the contact form on this page. For general inquiries, email is fine. For urgent matters, please call us directly."
+            }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Business Center 2.0"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -22,11 +22,13 @@ const dmSans = DM_Sans({
 export const metadata: Metadata = {
   title: "Business Center 2.0 | Marrakesh Business Solutions",  description: "Professional business consulting, company formation, domiciliation, and coworking in Marrakesh. Expert guidance for entrepreneurs and growing businesses.",  keywords: "business center Marrakesh, company formation Morocco, domiciliation juridique, business consulting Marrakesh, coworking space, entrepreneur services",  metadataBase: new URL("https://businesscenter2.ma"),
   alternates: {
-    canonical: "https://businesscenter2.ma"},
+    canonical: "https://businesscenter2.ma"
+  },
   openGraph: {
     title: "Business Center 2.0 | Marrakesh Business Solutions",    description: "Transform your business in Marrakesh with professional consulting and comprehensive business services.",    siteName: "Business Center 2.0",    type: "website",    images: [
       {
-        url: "http://img.b2bpic.net/free-photo/stylish-portrait-bearded-entrepreneur_1098-16154.jpg",        alt: "Business Center 2.0 Office"},
+        url: "http://img.b2bpic.net/free-photo/stylish-portrait-bearded-entrepreneur_1098-16154.jpg",        alt: "Business Center 2.0 Office"
+      },
     ],
   },
   twitter: {

src/app/page.tsx

@@ -30,11 +30,11 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
-            { name: "About", id: "about" },
+            { name: "About", id: "/about" },
             { name: "Services", id: "services" },
             { name: "Why Us", id: "why-us" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "/contact" }
           ]}
           brandName="Business Center 2.0"
           bottomLeftText="Marrakesh, Morocco"
@@ -64,7 +64,7 @@ export default function LandingPage() {
           ]}
           buttons={[
             { text: "Call Now", href: "tel:+212524XXXXXX" },
-            { text: "Request Consultation", href: "#contact" }
+            { text: "Request Consultation", href: "/contact" }
           ]}
           buttonAnimation="slide-up"
           carouselPosition="right"

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000f06e6;
-  --primary-cta: #0a7039;
+  --card: #f5f9fc;
+  --foreground: #0f1419;
+  --primary-cta: #1e5a96;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #f5f9fc;
   --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #d0dce9;
+  --background-accent: #b0c4e0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);