Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+
+const globalNavItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "/about" },
+  { name: "Features", id: "/features" },
+  { name: "Metrics", id: "/#metrics" },
+  { name: "Pricing", id: "/#pricing" },
+  { name: "Testimonials", id: "/#testimonials" },
+  { name: "FAQ", id: "/faq" },
+  { name: "Contact", id: "/contact" },
+  { name: "Terms of Service", id: "/terms-of-service" },
+  { name: "Privacy Policy", id: "/privacy-policy" },
+  { name: "Risk Disclaimer", id: "/risk-disclaimer" }
+];
+
+const globalFooterColumns = [
+  {
+    title: "Platform",    items: [
+      { label: "Features", href: "/features" },
+      { label: "Pricing", href: "/#pricing" },
+      { label: "How It Works", href: "/about" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "/about" },
+      { label: "Careers", href: "#" },
+      { label: "Blog", href: "#" }
+    ]
+  },
+  {
+    title: "Support",    items: [
+      { label: "FAQ", href: "/faq" },
+      { label: "Help Center", href: "#" },
+      { label: "Contact Us", href: "/contact" }
+    ]
+  },
+  {
+    title: "Legal",    items: [
+      { label: "Privacy Policy", href: "/privacy-policy" },
+      { label: "Terms of Service", href: "/terms-of-service" },
+      { label: "Risk Disclaimer", href: "/risk-disclaimer" }
+    ]
+  }
+];
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={globalNavItems}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{
+              text: "Sign Up",              href: "/contact"
+            }}
+          />
+        </div>
+
+        <div id="about" data-section="about">
+          <SplitAbout
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="About CryptoSphere"
+            description="CryptoSphere is built on a foundation of innovative blockchain technology, designed to offer a robust and secure environment for all your cryptocurrency needs. We prioritize user control, data privacy, and a seamless experience, empowering you to navigate the digital economy with confidence."
+            bulletPoints={[
+              {
+                title: "Advanced Security",                description: "Multi-layered encryption and cold storage for your assets."
+              },
+              {
+                title: "Decentralized Control",                description: "Empowering users with full ownership and transparent transactions."
+              },
+              {
+                title: "Blazing Fast Transactions",                description: "Leveraging state-of-the-art tech for instant confirmations."
+              }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480182.jpg"
+            imageAlt="Secure blockchain network infrastructure"
+            mediaAnimation="opacity"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={globalFooterColumns}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import CardStack from "@/components/cardStack/CardStack";
+import { Users, FileText, Newspaper, Brain, BarChart, Bell, CreditCard } from "lucide-react";
+
+export default function AdminPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "#features" },
+              { name: "Metrics", id: "#metrics" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Contact", id: "#contact" },
+              { name: "Admin", id: "/admin" }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{
+              text: "Sign Up",              href: "#contact"}}
+          />
+        </div>
+
+        <div id="admin-panel" data-section="admin-panel" className="py-24 sm:py-32">
+          <CardStack
+            animationType="slide-up"
+            gridVariant="two-columns-alternating-heights"
+            title="Admin Panel"
+            description="Manage your platform's users, content, settings, and subscriptions efficiently."
+            className="container"
+            textboxLayout="default"
+          >
+            <div className="flex flex-col items-start gap-4 p-6 bg-card text-foreground rounded-lg shadow-lg">
+              <Users className="w-8 h-8 text-primary-cta" />
+              <h3 className="text-xl font-semibold">User Management</h3>
+              <p className="text-muted-foreground">Manage user accounts, roles, and permissions.</p>
+            </div>
+            <div className="flex flex-col items-start gap-4 p-6 bg-card text-foreground rounded-lg shadow-lg">
+              <FileText className="w-8 h-8 text-primary-cta" />
+              <h3 className="text-xl font-semibold">Content Management</h3>
+              <p className="text-muted-foreground">Create, edit, and publish website content, pages, and media.</p>
+            </div>
+            <div className="flex flex-col items-start gap-4 p-6 bg-card text-foreground rounded-lg shadow-lg">
+              <Newspaper className="w-8 h-8 text-primary-cta" />
+              <h3 className="text-xl font-semibold">News Management</h3>
+              <p className="text-muted-foreground">Oversee news articles, announcements, and blog posts.</p>
+            </div>
+            <div className="flex flex-col items-start gap-4 p-6 bg-card text-foreground rounded-lg shadow-lg">
+              <Brain className="w-8 h-8 text-primary-cta" />
+              <h3 className="text-xl font-semibold">AI Settings</h3>
+              <p className="text-muted-foreground">Configure AI-driven features and automations.</p>
+            </div>
+            <div className="flex flex-col items-start gap-4 p-6 bg-card text-foreground rounded-lg shadow-lg">
+              <BarChart className="w-8 h-8 text-primary-cta" />
+              <h3 className="text-xl font-semibold">Website Analytics</h3>
+              <p className="text-muted-foreground">Monitor website performance, traffic, and user behavior.</p>
+            </div>
+            <div className="flex flex-col items-start gap-4 p-6 bg-card text-foreground rounded-lg shadow-lg">
+              <Bell className="w-8 h-8 text-primary-cta" />
+              <h3 className="text-xl font-semibold">Alert Management</h3>
+              <p className="text-muted-foreground">Set up and manage system alerts and notifications.</p>
+            </div>
+            <div className="flex flex-col items-start gap-4 p-6 bg-card text-foreground rounded-lg shadow-lg">
+              <CreditCard className="w-8 h-8 text-primary-cta" />
+              <h3 className="text-xl font-semibold">Subscription Management</h3>
+              <p className="text-muted-foreground">Handle user subscriptions, plans, and billing.</p>
+            </div>
+          </CardStack>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Platform",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "How It Works", href: "#about" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" },
+                ],
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Help Center", href: "#" },
+                  { label: "Contact Us", href: "#contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Disclaimer", href: "#" },
+                ],
+              },
+            ]}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+
+const globalNavItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "/about" },
+  { name: "Features", id: "/features" },
+  { name: "Metrics", id: "/#metrics" },
+  { name: "Pricing", id: "/#pricing" },
+  { name: "Testimonials", id: "/#testimonials" },
+  { name: "FAQ", id: "/faq" },
+  { name: "Contact", id: "/contact" },
+  { name: "Terms of Service", id: "/terms-of-service" },
+  { name: "Privacy Policy", id: "/privacy-policy" },
+  { name: "Risk Disclaimer", id: "/risk-disclaimer" }
+];
+
+const globalFooterColumns = [
+  {
+    title: "Platform",    items: [
+      { label: "Features", href: "/features" },
+      { label: "Pricing", href: "/#pricing" },
+      { label: "How It Works", href: "/about" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "/about" },
+      { label: "Careers", href: "#" },
+      { label: "Blog", href: "#" }
+    ]
+  },
+  {
+    title: "Support",    items: [
+      { label: "FAQ", href: "/faq" },
+      { label: "Help Center", href: "#" },
+      { label: "Contact Us", href: "/contact" }
+    ]
+  },
+  {
+    title: "Legal",    items: [
+      { label: "Privacy Policy", href: "/privacy-policy" },
+      { label: "Terms of Service", href: "/terms-of-service" },
+      { label: "Risk Disclaimer", href: "/risk-disclaimer" }
+    ]
+  }
+];
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={globalNavItems}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{
+              text: "Sign Up",              href: "/contact"
+            }}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{
+              variant: "rotated-rays-animated"
+            }}
+            text="Ready to step into the future of finance? Join CryptoSphere today and take control of your digital assets."
+            buttons={[
+              {
+                text: "Join CryptoSphere",                href: "/"
+              },
+              {
+                text: "Contact Support",                href: "/contact"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={globalFooterColumns}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import { LayoutDashboard } from "lucide-react"; // Import necessary icons
+
+export default function DashboardPage() {
+  const commonNavItems = [
+    { name: "Home", id: "#home" },
+    { name: "Dashboard", id: "/dashboard" },
+    { name: "Profile", id: "/profile" },
+    { name: "Features", id: "#features" },
+    { name: "Metrics", id: "#metrics" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "#contact" },
+  ];
+
+  const dummyWatchlistProducts = [
+    { id: "crypto1", name: "Bitcoin", category: "Cryptocurrency", price: "$65,000", rating: 5, reviewCount: "10k+", imageSrc: "http://img.b2bpic.net/free-vector/bitcoin-symbol-cryptocurrency-blockchain-technology-background_1017-32766.jpg" },
+    { id: "crypto2", name: "Ethereum", category: "Cryptocurrency", price: "$3,500", rating: 4.8, reviewCount: "8k+", imageSrc: "http://img.b2bpic.net/free-vector/blockchain-ethereum-cryptocurrency-virtual-money-business-vector-illustration_53876-116361.jpg" },
+    { id: "crypto3", name: "Ripple", category: "Cryptocurrency", price: "$0.50", rating: 4.2, reviewCount: "5k+", imageSrc: "http://img.b2bpic.net/free-vector/xrp-ripple-cryptocurrency-coin-flat-vector-illustration_1017-33100.jpg" }
+  ];
+
+  const dashboardFeatures = [
+    { id: "df1", title: "View Market Trends", author: "CryptoSphere", description: "Access real-time market data and analytics for your watchlist.", tags: ["Analytics", "Market"], imageSrc: "http://img.b2bpic.net/free-photo/data-analysis-stock-charts_23-2150935579.jpg" },
+    { id: "df2", title: "Manage Alerts", author: "CryptoSphere", description: "Set price alerts and notifications for significant movements.", tags: ["Notifications", "Watchlist"], imageSrc: "http://img.b2bpic.net/free-photo/financial-trading-charts-digital-screen_53876-101119.jpg" },
+    { id: "df3", title: "Quick Buy/Sell", author: "CryptoSphere", description: "Execute trades directly from your dashboard with one click.", tags: ["Trading", "Efficiency"], imageSrc: "http://img.b2bpic.net/free-photo/young-man-trading-online-stock-market-mobile-app-phone-investing-currency_23-2149176461.jpg" }
+  ];
+
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={commonNavItems}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{ text: "Sign Up", href: "#contact" }}
+          />
+        </div>
+
+        <div id="dashboard-hero" data-section="dashboard-hero">
+          <FeatureCardTwentyFour
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="Welcome to Your Dashboard"
+            description="Manage your assets, track performance, and customize your experience."
+            tag="Personalized Control"
+            tagIcon={LayoutDashboard}
+            features={dashboardFeatures}
+          />
+        </div>
+
+        <div id="watchlist" data-section="watchlist">
+          <ProductCatalog
+            layout="section"
+            products={dummyWatchlistProducts}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Platform",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "How It Works", href: "#about" },
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Help Center", href: "#" },
+                  { label: "Contact Us", href: "#contact" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Disclaimer", href: "#" }
+                ]
+              }
+            ]}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/features/page.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+
+const globalNavItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "/about" },
+  { name: "Features", id: "/features" },
+  { name: "Metrics", id: "/#metrics" },
+  { name: "Pricing", id: "/#pricing" },
+  { name: "Testimonials", id: "/#testimonials" },
+  { name: "FAQ", id: "/faq" },
+  { name: "Contact", id: "/contact" },
+  { name: "Terms of Service", id: "/terms-of-service" },
+  { name: "Privacy Policy", id: "/privacy-policy" },
+  { name: "Risk Disclaimer", id: "/risk-disclaimer" }
+];
+
+const globalFooterColumns = [
+  {
+    title: "Platform",    items: [
+      { label: "Features", href: "/features" },
+      { label: "Pricing", href: "/#pricing" },
+      { label: "How It Works", href: "/about" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "/about" },
+      { label: "Careers", href: "#" },
+      { label: "Blog", href: "#" }
+    ]
+  },
+  {
+    title: "Support",    items: [
+      { label: "FAQ", href: "/faq" },
+      { label: "Help Center", href: "#" },
+      { label: "Contact Us", href: "/contact" }
+    ]
+  },
+  {
+    title: "Legal",    items: [
+      { label: "Privacy Policy", href: "/privacy-policy" },
+      { label: "Terms of Service", href: "/terms-of-service" },
+      { label: "Risk Disclaimer", href: "/risk-disclaimer" }
+    ]
+  }
+];
+
+export default function FeaturesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={globalNavItems}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{
+              text: "Sign Up",              href: "/contact"
+            }}
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              {
+                id: "f1",                title: "Real-time Analytics",                subtitle: "Monitor market trends with advanced charting tools.",                category: "Trading",                value: "Insightful"
+              },
+              {
+                id: "f2",                title: "Multi-Asset Wallet",                subtitle: "Securely store a diverse portfolio of cryptocurrencies.",                category: "Management",                value: "Versatile"
+              },
+              {
+                id: "f3",                title: "Instant Swaps",                subtitle: "Exchange assets seamlessly with minimal fees.",                category: "Exchange",                value: "Efficient"
+              },
+              {
+                id: "f4",                title: "Staking & Yield Farming",                subtitle: "Earn passive income on your holdings.",                category: "Earning",                value: "Profitable"
+              }
+            ]}
+            title="Key Features of CryptoSphere"
+            description="Explore the powerful tools and functionalities that make CryptoSphere the leading choice for managing your digital wealth."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={globalFooterColumns}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import Input from '@/components/form/Input';
+import ButtonIconArrow from '@/components/button/ButtonIconArrow';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Login attempt with:", { email, password });
+    // Implement actual login logic here
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="inset"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "#features" },
+              { name: "Metrics", id: "#metrics" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Login", id: "/login" },
+              { name: "Contact", id: "#contact" },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{ text: "Sign Up", href: "/register" }}
+          />
+        </div>
+
+        <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-md w-full space-y-8 p-10 bg-card rounded-lg shadow-xl">
+            <div>
+              <h2 className="mt-6 text-center text-3xl font-extrabold text-foreground">
+                Sign in to your account
+              </h2>
+            </div>
+            <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+              <div className="rounded-md shadow-sm -space-y-px">
+                <div>
+                  <label htmlFor="email-address" className="sr-only">Email address</label>
+                  <Input
+                    id="email-address"
+                    type="email"
+                    required
+                    placeholder="Email address"
+                    value={email}
+                    onChange={setEmail}
+                    className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-cta focus:border-primary-cta focus:z-10 sm:text-sm bg-background-accent text-foreground"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="password" className="sr-only">Password</label>
+                  <Input
+                    id="password"
+                    type="password"
+                    required
+                    placeholder="Password"
+                    value={password}
+                    onChange={setPassword}
+                    className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-cta focus:border-primary-cta focus:z-10 sm:text-sm bg-background-accent text-foreground"
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="text-sm">
+                  <Link href="/forgot-password" className="font-medium text-primary-cta hover:text-accent">
+                    Forgot your password?
+                  </Link>
+                </div>
+              </div>
+
+              <div>
+                <ButtonIconArrow
+                  text="Sign in"
+                  type="submit"
+                  className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-accent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                />
+              </div>
+            </form>
+            <div className="text-center text-sm text-foreground">
+              Don't have an account?{" "}
+              <Link href="/register" className="font-medium text-primary-cta hover:text-accent">
+                Sign up
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Platform",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "How It Works", href: "#about" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" },
+                ],
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Help Center", href: "#" },
+                  { label: "Contact Us", href: "#contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Disclaimer", href: "#" },
+                ],
+              },
+            ]}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -60,9 +60,9 @@ export default function LandingPage() {
       <HeroBillboard
       background={{
         variant: "downward-rays-animated-grid"}}
-      title="Unlock the Future of Finance with CryptoSphere"
-      description="Trade, invest, and manage your digital assets securely on our cutting-edge decentralized platform. Experience unparalleled speed, transparency, and control."
-      tag="Decentralized. Secure. Transparent."
+      title="Empower Your Digital Future with AI-Enhanced CryptoSphere"
+      description="Experience next-generation security, intelligent trading insights, and seamless management of your digital assets on our cutting-edge decentralized platform."
+      tag="AI-Powered. Secure. Transparent."
       buttons={[
         {
           text: "Get Started",          href: "#features"},
@@ -94,6 +94,8 @@ export default function LandingPage() {
           type: "text",          text: "Global access"},
         {
           type: "text",          text: "Decentralized future"},
+        {
+          type: "text",          text: "AI-Driven Insights"},
         {
           type: "text",          text: "24/7 Support"},
       ]}
@@ -104,15 +106,17 @@ export default function LandingPage() {
       <SplitAbout
       textboxLayout="default"
       useInvertedBackground={true}
-      title="About CryptoSphere"
-      description="CryptoSphere is built on a foundation of innovative blockchain technology, designed to offer a robust and secure environment for all your cryptocurrency needs. We prioritize user control, data privacy, and a seamless experience, empowering you to navigate the digital economy with confidence."
+      title="About CryptoSphere: AI, Security & Decentralization"
+      description="CryptoSphere is built on a foundation of innovative blockchain technology, further enhanced with artificial intelligence, designed to offer a robust and highly secure environment for all your cryptocurrency needs. We prioritize user control, data privacy, and a seamless experience, empowering you to navigate the digital economy with confidence."
       bulletPoints={[
         {
-          title: "Advanced Security",          description: "Multi-layered encryption and cold storage for your assets."},
+          title: "Advanced Security",          description: "Multi-layered encryption, AI-driven fraud detection, and cold storage for your assets."},
         {
           title: "Decentralized Control",          description: "Empowering users with full ownership and transparent transactions."},
         {
           title: "Blazing Fast Transactions",          description: "Leveraging state-of-the-art tech for instant confirmations."},
+        {
+          title: "AI-Powered Insights",          description: "Gain a competitive edge with intelligent market analysis and predictive modeling."}
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480182.jpg"
       imageAlt="Secure blockchain network infrastructure"
@@ -127,7 +131,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",          title: "Real-time Analytics",          subtitle: "Monitor market trends with advanced charting tools.",          category: "Trading",          value: "Insightful"},
+          id: "f1",          title: "Real-time Analytics",          subtitle: "Leverage AI-driven insights for predictive market analysis.",          category: "Trading",          value: "Intelligent"},
         {
           id: "f2",          title: "Multi-Asset Wallet",          subtitle: "Securely store a diverse portfolio of cryptocurrencies.",          category: "Management",          value: "Versatile"},
         {
@@ -232,7 +236,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "BlockGuard Security",        "Quantum Analytics",        "DeFi Innovations",        "Crypto Ventures Group",        "Ledger Core Solutions",        "NovaChain Infrastructure",        "VaultGuard Wallets"]}
+        "BlockGuard Security",        "Quantum Analytics",        "DeFi Innovations",        "Crypto Ventures Group",        "Ledger Core Solutions",        "NovaChain Infrastructure",        "VaultGuard Wallets", "AI Finance Lab", "NeuralChain Security"]}
       title="Trusted by Industry Leaders"
       description="Our partnerships with top-tier firms ensure the highest standards of security and innovation."
       speed={40}
@@ -246,7 +250,7 @@ export default function LandingPage() {
         {
           id: "q1",          title: "What is CryptoSphere?",          content: "CryptoSphere is a decentralized cryptocurrency trading platform that allows users to securely buy, sell, and manage a wide range of digital assets."},
         {
-          id: "q2",          title: "Is my data secure?",          content: "Yes, we employ advanced encryption, multi-factor authentication, and cold storage solutions to ensure the highest level of security for your data and assets."},
+          id: "q2",          title: "Is my data secure?",          content: "Yes, we employ advanced encryption, multi-factor authentication, AI-driven anti-fraud systems, bot protection, and cold storage solutions to ensure the highest level of security for your data and assets."},
         {
           id: "q3",          title: "How do I get started?",          content: "Simply sign up, complete our quick verification process, and fund your wallet to begin trading instantly."},
       ]}

src/app/profile/page.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import { User, ShieldCheck, Mail, Settings2 } from "lucide-react"; // Import necessary icons
+
+export default function ProfilePage() {
+  const commonNavItems = [
+    { name: "Home", id: "#home" },
+    { name: "Dashboard", id: "/dashboard" },
+    { name: "Profile", id: "/profile" },
+    { name: "Features", id: "#features" },
+    { name: "Metrics", id: "#metrics" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "#contact" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={commonNavItems}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{ text: "Sign Up", href: "#contact" }}
+          />
+        </div>
+
+        <div id="profile-settings" data-section="profile-settings">
+          <SplitAbout
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="User Profile Settings"
+            description="Manage your personal information, account security, and notification preferences here. Keep your profile up-to-date for a seamless experience."
+            tag="Account Management"
+            tagIcon={Settings2}
+            bulletPoints={[
+              {
+                title: "Personal Details",                description: "Update your name, email, and contact information.",                icon: User,
+              },
+              {
+                title: "Security Settings",                description: "Change password, set up 2FA, and review login activity.",                icon: ShieldCheck,
+              },
+              {
+                title: "Notification Preferences",                description: "Customize how you receive alerts and updates.",                icon: Mail,
+              },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/user-settings-with-cogs_53876-104990.jpg" // Placeholder image for settings
+            imageAlt="User profile settings interface"
+            mediaAnimation="opacity"
+          />
+        </div>
+
+        <div id="customize-profile" data-section="customize-profile">
+          <ContactCTA
+            tag="Profile Customization"
+            title="Customize Your Profile"
+            description="Personalize your CryptoSphere experience. Upload a profile picture, choose a display name, and set your preferences."
+            buttons={[
+              { text: "Edit Profile", href: "#" },
+              { text: "Privacy Settings", href: "#" },
+            ]}
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Platform",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "How It Works", href: "#about" },
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Help Center", href: "#" },
+                  { label: "Contact Us", href: "#contact" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Disclaimer", href: "#" }
+                ]
+              }
+            ]}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/register/page.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import Input from '@/components/form/Input';
+import ButtonIconArrow from '@/components/button/ButtonIconArrow';
+import Link from 'next/link';
+
+export default function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      alert("Passwords do not match!");
+      return;
+    }
+    console.log("Registration attempt with:", { email, password });
+    // Implement actual registration logic here
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="inset"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "#features" },
+              { name: "Metrics", id: "#metrics" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Login", id: "/login" },
+              { name: "Contact", id: "#contact" },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{ text: "Sign Up", href: "/register" }}
+          />
+        </div>
+
+        <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-md w-full space-y-8 p-10 bg-card rounded-lg shadow-xl">
+            <div>
+              <h2 className="mt-6 text-center text-3xl font-extrabold text-foreground">
+                Create an account
+              </h2>
+            </div>
+            <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+              <div className="rounded-md shadow-sm -space-y-px">
+                <div>
+                  <label htmlFor="email-address" className="sr-only">Email address</label>
+                  <Input
+                    id="email-address"
+                    type="email"
+                    required
+                    placeholder="Email address"
+                    value={email}
+                    onChange={setEmail}
+                    className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-cta focus:border-primary-cta focus:z-10 sm:text-sm bg-background-accent text-foreground"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="password" className="sr-only">Password</label>
+                  <Input
+                    id="password"
+                    type="password"
+                    required
+                    placeholder="Password"
+                    value={password}
+                    onChange={setPassword}
+                    className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary-cta focus:border-primary-cta focus:z-10 sm:text-sm bg-background-accent text-foreground"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="confirm-password" className="sr-only">Confirm Password</label>
+                  <Input
+                    id="confirm-password"
+                    type="password"
+                    required
+                    placeholder="Confirm Password"
+                    value={confirmPassword}
+                    onChange={setConfirmPassword}
+                    className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-cta focus:border-primary-cta focus:z-10 sm:text-sm bg-background-accent text-foreground"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <ButtonIconArrow
+                  text="Register"
+                  type="submit"
+                  className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-accent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                />
+              </div>
+            </form>
+            <div className="text-center text-sm text-foreground">
+              Already have an account?{" "}
+              <Link href="/login" className="font-medium text-primary-cta hover:text-accent">
+                Sign in
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Platform",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "How It Works", href: "#about" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" },
+                ],
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Help Center", href: "#" },
+                  { label: "Contact Us", href: "#contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Disclaimer", href: "#" },
+                ],
+              },
+            ]}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/verify-account/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import Link from 'next/link';
+
+export default function VerifyAccountPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="inset"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "#features" },
+              { name: "Metrics", id: "#metrics" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Login", id: "/login" },
+              { name: "Contact", id: "#contact" },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
+            logoAlt="CryptoSphere Logo"
+            brandName="CryptoSphere"
+            button={{ text: "Sign Up", href: "/register" }}
+          />
+        </div>
+
+        <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-md w-full space-y-8 p-10 bg-card rounded-lg shadow-xl text-center">
+            <h2 className="mt-6 text-3xl font-extrabold text-foreground">
+              Verify Your Account
+            </h2>
+            <p className="text-foreground">
+              A verification link has been sent to your email address. Please check your inbox and click the link to activate your account.
+            </p>
+            <p className="text-foreground">
+              Didn't receive the email? Check your spam folder or{" "}
+              <Link href="#" className="font-medium text-primary-cta hover:text-accent">
+                resend verification email
+              </Link>
+            </p>
+            <Link href="/login" className="mt-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-cta hover:bg-accent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta">
+              Back to Login
+            </Link>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Platform",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "How It Works", href: "#about" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" },
+                ],
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Help Center", href: "#" },
+                  { label: "Contact Us", href: "#contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Disclaimer", href: "#" },
+                ],
+              },
+            ]}
+            bottomLeftText="© 2024 CryptoSphere. All rights reserved."
+            bottomRightText="Built with Webild"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}