Update src/app/attractions/page.tsx

Merge version_1 into main

src/app/attractions/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function AttractionsPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+              navItems={[
+                  { name: "Home", id: "/" },
+                  { name: "Attractions", id: "/attractions" },
+              ]}
+              brandName="Dubai Dolphinarium"
+          />
+        </div>
+        
+        <div className="pt-32 pb-20" id="features" data-section="features">
+            <FeatureCardOne
+                title="Attractions & Shows"
+                description="Explore our world-class marine entertainment and educational experiences."
+                textboxLayout="split"
+                animationType="slide-up"
+                gridVariant="three-columns-all-equal-width"
+                useInvertedBackground={false}
+                features={[
+                    {
+                        title: "Dolphin & Seal Show",                        
+                        description: "Experience the magic of our incredible marine performers.",                        
+                        imageSrc: "http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=2",                        
+                        imageAlt: "Dolphin & Seal Show"
+                    },
+                    {
+                        title: "Interactive Encounters",                        
+                        description: "Get up close and personal with our amazing sea life.",                        
+                        imageSrc: "http://img.b2bpic.net/free-photo/starfish-underwater-still-life_23-2150434856.jpg",                        
+                        imageAlt: "Interactive Encounters"
+                    },
+                    {
+                        title: "Marine Life Exhibits",                        
+                        description: "Discover wonders of the deep in our curated exhibits.",                        
+                        imageSrc: "http://img.b2bpic.net/free-photo/futuristic-representation-water-park_23-2151048108.jpg",                        
+                        imageAlt: "Marine Life Exhibits"
+                    }
+                ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+              columns={[
+                  { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Attractions", href: "/attractions" }] },
+                  { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] }
+              ]}
+              bottomLeftText="© 2024 Dubai Dolphinarium"
+              bottomRightText="All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,26 +28,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Experience",
-          id: "features",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Visit", id: "/visit" },
+        { name: "FAQ", id: "/faq" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Dubai Dolphinarium"
     />
@@ -55,20 +40,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       logoText="Dubai Dolphinarium"
       description="Experience the wonder of marine life in the heart of Dubai. World-class performances and educational encounters await."
       buttons={[
-        {
-          text: "Book Tickets",
-          href: "#contact",
-        },
-        {
-          text: "Learn More",
-          href: "#about",
-        },
+        { text: "Book Tickets", href: "/contact" },
+        { text: "Plan Visit", href: "/visit" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/starfish-underwater-still-life_23-2150434856.jpg"
       imageAlt="Dolphin jumping out of water"
@@ -82,18 +59,9 @@ export default function LandingPage() {
       title="Welcome to a Marine Wonderland"
       description="The Dubai Dolphinarium provides a unique environment for both wildlife conservation and family-friendly entertainment. Since our inception, we've focused on creating unforgettable memories."
       metrics={[
-        {
-          value: "15+",
-          title: "Years of Excellence",
-        },
-        {
-          value: "500k+",
-          title: "Annual Visitors",
-        },
-        {
-          value: "100%",
-          title: "Conservation Focused",
-        },
+        { value: "15+", title: "Years of Excellence" },
+        { value: "500k+", title: "Annual Visitors" },
+        { value: "100%", title: "Conservation Focused" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=1"
       imageAlt="Happy dolphin"
@@ -109,24 +77,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Dolphin & Seal Show",
-          description: "Witness acrobatic performances by our talented marine stars.",
-          imageSrc: "http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=2",
-          imageAlt: "Show 1",
-        },
-        {
-          title: "Meet & Greet",
-          description: "Get up close and personal with our friendly marine inhabitants.",
-          imageSrc: "http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=3",
-          imageAlt: "Show 2",
-        },
-        {
-          title: "Education Tours",
-          description: "Learn about marine biology and our conservation efforts.",
-          imageSrc: "http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=4",
-          imageAlt: "Show 3",
-        },
+        { title: "Dolphin & Seal Show", description: "Witness acrobatic performances by our talented marine stars.", imageSrc: "http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=2", imageAlt: "Show 1" },
+        { title: "Meet & Greet", description: "Get up close and personal with our friendly marine inhabitants.", imageSrc: "http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=3", imageAlt: "Show 2" },
+        { title: "Education Tours", description: "Learn about marine biology and our conservation efforts.", imageSrc: "http://img.b2bpic.net/free-photo/lazy-sea-cow-swimming-underwater-with-fish_493961-650.jpg?_wi=4", imageAlt: "Show 3" },
       ]}
       title="Unforgettable Experiences"
       description="Explore our wide variety of shows and interactive programs designed to educate and entertain all ages."
@@ -138,21 +91,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "q1",
-          title: "What are the show timings?",
-          content: "Shows are typically scheduled at 11 AM, 2 PM, and 6 PM daily.",
-        },
-        {
-          id: "q2",
-          title: "Can I bring kids?",
-          content: "Yes, our park is family-friendly and welcoming to children of all ages.",
-        },
-        {
-          id: "q3",
-          title: "Where is the park located?",
-          content: "We are located at Creek Park, Gate 1, Dubai.",
-        },
+        { id: "q1", title: "What are the show timings?", content: "Shows are typically scheduled at 11 AM, 2 PM, and 6 PM daily." },
+        { id: "q2", title: "Can I bring kids?", content: "Yes, our park is family-friendly and welcoming to children of all ages." },
+        { id: "q3", title: "Where is the park located?", content: "We are located at Creek Park, Gate 1, Dubai." },
       ]}
       title="Frequently Asked Questions"
       description="Everything you need to know about your visit."
@@ -166,24 +107,10 @@ export default function LandingPage() {
       title="Plan Your Visit"
       description="Have questions about tickets or private events? Reach out to our team."
       inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
+        { name: "email", type: "email", placeholder: "Email Address", required: true },
       ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help?",
-        rows: 4,
-      }}
+      textarea={{ name: "message", placeholder: "How can we help?", rows: 4 }}
       imageSrc="http://img.b2bpic.net/free-photo/futuristic-representation-water-park_23-2151048108.jpg"
       imageAlt="Dolphinarium building"
     />
@@ -193,33 +120,18 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "Navigation",
-          items: [
-            {
-              label: "Shows",
-              href: "#features",
-            },
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
+          title: "Navigation",          items: [
+            { label: "Home", href: "/" },
+            { label: "About Us", href: "/about" },
+            { label: "Visit Info", href: "/visit" },
+            { label: "FAQ", href: "/faq" },
+            { label: "Contact", href: "/contact" },
           ],
         },
         {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
+          title: "Legal",          items: [
+            { label: "Privacy Policy", href: "#" },
+            { label: "Terms of Service", href: "#" },
           ],
         },
       ]}
@@ -230,4 +142,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #010912;
-  --card: #152840;
-  --foreground: #e6f0ff;
-  --primary-cta: #cee7ff;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
   --primary-cta-text: #010912;
-  --secondary-cta: #0e1a29;
+  --secondary-cta: #041633;
   --secondary-cta-text: #e6f0ff;
-  --accent: #3f5c79;
-  --background-accent: #004a93;
+  --accent: #2d30f3;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/visit/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function VisitPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="grid"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Visit", id: "/visit" },
+                { name: "FAQ", id: "/faq" },
+                { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Dubai Dolphinarium"
+        />
+        
+        <div className="container mx-auto py-24 px-6">
+            <h1 className="text-5xl font-bold mb-12">Visit Information</h1>
+            <div className="grid md:grid-cols-2 gap-12">
+                <div>
+                    <h2 className="text-2xl font-semibold mb-4">Opening Hours</h2>
+                    <p className="mb-6">Daily: 10:00 AM - 7:00 PM</p>
+                    
+                    <h2 className="text-2xl font-semibold mb-4">Location</h2>
+                    <p className="mb-6">Creek Park, Gate 1, Dubai, UAE</p>
+                </div>
+                <div>
+                    <h2 className="text-2xl font-semibold mb-4">Guidelines</h2>
+                    <ul className="list-disc pl-6 space-y-2 mb-6">
+                        <li>No flash photography allowed during shows.</li>
+                        <li>Please respect the marine animals.</li>
+                        <li>Tickets are required for entry.</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <FooterSimple
+            columns={[
+                {
+                    title: "Navigation",                    items: [
+                        { label: "Home", href: "/" },
+                        { label: "About Us", href: "/about" },
+                        { label: "Visit Info", href: "/visit" },
+                        { label: "FAQ", href: "/faq" },
+                        { label: "Contact", href: "/contact" },
+                    ],
+                },
+                {
+                    title: "Legal",                    items: [
+                        { label: "Privacy Policy", href: "#" },
+                        { label: "Terms of Service", href: "#" },
+                    ],
+                },
+            ]}
+            bottomLeftText="© 2024 Dubai Dolphinarium"
+            bottomRightText="All rights reserved."
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}