Add src/app/shop/page.tsx

src/app/blog/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import ReactLenis from "lenis/react";
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -54,7 +54,8 @@ export default function BlogPage() {
                 const url = `${apiUrl}/posts/${projectId}?status=published`;
                 const response = await fetch(url, {
                     method: "GET",                    headers: {
-                        "Content-Type": "application/json"},
+                        "Content-Type": "application/json"
+                    },
                 });
 
                 if (response.ok) {
@@ -103,6 +104,7 @@ export default function BlogPage() {
                             { name: "Fleet", id: "products" },
                             { name: "Pricing", id: "pricing" },
                             { name: "Why Us", id: "features" },
+                            { name: "Shop", id: "shop" },
                             { name: "Contact", id: "contact" }
                         ]}
                         bottomLeftText="Premium Vehicle Rentals"
@@ -114,7 +116,7 @@ export default function BlogPage() {
                             <p className="text-foreground">Loading posts...</p>
                         </div>
                     ) : (
-                        <BlogCardTwo
+                        <BlogCardOne
                             blogs={posts}
                             title="Latest Travel Insights"
                             description="Discover expert tips, destination guides, and automotive excellence stories from our team"

src/app/contact/page.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import Input from '@/components/form/Input';
+import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';
+import { MapPin, Phone, Mail, Clock } from 'lucide-react';
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: ''
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Here you would typically send the form data to your backend
+    console.log('Form submitted:', formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setSubmitted(false);
+      setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="slide-background"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="floatingGradient"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="No Audi No Travel"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Fleet", id: "products" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Why Us", id: "features" },
+            { name: "Shop", id: "shop" },
+            { name: "Contact", id: "contact" }
+          ]}
+          bottomLeftText="Premium Vehicle Rentals"
+          bottomRightText="hello@noaudinotravel.com"
+        />
+      </div>
+
+      <div id="contact" data-section="contact" className="w-content-width mx-auto py-20 px-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          {/* Contact Form */}
+          <div>
+            <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-2">Get In Touch</h1>
+            <p className="text-foreground/75 mb-8">Have a question about our fleet or rental process? We'd love to hear from you. Fill out the form below and our team will respond as soon as possible.</p>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Name</label>
+                <Input
+                  value={formData.name}
+                  onChange={(value) => handleInputChange('name', value)}
+                  placeholder="Your name"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Email</label>
+                <Input
+                  value={formData.email}
+                  onChange={(value) => handleInputChange('email', value)}
+                  type="email"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Phone</label>
+                <Input
+                  value={formData.phone}
+                  onChange={(value) => handleInputChange('phone', value)}
+                  type="tel"
+                  placeholder="+1 (555) 000-0000"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Subject</label>
+                <Input
+                  value={formData.subject}
+                  onChange={(value) => handleInputChange('subject', value)}
+                  placeholder="Inquiry about rental"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Message</label>
+                <textarea
+                  value={formData.message}
+                  onChange={(e) => handleInputChange('message', e.target.value)}
+                  placeholder="Tell us how we can help..."
+                  rows={5}
+                  required
+                  className="w-full px-4 py-3 rounded-theme bg-secondary-cta text-foreground placeholder-foreground/50 border border-accent focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+              </div>
+
+              <div className="pt-4">
+                <ButtonShiftHover
+                  text={submitted ? "Message Sent!" : "Send Message"}
+                  disabled={submitted}
+                />
+              </div>
+            </form>
+          </div>
+
+          {/* Business Information & Support Details */}
+          <div>
+            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-8">Contact Information</h2>
+
+            {/* Business Info Cards */}
+            <div className="space-y-6 mb-12">
+              {/* Address */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <MapPin className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Address</h3>
+                  <p className="text-foreground/75">123 Luxury Lane<br />Premium City, PC 12345<br />United States</p>
+                </div>
+              </div>
+
+              {/* Phone */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <Phone className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Phone</h3>
+                  <p className="text-foreground/75">+1 (800) 123-4567<br />Available 24/7</p>
+                </div>
+              </div>
+
+              {/* Email */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <Mail className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Email</h3>
+                  <p className="text-foreground/75">hello@noaudinotravel.com<br />support@noaudinotravel.com</p>
+                </div>
+              </div>
+
+              {/* Business Hours */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <Clock className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Business Hours</h3>
+                  <p className="text-foreground/75">Monday - Friday: 8:00 AM - 6:00 PM<br />Saturday - Sunday: 10:00 AM - 4:00 PM<br />Holidays: By appointment</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Support Details */}
+            <div>
+              <h3 className="text-2xl font-bold text-foreground mb-4">Support Services</h3>
+              <ul className="space-y-3 text-foreground/75">
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>24/7 Roadside Assistance:</strong> Emergency support for all active rentals</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Same-Day Booking:</strong> Call to book a vehicle with immediate availability</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Dedicated Account Manager:</strong> For monthly leases and corporate rentals</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Airport Services:</strong> Free pickup and dropoff at major airports</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Vehicle Support:</strong> Technical assistance and replacement vehicles</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="No Audi No Travel" />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -34,6 +34,7 @@ export default function LandingPage() {
             { name: "Fleet", id: "products" },
             { name: "Pricing", id: "pricing" },
             { name: "Why Us", id: "features" },
+            { name: "Shop", id: "shop" },
             { name: "Contact", id: "contact" }
           ]}
           bottomLeftText="Premium Vehicle Rentals"
@@ -222,6 +223,38 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="shop" data-section="shop">
+        <ProductCardTwo
+          title="Shop Premium Accessories"
+          description="Enhance your rental experience with our exclusive range of premium accessories and add-ons designed to elevate your journey."
+          tag="Exclusive Offerings"
+          tagIcon={Star}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="invertDefault"
+          gridVariant="three-columns-all-equal-width"
+          carouselMode="buttons"
+          products={[
+            {
+              id: "acc-1",              brand: "Premium",              name: "Advanced GPS Navigation",              price: "$25/day",              rating: 5,
+              reviewCount: "342",              imageSrc: "https://img.b2bpic.net/free-photo/young-couple-choosing-car-car-show-room_1303-22857.jpg",              imageAlt: "GPS Navigation System"
+            },
+            {
+              id: "acc-2",              brand: "Comfort",              name: "Leather Upgrade Package",              price: "$35/day",              rating: 5,
+              reviewCount: "287",              imageSrc: "https://img.b2bpic.net/free-photo/feeling-good-girl-modern-car-salon-daytime-indoors-buying-new-vehicle_146671-16520.jpg",              imageAlt: "Leather Interior"
+            },
+            {
+              id: "acc-3",              brand: "Safety",              name: "Child Seat Installation",              price: "$20/day",              rating: 5,
+              reviewCount: "156",              imageSrc: "https://img.b2bpic.net/free-photo/photo-from-inside-vehicle-female-customer-modern-stylish-bearded-businessman-automobile-saloon_146671-16063.jpg",              imageAlt: "Child Safety Seat"
+            },
+            {
+              id: "acc-4",              brand: "Adventure",              name: "Roof Rack & Carrier",              price: "$40/day",              rating: 5,
+              reviewCount: "218",              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-car_23-2149571885.jpg",              imageAlt: "Roof Rack Carrier"
+            }
+          ]}
+        />
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactFaq
           ctaTitle="Book Your Dream Vehicle"

src/app/shop/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Star } from 'lucide-react';
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="slide-background"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="floatingGradient"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="No Audi No Travel"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Fleet", id: "products" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Why Us", id: "features" },
+            { name: "Shop", id: "shop" },
+            { name: "Contact", id: "contact" }
+          ]}
+          bottomLeftText="Premium Vehicle Rentals"
+          bottomRightText="hello@noaudinotravel.com"
+        />
+      </div>
+
+      <div id="shop" data-section="shop">
+        <ProductCardTwo
+          title="Shop Premium Accessories & Add-ons"
+          description="Enhance your rental experience with our exclusive range of premium accessories and add-ons designed to elevate your journey. From navigation systems to comfort packages, find everything you need."
+          tag="Exclusive Offerings"
+          tagIcon={Star}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          gridVariant="three-columns-all-equal-width"
+          carouselMode="buttons"
+          products={[
+            {
+              id: "acc-1",              brand: "Premium",              name: "Advanced GPS Navigation",              price: "$25/day",              rating: 5,
+              reviewCount: "342",              imageSrc: "https://img.b2bpic.net/free-photo/young-couple-choosing-car-car-show-room_1303-22857.jpg",              imageAlt: "GPS Navigation System"
+            },
+            {
+              id: "acc-2",              brand: "Comfort",              name: "Leather Upgrade Package",              price: "$35/day",              rating: 5,
+              reviewCount: "287",              imageSrc: "https://img.b2bpic.net/free-photo/feeling-good-girl-modern-car-salon-daytime-indoors-buying-new-vehicle_146671-16520.jpg",              imageAlt: "Leather Interior"
+            },
+            {
+              id: "acc-3",              brand: "Safety",              name: "Child Seat Installation",              price: "$20/day",              rating: 5,
+              reviewCount: "156",              imageSrc: "https://img.b2bpic.net/free-photo/photo-from-inside-vehicle-female-customer-modern-stylish-bearded-businessman-automobile-saloon_146671-16063.jpg",              imageAlt: "Child Safety Seat"
+            },
+            {
+              id: "acc-4",              brand: "Adventure",              name: "Roof Rack & Carrier",              price: "$40/day",              rating: 5,
+              reviewCount: "218",              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-car_23-2149571885.jpg",              imageAlt: "Roof Rack Carrier"
+            },
+            {
+              id: "acc-5",              brand: "Entertainment",              name: "Premium Sound System Upgrade",              price: "$30/day",              rating: 5,
+              reviewCount: "203",              imageSrc: "https://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-20992.jpg",              imageAlt: "Premium Audio System"
+            },
+            {
+              id: "acc-6",              brand: "Protection",              name: "Premium Insurance Coverage",              price: "$50/day",              rating: 5,
+              reviewCount: "421",              imageSrc: "https://img.b2bpic.net/free-photo/young-handsome-man-car-showroom_1303-22855.jpg",              imageAlt: "Insurance Package"
+            },
+            {
+              id: "acc-7",              brand: "Convenience",              name: "Airport Delivery Service",              price: "$60/trip",              rating: 5,
+              reviewCount: "534",              imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-woman-choosing-car-car-showroom_1303-22802.jpg",              imageAlt: "Airport Delivery"
+            },
+            {
+              id: "acc-8",              brand: "Luxury",              name: "Concierge Service Package",              price: "$100/day",              rating: 5,
+              reviewCount: "178",              imageSrc: "https://img.b2bpic.net/free-photo/opening-door-modern-stylish-bearded-businessman-automobile-saloon_146671-16006.jpg",              imageAlt: "Concierge Service"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="No Audi No Travel" />
+      </div>
+    </ThemeProvider>
+  );
+}