Update src/app/chat/page.tsx

Merge version_2 into main

src/app/chat/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Bot, User, Send } from "lucide-react";
+import { useState } from "react";
+
+export default function ChatPage() {
+  const [messages, setMessages] = useState([
+    { role: "bot", content: "Hello! I'm Claude. How can I assist you with your liquid glass interface today?" }
+  ]);
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="fluid"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[{ name: "Home", id: "/" }, { name: "Chat", id: "/chat" }]}
+          brandName="Claude AI"
+        />
+
+        <main className="min-h-screen pt-32 pb-20 flex flex-col items-center px-4 md:px-8">
+          <div className="max-w-4xl w-full flex flex-col gap-6">
+            <div className="relative overflow-hidden bg-white/5 backdrop-blur-3xl border border-white/20 rounded-3xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.12)] flex-grow min-h-[500px] flex flex-col gap-6">
+              <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none" />
+              {messages.map((msg, i) => (
+                <div key={i} className={`relative flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
+                  <div className="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center shrink-0">
+                    {msg.role === 'bot' ? <Bot size={20} className="text-white" /> : <User size={20} className="text-white" />}
+                  </div>
+                  <div className={`p-4 px-6 rounded-2xl backdrop-blur-md border border-white/10 shadow-lg ${msg.role === 'user' ? 'bg-primary-cta text-white' : 'bg-black/20 text-white'}`}>
+                    {msg.content}
+                  </div>
+                </div>
+              ))}
+            </div>
+            
+            <div className="bg-white/5 backdrop-blur-3xl border border-white/20 rounded-full p-2 flex items-center gap-2 shadow-xl">
+              <input 
+                className="flex-grow bg-transparent px-6 py-4 outline-none text-white placeholder:text-white/40"
+                placeholder="Type your message..."
+              />
+              <button className="p-4 rounded-full bg-primary-cta text-white hover:opacity-90 transition-opacity">
+                <Send size={20} />
+              </button>
+            </div>
+          </div>
+        </main>
+
+        <FooterBaseCard
+          logoText="Claude AI"
+          columns={[{ title: "Platform", items: [{ label: "API", href: "#" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -31,12 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Features",          id: "features"},
-        {
-          name: "Pricing",          id: "pricing"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Contact", id: "contact" },
+        { name: "Chat", id: "/chat" },
       ]}
       brandName="Claude AI"
     />
@@ -49,36 +47,12 @@ export default function LandingPage() {
       title="Intelligence that understands."
       description="Experience the next evolution of conversational AI with a fluid, liquid-glass interface designed for seamless interaction."
       buttons={[
-        {
-          text: "Get Started",          href: "#contact"},
+        { text: "Get Started", href: "#contact" },
+        { text: "Try Chat", href: "/chat" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/aesthetic-background-with-abstract-neon-led-light-effect_53876-108131.jpg"
       imageAlt="Claude AI Liquid Glass Interface"
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-smiley-guy-looking-someone_23-2148311252.jpg",          alt: "User 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/smiley-elder-woman-kitchen-waving-tablet_23-2148419313.jpg",          alt: "User 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/joyous-teenager-filming-content-online-streaming-channel_482257-118955.jpg",          alt: "User 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/relaxed-woman-sitting-sofa-with-digital-tablet_329181-834.jpg",          alt: "User 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/world-aids-day-awareness-illustration_23-2151882188.jpg",          alt: "User 5"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Next-Gen AI"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/aesthetic-background-with-gradient-neon-led-light-effect_53876-124180.jpg",          alt: "Feature 1"},
-        {
-          type: "text",          text: "Liquid Glass Design"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/abstract-flowing-gradient-waves-blue-purple_84443-75015.jpg",          alt: "Feature 2"},
-        {
-          type: "text",          text: "High Context"},
-      ]}
     />
   </div>
 
@@ -101,15 +75,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          icon: Star,
-          title: "Contextual Mastery",          description: "Claude understands nuance, tone, and complex reasoning in every interaction."},
-        {
-          icon: Code,
-          title: "Advanced Coding",          description: "Write, debug, and optimize complex software with an AI that speaks your language."},
-        {
-          icon: ShieldCheck,
-          title: "Safety First",          description: "Engineered with foundational safety protocols for reliable, responsible output."},
+        { icon: Star, title: "Contextual Mastery", description: "Claude understands nuance, tone, and complex reasoning in every interaction." },
+        { icon: Code, title: "Advanced Coding", description: "Write, debug, and optimize complex software with an AI that speaks your language." },
+        { icon: ShieldCheck, title: "Safety First", description: "Engineered with foundational safety protocols for reliable, responsible output." },
       ]}
       title="Features that redefine."
       description="Harness powerful capabilities to elevate your productivity and creative work."
@@ -122,15 +90,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",          icon: Zap,
-          title: "Response Speed",          value: "45ms"},
-        {
-          id: "m2",          icon: Lightbulb,
-          title: "Context Window",          value: "200k"},
-        {
-          id: "m3",          icon: CheckCircle2,
-          title: "Accuracy",          value: "99.9%"},
+        { id: "m1", icon: Zap, title: "Response Speed", value: "45ms" },
+        { id: "m2", icon: Lightbulb, title: "Context Window", value: "200k" },
+        { id: "m3", icon: CheckCircle2, title: "Accuracy", value: "99.9%" },
       ]}
       title="Performance metrics."
       description="Quantifiable impact for every project."
@@ -143,21 +105,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",          name: "Alex River",          handle: "@ariver",          testimonial: "Claude has completely transformed how I approach creative writing.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/night-workaholic_1098-13344.jpg"},
-        {
-          id: "t2",          name: "Jamie Lee",          handle: "@jlee",          testimonial: "The reasoning capabilities are miles ahead of competitors.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-portrait_23-2151998016.jpg"},
-        {
-          id: "t3",          name: "Sam Frost",          handle: "@samf",          testimonial: "Seamless integration and intuitive interface, simply brilliant.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134201.jpg"},
-        {
-          id: "t4",          name: "Jordan P.",          handle: "@jordanp",          testimonial: "Unparalleled speed and accuracy in every single query.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-having-videoconference_23-2147859216.jpg"},
-        {
-          id: "t5",          name: "Morgan D.",          handle: "@mdaw",          testimonial: "Essential for my daily research tasks, absolutely reliable.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-pressing-screen_53876-101866.jpg"},
+        { id: "t1", name: "Alex River", handle: "@ariver", testimonial: "Claude has completely transformed how I approach creative writing.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/night-workaholic_1098-13344.jpg" },
+        { id: "t2", name: "Jamie Lee", handle: "@jlee", testimonial: "The reasoning capabilities are miles ahead of competitors.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-portrait_23-2151998016.jpg" },
+        { id: "t3", name: "Sam Frost", handle: "@samf", testimonial: "Seamless integration and intuitive interface, simply brilliant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134201.jpg" },
       ]}
       showRating={true}
       title="Trusted globally."
@@ -169,12 +119,8 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",          title: "How is Claude different?",          content: "Claude excels in long-context reasoning and human-like nuance."},
-        {
-          id: "f2",          title: "Is my data private?",          content: "Security is our top priority; your data is encrypted."},
-        {
-          id: "f3",          title: "Can I integrate Claude?",          content: "Yes, via our robust API for your specific needs."},
+        { id: "f1", title: "How is Claude different?", content: "Claude excels in long-context reasoning and human-like nuance." },
+        { id: "f2", title: "Is my data private?", content: "Security is our top priority; your data is encrypted." },
       ]}
       sideTitle="Questions?"
       sideDescription="Find answers to the most common queries about Claude."
@@ -188,13 +134,10 @@ export default function LandingPage() {
       title="Get in touch."
       description="Start building your future with Claude today."
       inputs={[
-        {
-          name: "name",          type: "text",          placeholder: "Your Name"},
-        {
-          name: "email",          type: "email",          placeholder: "Email Address"},
+        { name: "name", type: "text", placeholder: "Your Name" },
+        { name: "email", type: "email", placeholder: "Email Address" },
       ]}
-      textarea={{
-        name: "message",        placeholder: "Tell us about your project..."}}
+      textarea={{ name: "message", placeholder: "Tell us about your project..." }}
       imageSrc="http://img.b2bpic.net/free-photo/colorful-gradient-background-with-neon-led-light_53876-108148.jpg"
     />
   </div>
@@ -203,26 +146,12 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="Claude AI"
       columns={[
-        {
-          title: "Platform",          items: [
-            {
-              label: "API",              href: "#"},
-            {
-              label: "Features",              href: "#features"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Careers",              href: "#"},
-          ],
-        },
+        { title: "Platform", items: [{ label: "API", href: "#" }, { label: "Features", href: "#features" }] },
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}