Add src/app/shipping/page.tsx

src/app/shipping/page.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Truck, MapPin, Package } from 'lucide-react';
+
+export default function ShippingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="UMBRA"
+            navItems={[
+              { name: "Collection", id: "/" },
+              { name: "Shipping", id: "/shipping" },
+              { name: "Contact", id: "/" }
+            ]}
+            button={{ text: "Shop Now", href: "/" }}
+          />
+        </div>
+
+        <div id="shipping-info" data-section="shipping-info" className="pt-32 pb-20 px-6">
+          <div className="max-w-4xl mx-auto">
+            <h1 className="text-4xl font-bold mb-8">Shipping Policy</h1>
+            <div className="grid gap-8">
+              <div className="p-6 border rounded-lg bg-card">
+                <h2 className="text-2xl font-semibold mb-4 flex items-center"><Truck className="mr-2" /> Nationwide Delivery</h2>
+                <p>We offer reliable shipping across the USA. Orders are processed within 24-48 hours and shipped via our premium logistics partners to ensure your products arrive in pristine condition.</p>
+              </div>
+              <div className="p-6 border rounded-lg bg-card">
+                <h2 className="text-2xl font-semibold mb-4 flex items-center"><Package className="mr-2" /> Handling & Packaging</h2>
+                <p>Every bottle is carefully wrapped in sustainable, protective materials to ensure it reaches you exactly as intended.</p>
+              </div>
+              <div className="p-6 border rounded-lg bg-card">
+                <h2 className="text-2xl font-semibold mb-4 flex items-center"><MapPin className="mr-2" /> Tracking Your Order</h2>
+                <p>Once your order ships, you will receive a tracking link via email so you can follow your UMBRA package on its journey to your door.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Questions About Shipping?"
+            description="Need help tracking your order or have a specific delivery inquiry? Our team is here to assist you."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your name", required: true },
+              { name: "email", type: "email", placeholder: "your@email.com", required: true }
+            ]}
+            textarea={{ name: "message", placeholder: "Please include your order number if applicable...", required: true }}
+            buttonText="Contact Support"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="UMBRA"
+            columns={[
+              { items: [{ label: "Back to Home", href: "/" }] },
+              { items: [{ label: "Customer Care", href: "#contact" }] }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}