Add src/app/map-routes/page.tsx

2026-03-23 22:10:08 +00:00
parent ffa3de22e8
commit ee59ff39c7
1 changed files with 60 additions and 0 deletions
--- a/src/app/map-routes/page.tsx
+++ b/src/app/map-routes/page.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Globe } from "lucide-react";
+
+export default function MapRoutesPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={[
+                        { name: "About", id: "about" },
+                        { name: "Services", id: "services" },
+                        { name: "Destinations", id: "destinations" },
+                        { name: "Map Routes", id: "/map-routes" },
+                        { name: "Quote", id: "/quote" },
+                        { name: "Blog", id: "blog" },
+                        { name: "Reviews", id: "reviews" },
+                        { name: "Contact", id: "/contact" }
+                    ]}
+                    brandName="Maritime Solutions"
+                    button={{ text: "Connect With Us", href: "/contact" }}
+                />
+                <div id="map-routes" data-section="map-routes" className="relative min-h-screen py-20 bg-gray-900 text-white flex flex-col items-center justify-center overflow-hidden">
+                    <div className="absolute inset-0 z-0 opacity-20">
+                        <img src="/images/world-map-lines.svg" alt="World Map" className="w-full h-full object-cover" />
+                    </div>
+                    <div className="relative z-10 text-center max-w-4xl mx-auto px-4">
+                        <Globe className="mx-auto mb-4 h-12 w-12 text-blue-400" />
+                        <h1 className="text-5xl font-bold mb-4">Global Maritime Routes</h1>
+                        <p className="text-lg text-gray-300 mb-8">
+                            Explore our animated map showcasing key shipping routes and major port connections worldwide.
+                            We connect major hubs like Singapore, Rotterdam, Shanghai, Los Angeles, and Lagos with dynamic, animated lines,
+                            visualizing the arteries of global trade. *Note: Animated map functionality is a custom component placeholder.*</p>
+                        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-8">
+                            <span className="p-3 bg-blue-600 rounded-lg text-sm font-semibold">Singapore</span>
+                            <span className="p-3 bg-blue-600 rounded-lg text-sm font-semibold">Rotterdam</span>
+                            <span className="p-3 bg-blue-600 rounded-lg text-sm font-semibold">Shanghai</span>
+                            <span className="p-3 bg-blue-600 rounded-lg text-sm font-semibold">Los Angeles</span>
+                            <span className="p-3 bg-blue-600 rounded-lg text-sm font-semibold">Lagos</span>
+                        </div>
+                    </div>
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}