Update src/app/page.tsx

Merge version_2 into main

src/app/chatbot/page.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React, { useState } from 'react';
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import Input from '@/components/form/Input';
+
+interface Message {
+  id: number;
+  text: string;
+  sender: 'user' | 'bot';
+}
+
+export default function ChatbotPage() {
+  const [messages, setMessages] = useState<Message[]>([
+    { id: 1, text: "Hello! How can I assist you with your safari experience today?", sender: "bot" },
+  ]);
+  const [inputValue, setInputValue] = useState("");
+
+  const handleSendMessage = () => {
+    if (inputValue.trim()) {
+      const newUserMessage: Message = {
+        id: messages.length + 1,
+        text: inputValue,
+        sender: "user"};
+      setMessages((prevMessages) => [...prevMessages, newUserMessage]);
+      setInputValue("");
+
+      setTimeout(() => {
+        const botResponse: Message = {
+          id: messages.length + 2,
+          text: "Thank you for your message. Our team will get back to you shortly!",          sender: "bot"};
+        setMessages((prevMessages) => [...prevMessages, botResponse]);
+      }, 1000);
+    }
+  };
+
+  const navbarProps = {
+    navItems: [
+      {
+        name: "Experience",        id: "#experience"
+      },
+      {
+        name: "Territory",        id: "#territory"
+      },
+      {
+        name: "Species",        id: "#species"
+      },
+      {
+        name: "Gallery",        id: "#gallery"
+      },
+      {
+        name: "Inquiry",        id: "#inquiry"
+      },
+      {
+        name: "Chatbot",        id: "/chatbot"
+      }
+    ],
+    logoSrc: "http://img.b2bpic.net/free-photo/top-view-light-box-with-paper-planet-animals-animal-day_23-2148668916.jpg",    logoAlt: "Niwa Cameroon logo",    brandName: "Niwa Cameroon",    bottomLeftText: "Niwa Cameroon",    bottomRightText: "Private Safari",    button: {
+      text: "Plan Your Safari",      href: "#inquiry"},
+  };
+
+  const footerProps = {
+    columns: [
+      {
+        title: "Explore",        items: [
+          {
+            label: "Experience",            href: "#experience"
+          },
+          {
+            label: "Territory",            href: "#territory"
+          },
+          {
+            label: "Species",            href: "#species"
+          },
+        ],
+      },
+      {
+        title: "Connect",        items: [
+          {
+            label: "Inquiry",            href: "#inquiry"
+          },
+          {
+            label: "WhatsApp",            href: "https://wa.me/000000000000"
+          },
+          {
+            label: "Email",            href: "mailto:info@niwacameroon.com"
+          },
+        ],
+      },
+      {
+        title: "Legal",        items: [
+          {
+            label: "Privacy Policy",            href: "#"
+          },
+          {
+            label: "Terms of Service",            href: "#"
+          },
+        ],
+      },
+    ],
+    bottomLeftText: "Niwa Cameroon — Private hunting safaris in Cameroon.",    bottomRightText: "Designed in a quiet luxury editorial style."};
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen {...navbarProps} />
+        </div>
+
+        <div className="min-h-[calc(100vh-100px)] flex flex-col justify-between items-center py-20 px-4 sm:px-6 lg:px-8 bg-background relative z-10">
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-foreground text-center mb-12">
+            Safari Chat Assistant
+          </h1>
+          <div className="w-full max-w-2xl bg-card rounded-3xl shadow-xl overflow-hidden border border-gray-700/50">
+            <div className="h-96 overflow-y-auto p-6 space-y-4">
+              {messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={`flex ${
+                    message.sender === "user" ? "justify-end" : "justify-start"
+                  }`}
+                >
+                  <div
+                    className={`max-w-[70%] p-4 rounded-xl ${
+                      message.sender === "user"
+                        ? "bg-primary-cta text-primary-cta-foreground rounded-br-none"
+                        : "bg-accent text-accent-foreground rounded-bl-none"
+                    } shadow-md`}
+                  >
+                    <p className="text-sm">{message.text}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex p-4 border-t border-gray-700/50 bg-background-accent">
+              <Input
+                value={inputValue}
+                onChange={setInputValue}
+                placeholder="Type your message..."
+                className="flex-1 mr-4 p-3 rounded-xl border border-gray-600/50 bg-background focus:ring-2 focus:ring-primary-cta focus:border-primary-cta text-foreground transition-all duration-200"
+                ariaLabel="Chat input field"
+              />
+              <button
+                onClick={handleSendMessage}
+                className="px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-xl font-semibold shadow-md hover:bg-primary-cta/90 transition-all duration-200"
+                aria-label="Send message"
+              >
+                Send
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple {...footerProps} />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -38,6 +38,8 @@ export default function LandingPage() {
           name: "Gallery",          id: "#gallery"},
         {
           name: "Inquiry",          id: "#inquiry"},
+        {
+          name: "Chatbot",          id: "/chatbot"}
       ]}
       logoSrc="http://img.b2bpic.net/free-photo/top-view-light-box-with-paper-planet-animals-animal-day_23-2148668916.jpg"
       logoAlt="Niwa Cameroon logo"
@@ -45,7 +47,7 @@ export default function LandingPage() {
       bottomLeftText="Niwa Cameroon"
       bottomRightText="Private Safari"
       button={{
-        text: "Plan Your Safari",        href: "#inquiry"}}
+        text: "Plan Your Safari",          href: "#inquiry"}}
     />
   </div>
 
@@ -142,7 +144,7 @@ export default function LandingPage() {
 
   <div id="experience-details" data-section="experience-details">
       <FeatureCardTwentyEight
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
@@ -162,7 +164,7 @@ export default function LandingPage() {
 
   <div id="gallery" data-section="gallery">
       <BlogCardThree
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       useInvertedBackground={false}
       title="Moments of light, texture, and distance."
@@ -240,4 +242,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}