SHA1
--- a/Dockerfile
+++ b/Dockerfile
@@ -0,0 +1,34 @@
 
				+# Build stage
			
 
				+FROM node:18-alpine as builder
			
 
				+
			
 
				+WORKDIR /app
			
 
				+
			
 
				+# Copy package files
			
 
				+COPY package*.json ./
			
 
				+
			
 
				+# Install dependencies
			
 
				+RUN npm ci
			
 
				+
			
 
				+# Copy source code
			
 
				+COPY . .
			
 
				+
			
 
				+# Build the application with environment variable
			
 
				+ARG VITE_API_HOST
			
 
				+ENV VITE_API_HOST=${VITE_API_HOST}
			
 
				+RUN npm run build
			
 
				+
			
 
				+# Runtime stage
			
 
				+FROM node:18-alpine
			
 
				+
			
 
				+WORKDIR /app
			
 
				+
			
 
				+# Install serve to run the application
			
 
				+RUN npm install -g serve
			
 
				+
			
 
				+# Copy built assets from builder
			
 
				+COPY --from=builder /app/dist ./dist
			
 
				+
			
 
				+EXPOSE 5173
			
 
				+
			
 
				+# Run the application
			
 
				+CMD ["serve", "-s", "dist", "-l", "5173"]
			
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,30 @@
 
				+version: '3'
			
 
				+
			
 
				+services:
			
 
				+  traefik:
			
 
				+    image: traefik:v2.10
			
 
				+    command:
			
 
				+      - "--api.insecure=true"
			
 
				+      - "--providers.docker=true"
			
 
				+      - "--providers.docker.exposedbydefault=false"
			
 
				+      - "--entrypoints.web.address=:80"
			
 
				+    ports:
			
 
				+      - "80:80"
			
 
				+      - "8080:8080"
			
 
				+    volumes:
			
 
				+      - /var/run/docker.sock:/var/run/docker.sock:ro
			
 
				+
			
 
				+  app:
			
 
				+    build:
			
 
				+      context: .
			
 
				+      args:
			
 
				+        - VITE_API_HOST=http://${HOSTNAME}
			
 
				+    labels:
			
 
				+      - "traefik.enable=true"
			
 
				+      - "traefik.http.routers.app.rule=Host(`${HOSTNAME}`) && !PathPrefix(`/api`)"
			
 
				+      - "traefik.http.routers.app.entrypoints=web"
			
 
				+      - "traefik.http.services.app.loadbalancer.server.port=5173"
			
 
				+
			
 
				+networks:
			
 
				+  default:
			
 
				+    name: traefik_network
			
--- a/index.html
+++ b/index.html
@@ -3,14 +3,19 @@
 
				 
			
 
				 <head>
			
 
				   <meta charset="UTF-8" />
			
 
				-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
			
 
				+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
			
 
				+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
			
 
				+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
			
 
				+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
			
 
				+  <link rel="manifest" href="/site.webmanifest" />
			
 
				   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
			
 
				   <script src="https://js.stripe.com/v3/"></script>
			
 
				   <script>
			
 
				     window.Stripe = Stripe('');
			
 
				   </script>
			
 
				-  <title>SaaS Platform</title>
			
 
				+  <title>BYOM - Build Your Own Model</title>
			
 
				+  <meta name="description" content="AI-powered platform helping influencers grow their brand through advanced analytics and creative tools." />
			
 
				 </head>
			
 
				 
			
 
				 <body>
			
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/remove_bg_topo.png
+++ b/public/remove_bg_topo.png
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -0,0 +1,19 @@
 
				+{
			
 
				+  "name": "BYOM - Build Your Own Model",
			
 
				+  "short_name": "BYOM",
			
 
				+  "icons": [
			
 
				+    {
			
 
				+      "src": "/android-chrome-192x192.png",
			
 
				+      "sizes": "192x192",
			
 
				+      "type": "image/png"
			
 
				+    },
			
 
				+    {
			
 
				+      "src": "/android-chrome-512x512.png",
			
 
				+      "sizes": "512x512",
			
 
				+      "type": "image/png"
			
 
				+    }
			
 
				+  ],
			
 
				+  "theme_color": "#ffffff",
			
 
				+  "background_color": "#ffffff",
			
 
				+  "display": "standalone"
			
 
				+} 
			
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,8 @@
 
				 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
			
 
				 import { LanguageProvider } from './context/LanguageContext';
			
 
				 import Navbar from './components/Navbar';
			
 
				+import Footer from './components/Footer';
			
 
				+import ScrollToTop from './components/ScrollToTop';
			
 
				 import Home from './pages/Home';
			
 
				 import Pricing from './pages/Pricing';
			
 
				 import Login from './pages/Login';
			
@@ -10,23 +12,98 @@ import RegistrationSuccess from './pages/RegistrationSuccess';
 
				 import Payment from './pages/Payment';
			
 
				 import PaymentSuccess from './pages/PaymentSuccess';
			
 
				 import PaymentCancel from './pages/PaymentCancel';
			
 
				+import About from './pages/About';
			
 
				+import AiTrends from './pages/AiTrends';
			
 
				+import ImageGeneration from './pages/ImageGeneration';
			
 
				+import Analytics from './pages/Analytics';
			
 
				+import BrandGrowth from './pages/BrandGrowth';
			
 
				+import Contact from './pages/Contact';
			
 
				+import Terms from './pages/Terms';
			
 
				+import Privacy from './pages/Privacy';
			
 
				+import { useState, useEffect } from 'react';
			
 
				+import { API_HOST } from './config';
			
 
				 
			
 
				 function App() {
			
 
				+  const [pricingData, setPricingData] = useState(null);
			
 
				+  const [isLoading, setIsLoading] = useState(true);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    const fetchPricingData = async () => {
			
 
				+      try {
			
 
				+        const response = await fetch(`${API_HOST}/api/v1/onboard/products`);
			
 
				+        if (!response.ok) throw new Error('Failed to fetch products');
			
 
				+        const data = await response.json();
			
 
				+        
			
 
				+        // Transform API data to match UI requirements
			
 
				+        const transformedProducts = data.map(product => ({
			
 
				+          name: product.name,
			
 
				+          prices: {
			
 
				+            monthly: product.prices.monthly,
			
 
				+            yearly: product.prices.yearly,
			
 
				+            monthlyPriceId: product.prices.monthly_price_id,
			
 
				+            yearlyPriceId: product.prices.yearly_price_id
			
 
				+          },
			
 
				+          features: product.features,
			
 
				+          description: product.description,
			
 
				+          popular: product.metadata?.is_popular === "true",
			
 
				+          maxUsers: product.max_users,
			
 
				+          storageLimit: product.storage_limit,
			
 
				+          apiRateLimit: product.api_rate_limit,
			
 
				+          supportTier: product.support_tier,
			
 
				+          customDomain: product.custom_domain
			
 
				+        }));
			
 
				+        
			
 
				+        setPricingData(transformedProducts);
			
 
				+      } catch (error) {
			
 
				+        console.error('Error fetching products:', error);
			
 
				+        // Set fallback pricing data
			
 
				+        setPricingData([
			
 
				+          {
			
 
				+            name: 'Starter',
			
 
				+            prices: { monthly: 29, yearly: 290 },
			
 
				+            features: [
			
 
				+              'Basic AI trend analysis',
			
 
				+              '25 AI image generations/month',
			
 
				+              'Basic analytics dashboard',
			
 
				+              'Content calendar',
			
 
				+              'Email support',
			
 
				+              'Single user'
			
 
				+            ],
			
 
				+          },
			
 
				+          // ... other fallback plans
			
 
				+        ]);
			
 
				+      } finally {
			
 
				+        setIsLoading(false);
			
 
				+      }
			
 
				+    };
			
 
				+
			
 
				+    fetchPricingData();
			
 
				+  }, []);
			
 
				+
			
 
				   return (
			
 
				     <LanguageProvider>
			
 
				       <Router>
			
 
				+        <ScrollToTop />
			
 
				         <div className="min-h-screen bg-white">
			
 
				           <Navbar />
			
 
				           <Routes>
			
 
				             <Route path="/" element={<Home />} />
			
 
				-            <Route path="/pricing" element={<Pricing />} />
			
 
				+            <Route path="/pricing" element={<Pricing pricingData={pricingData} isLoading={isLoading} />} />
			
 
				             <Route path="/login" element={<Login />} />
			
 
				-            <Route path="/register" element={<Register />} />
			
 
				+            <Route path="/register" element={<Register pricingData={pricingData} />} />
			
 
				             <Route path="/verify-email" element={<VerifyEmail />} />
			
 
				             <Route path="/registration-success" element={<RegistrationSuccess />} />
			
 
				-            <Route path="/payment" element={<Payment />} />
			
 
				+            <Route path="/payment" element={<Payment pricingData={pricingData} />} />
			
 
				             <Route path="/payment/success" element={<PaymentSuccess />} />
			
 
				             <Route path="/payment/cancel" element={<PaymentCancel />} />
			
 
				+            <Route path="/about" element={<About />} />
			
 
				+            <Route path="/ai-trends" element={<AiTrends />} />
			
 
				+            <Route path="/image-generation" element={<ImageGeneration />} />
			
 
				+            <Route path="/analytics" element={<Analytics />} />
			
 
				+            <Route path="/brand-growth" element={<BrandGrowth />} />
			
 
				+            <Route path="/contact" element={<Contact />} />
			
 
				+            <Route path="/terms" element={<Terms />} />
			
 
				+            <Route path="/privacy" element={<Privacy />} />
			
 
				           </Routes>
			
 
				         </div>
			
 
				       </Router>
			
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,117 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+
			
 
				+function Footer() {
			
 
				+    return (
			
 
				+        <footer className="mt-32 bg-white/80 backdrop-blur-sm relative">
			
 
				+            {/* Gradient border top */}
			
 
				+            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
			
 
				+            
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-16">
			
 
				+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
			
 
				+                    {/* Company Info */}
			
 
				+                    <div>
			
 
				+                        <h4 className="font-light text-2xl tracking-tight relative group mb-4">
			
 
				+                            byom
			
 
				+                            <div className="absolute -right-2 -top-2 w-1.5 h-1.5 bg-brand-purple rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
			
 
				+                        </h4>
			
 
				+                        <p className="text-sm text-gray-500">
			
 
				+                            AI-powered platform helping influencers grow their brand through advanced analytics and creative tools.
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Legal Links */}
			
 
				+                    <div>
			
 
				+                        <h4 className="text-sm font-medium text-gray-900 mb-4">Legal</h4>
			
 
				+                        <ul className="space-y-3">
			
 
				+                            <li>
			
 
				+                                <Link to="/terms" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
			
 
				+                                    Terms of Service
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <Link to="/privacy" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
			
 
				+                                    Privacy Policy
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Company Links */}
			
 
				+                    <div>
			
 
				+                        <h4 className="text-sm font-medium text-gray-900 mb-4">Company</h4>
			
 
				+                        <ul className="space-y-3">
			
 
				+                            <li>
			
 
				+                                <Link to="/about" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
			
 
				+                                    About Us
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <Link to="/careers" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
			
 
				+                                    Careers
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <Link to="/contact" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
			
 
				+                                    Contact
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Social Links */}
			
 
				+                    <div>
			
 
				+                        <h4 className="text-sm font-medium text-gray-900 mb-4">Follow Us</h4>
			
 
				+                        <ul className="space-y-3">
			
 
				+                            <li>
			
 
				+                                <a href="https://twitter.com/byom" target="_blank" rel="noopener noreferrer" 
			
 
				+                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
			
 
				+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
			
 
				+                                    Twitter
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </a>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <a href="https://linkedin.com/company/byom" target="_blank" rel="noopener noreferrer"
			
 
				+                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
			
 
				+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
			
 
				+                                    LinkedIn
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </a>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <a href="https://instagram.com/byom" target="_blank" rel="noopener noreferrer"
			
 
				+                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
			
 
				+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
			
 
				+                                    Instagram
			
 
				+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
			
 
				+                                </a>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Bottom Bar */}
			
 
				+                <div className="mt-16 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 relative">
			
 
				+                    {/* Gradient border top */}
			
 
				+                    <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
			
 
				+                    
			
 
				+                    <p className="text-sm text-gray-500">
			
 
				+                        © {new Date().getFullYear()} BYOM. All rights reserved.
			
 
				+                    </p>
			
 
				+                    <div className="flex items-center gap-2">
			
 
				+                        <span className="text-sm text-gray-500">Made with</span>
			
 
				+                        <span className="text-brand-pink animate-pulse">♥</span>
			
 
				+                        <span className="text-sm text-gray-500">in Paris</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </footer>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Footer;
			
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -22,58 +22,66 @@ function Navbar() {
 
				     }, []);
			
 
				 
			
 
				     return (
			
 
				-        <nav className="fixed w-full bg-white z-50 top-0 py-6">
			
 
				+        <nav className="fixed w-full bg-white/80 backdrop-blur-sm z-50 top-0">
			
 
				+            {/* Gradient border bottom */}
			
 
				+            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
			
 
				+
			
 
				             <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
			
 
				-                <div className="flex justify-between items-center">
			
 
				-                    <Link to="/" className="text-xl font-medium">
			
 
				+                <div className="flex justify-between items-center h-20">
			
 
				+                    {/* Logo */}
			
 
				+                    <Link to="/" className="font-light text-2xl tracking-tight relative group">
			
 
				                         byom
			
 
				+                        <div className="absolute -right-2 -top-2 w-1.5 h-1.5 bg-brand-purple rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
			
 
				                     </Link>
			
 
				 
			
 
				-                    {/* Contact dropdown */}
			
 
				-                    <div className="absolute left-1/2 -translate-x-1/2" ref={dropdownRef}>
			
 
				+                    {/* Center menu */}
			
 
				+                    <div className="flex items-center gap-8" ref={dropdownRef}>
			
 
				+                        {/* Contact button */}
			
 
				                         <button
			
 
				                             onClick={() => setIsOpen(!isOpen)}
			
 
				-                            className="bg-black text-white rounded-full w-auto h-6 text-xs flex items-center justify-center px-4 hover:bg-brand-purple transition-colors"
			
 
				+                            className="text-sm relative group"
			
 
				                         >
			
 
				                             {t('nav.contact')}
			
 
				+                            <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-blue group-hover:w-full transition-all duration-300"></div>
			
 
				                         </button>
			
 
				 
			
 
				                         {/* Dropdown menu */}
			
 
				                         {isOpen && (
			
 
				-                            <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-white rounded-2xl shadow-lg ring-1 ring-black/5 p-4 transform opacity-100 scale-100 transition-all">
			
 
				-                                <div className="space-y-3">
			
 
				-                                    <div className="text-xs text-gray-500 uppercase">
			
 
				-                                        {t('nav.getInTouch')}
			
 
				-                                    </div>
			
 
				-                                    <a
			
 
				-                                        href="mailto:hello@byom.fr"
			
 
				-                                        className="flex items-center gap-2 text-sm text-gray-900 hover:text-brand-purple transition-colors"
			
 
				-                                    >
			
 
				-                                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			
 
				-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
			
 
				-                                        </svg>
			
 
				-                                        hello@byom.fr
			
 
				-                                    </a>
			
 
				+                            <div className="absolute top-full mt-2 left-1/2 -translate-x-1/2 bg-white/80 backdrop-blur-sm rounded-lg shadow-lg border border-gray-100 p-4 min-w-[240px]">
			
 
				+                                <div className="text-sm font-medium text-gray-500 mb-3">
			
 
				+                                    {t('nav.getInTouch')}
			
 
				                                 </div>
			
 
				+                                <a
			
 
				+                                    href="mailto:hello@byom.fr"
			
 
				+                                    className="flex items-center gap-2 text-sm hover:text-brand-purple transition-colors"
			
 
				+                                >
			
 
				+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
			
 
				+                                    hello@byom.fr
			
 
				+                                </a>
			
 
				                             </div>
			
 
				                         )}
			
 
				                     </div>
			
 
				 
			
 
				-                    <div className="flex items-center gap-6">
			
 
				+                    {/* Right menu */}
			
 
				+                    <div className="flex items-center gap-8">
			
 
				                         {/* Language switcher */}
			
 
				                         <button
			
 
				                             onClick={() => setLanguage(language === 'en' ? 'fr' : 'en')}
			
 
				-                            className="text-sm text-gray-500 hover:text-brand-purple transition-colors"
			
 
				+                            className="text-sm font-medium text-gray-500 hover:text-black transition-colors"
			
 
				                         >
			
 
				                             {language.toUpperCase()}
			
 
				                         </button>
			
 
				 
			
 
				-                        <Link to="/pricing" className="text-sm">
			
 
				+                        <Link to="/pricing" className="text-sm font-medium text-gray-500 hover:text-black transition-colors">
			
 
				                             {t('nav.pricing')}
			
 
				                         </Link>
			
 
				-                        <Link to="/login" className="bg-black text-white rounded-full px-6 py-2 text-sm flex items-center gap-2">
			
 
				+
			
 
				+                        <Link 
			
 
				+                            to="/login" 
			
 
				+                            className="bg-black text-white rounded-full px-5 py-2 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center gap-2"
			
 
				+                        >
			
 
				                             <span>{t('nav.login')}</span>
			
 
				-                            <span>→</span>
			
 
				+                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				                         </Link>
			
 
				                     </div>
			
 
				                 </div>
			
@@ -82,4 +90,4 @@ function Navbar() {
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default Navbar; 
			
 
				+export default Navbar;
			
--- a/src/components/ScrollToTop.jsx
+++ b/src/components/ScrollToTop.jsx
@@ -0,0 +1,14 @@
 
				+import { useEffect } from 'react';
			
 
				+import { useLocation } from 'react-router-dom';
			
 
				+
			
 
				+function ScrollToTop() {
			
 
				+    const { pathname } = useLocation();
			
 
				+
			
 
				+    useEffect(() => {
			
 
				+        window.scrollTo(0, 0);
			
 
				+    }, [pathname]);
			
 
				+
			
 
				+    return null;
			
 
				+}
			
 
				+
			
 
				+export default ScrollToTop; 
			
--- a/src/config.js
+++ b/src/config.js
@@ -0,0 +1,2 @@
 
				+export const API_HOST = import.meta.env.VITE_API_HOST || 'http://localhost';
			
 
				+//export const API_HOST = `${baseHost}/api`;
			
--- a/src/context/LanguageContext.jsx
+++ b/src/context/LanguageContext.jsx
@@ -28,15 +28,229 @@ export const translations = {
 
				             description: 'Choose the perfect plan for your brand\'s growth',
			
 
				             mostPopular: 'Most popular',
			
 
				             perMonth: '/month',
			
 
				+            perYear: '/year',
			
 
				             getStarted: 'Get started with',
			
 
				             trial: 'All plans include 14-day free trial. No credit card required'
			
 
				         },
			
 
				+        register: {
			
 
				+            title: 'Create an Account',
			
 
				+            selectedPlan: 'Selected Plan',
			
 
				+            firstName: 'First Name',
			
 
				+            firstNamePlaceholder: 'Enter your first name',
			
 
				+            lastName: 'Last Name',
			
 
				+            lastNamePlaceholder: 'Enter your last name',
			
 
				+            email: 'Email Address',
			
 
				+            emailPlaceholder: 'Enter your email',
			
 
				+        },
			
 
				         login: {
			
 
				             title: 'Welcome back',
			
 
				             subtitle: 'Enter your email to continue',
			
 
				             continue: 'Continue with email',
			
 
				             noAccount: 'Don\'t have an account?',
			
 
				             viewPricing: 'View pricing'
			
 
				+        },
			
 
				+        about: {
			
 
				+            title: 'About BYOM',
			
 
				+            description: 'Empowering creators with AI-driven solutions for brand growth and engagement.',
			
 
				+            mission: {
			
 
				+                title: 'Our Mission',
			
 
				+                description: 'To democratize AI technology for creators and make brand growth accessible to everyone through innovative tools and analytics.'
			
 
				+            },
			
 
				+            timeline: 'Our Journey',
			
 
				+            milestones: {
			
 
				+                founding: 'BYOM Founded',
			
 
				+                founding_desc: 'Started with a vision to revolutionize brand management through AI.',
			
 
				+                launch: 'Platform Launch',
			
 
				+                launch_desc: 'Successfully launched our AI-powered platform to early adopters.',
			
 
				+                growth: 'Global Expansion',
			
 
				+                growth_desc: 'Reached creators in over 50 countries, helping them grow their brands.'
			
 
				+            },
			
 
				+            team: {
			
 
				+                title: 'Meet Our Team',
			
 
				+                sarah: 'Visionary leader with 15 years of experience in AI and brand management.',
			
 
				+                marcus: 'Tech innovator specializing in AI and machine learning solutions.',
			
 
				+                emma: 'Award-winning designer focused on creating intuitive user experiences.'
			
 
				+            },
			
 
				+            roles: {
			
 
				+                ceo: 'CEO & Founder',
			
 
				+                cto: 'CTO',
			
 
				+                design: 'Head of Design'
			
 
				+            },
			
 
				+            contact: {
			
 
				+                title: 'Get in Touch',
			
 
				+                description: `Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.`,
			
 
				+                cta: 'Contact Us'
			
 
				+            }
			
 
				+        },
			
 
				+        aiTrends: {
			
 
				+            title: 'AI Trends',
			
 
				+            description: 'Stay ahead of the curve with our AI trend analysis and insights for brand growth.',
			
 
				+            overview: {
			
 
				+                title: 'Current Trends'
			
 
				+            },
			
 
				+            trends: {
			
 
				+                nlp: {
			
 
				+                    description: 'Advanced language models revolutionizing content creation and analysis.'
			
 
				+                },
			
 
				+                vision: {
			
 
				+                    description: 'Computer vision technologies transforming visual content optimization.'
			
 
				+                },
			
 
				+                generative: {
			
 
				+                    description: 'Generative AI creating new possibilities for brand content and creativity.'
			
 
				+                }
			
 
				+            },
			
 
				+            demo: {
			
 
				+                title: 'See AI in Action',
			
 
				+                description: 'Experience how our AI tools can transform your brand strategy.',
			
 
				+                cta: 'Try Demo'
			
 
				+            },
			
 
				+            stats: {
			
 
				+                title: 'Industry Impact'
			
 
				+            }
			
 
				+        },
			
 
				+        imageGen: {
			
 
				+            title: 'Image Generation',
			
 
				+            description: 'Transform your brand vision into reality with AI-powered image generation.',
			
 
				+            features: {
			
 
				+                title: 'Generation Features',
			
 
				+                styleTransfer: {
			
 
				+                    description: 'Apply your brand style to any image instantly with our AI style transfer technology.'
			
 
				+                },
			
 
				+                product: {
			
 
				+                    description: 'Create professional product visualizations from any angle with customizable settings.'
			
 
				+                },
			
 
				+                social: {
			
 
				+                    description: 'Generate engaging social media content that matches your brand identity.'
			
 
				+                }
			
 
				+            },
			
 
				+            demo: {
			
 
				+                title: 'Try It Yourself',
			
 
				+                description: 'Experience the power of AI image generation with our interactive demo.',
			
 
				+                cta: 'Start Creating'
			
 
				+            },
			
 
				+            styles: {
			
 
				+                title: 'Style Presets'
			
 
				+            }
			
 
				+        },
			
 
				+        analytics: {
			
 
				+            title: 'Analytics Dashboard',
			
 
				+            description: 'Get deep insights into your brand performance with AI-powered analytics.',
			
 
				+            dashboard: {
			
 
				+                title: 'Performance Overview',
			
 
				+                growth: 'Brand Growth',
			
 
				+                engagement: 'Engagement Rate',
			
 
				+                conversion: 'Conversion Rate'
			
 
				+            },
			
 
				+            metrics: {
			
 
				+                title: 'Key Metrics',
			
 
				+                engagement: {
			
 
				+                    description: 'Track engagement across all platforms with real-time analytics and insights.'
			
 
				+                },
			
 
				+                audience: {
			
 
				+                    description: 'Understand your audience with detailed demographic and behavioral analysis.'
			
 
				+                },
			
 
				+                performance: {
			
 
				+                    description: 'Monitor key performance indicators and track progress towards goals.'
			
 
				+                }
			
 
				+            },
			
 
				+            actions: {
			
 
				+                title: 'Quick Actions'
			
 
				+            }
			
 
				+        },
			
 
				+        brandGrowth: {
			
 
				+            title: 'Brand Growth',
			
 
				+            description: 'Accelerate your brand growth with AI-powered strategies and insights.',
			
 
				+            strategies: {
			
 
				+                title: 'Growth Strategies',
			
 
				+                content: {
			
 
				+                    description: 'Data-driven content strategies to maximize engagement and reach.'
			
 
				+                },
			
 
				+                audience: {
			
 
				+                    description: 'Smart audience targeting and growth optimization techniques.'
			
 
				+                },
			
 
				+                identity: {
			
 
				+                    description: 'Build and maintain a strong, consistent brand identity.'
			
 
				+                }
			
 
				+            },
			
 
				+            recommendations: {
			
 
				+                title: 'AI Recommendations',
			
 
				+                content: 'Content Optimization',
			
 
				+                timing: 'Posting Schedule',
			
 
				+                engagement: 'Engagement Strategy'
			
 
				+            },
			
 
				+            tools: {
			
 
				+                title: 'Growth Tools'
			
 
				+            }
			
 
				+        },
			
 
				+        contact: {
			
 
				+            title: 'Contact Us',
			
 
				+            description: 'Get in touch with our team for any questions or support needs.',
			
 
				+            form: {
			
 
				+                title: 'Send us a Message',
			
 
				+                name: 'Your Name',
			
 
				+                email: 'Email Address',
			
 
				+                subject: 'Subject',
			
 
				+                message: 'Your Message',
			
 
				+                send: 'Send Message',
			
 
				+                sending: 'Sending...',
			
 
				+                success: 'Message sent successfully! We\'ll get back to you soon.',
			
 
				+                error: 'There was an error sending your message. Please try again.'
			
 
				+            },
			
 
				+            methods: {
			
 
				+                title: 'Contact Methods',
			
 
				+                email: {
			
 
				+                    title: 'Email Us'
			
 
				+                },
			
 
				+                phone: {
			
 
				+                    title: 'Call Us'
			
 
				+                },
			
 
				+                location: {
			
 
				+                    title: 'Visit Us'
			
 
				+                }
			
 
				+            },
			
 
				+            social: {
			
 
				+                title: 'Follow Us'
			
 
				+            }
			
 
				+        },
			
 
				+        terms: {
			
 
				+            title: 'Terms of Use',
			
 
				+            description: 'Please read these terms carefully before using our services.',
			
 
				+            usage: {
			
 
				+                title: 'Usage Terms',
			
 
				+                content: 'By accessing and using BYOM\'s services, you agree to comply with these terms and all applicable laws and regulations.'
			
 
				+            },
			
 
				+            account: {
			
 
				+                title: 'Account Responsibilities',
			
 
				+                content: 'You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account.'
			
 
				+            },
			
 
				+            intellectual: {
			
 
				+                title: 'Intellectual Property',
			
 
				+                content: 'All content, features, and functionality of BYOM are owned by us and are protected by international copyright, trademark, and other intellectual property laws.'
			
 
				+            },
			
 
				+            liability: {
			
 
				+                title: 'Limitation of Liability',
			
 
				+                content: 'BYOM shall not be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of our services.'
			
 
				+            }
			
 
				+        },
			
 
				+        privacy: {
			
 
				+            title: 'Privacy Policy',
			
 
				+            description: 'Learn how we collect, use, and protect your personal information.',
			
 
				+            collection: {
			
 
				+                title: 'Information Collection',
			
 
				+                content: 'We collect information that you provide directly to us, including personal information such as your name, email address, and usage data.'
			
 
				+            },
			
 
				+            usage: {
			
 
				+                title: 'Information Usage',
			
 
				+                content: 'We use the collected information to provide, maintain, and improve our services, as well as to communicate with you.'
			
 
				+            },
			
 
				+            sharing: {
			
 
				+                title: 'Information Sharing',
			
 
				+                content: 'We do not sell or share your personal information with third parties except as described in this policy or with your consent.'
			
 
				+            },
			
 
				+            security: {
			
 
				+                title: 'Data Security',
			
 
				+                content: 'We implement appropriate security measures to protect your personal information against unauthorized access or disclosure.'
			
 
				+            }
			
 
				         }
			
 
				     },
			
 
				     fr: {
			
@@ -64,15 +278,229 @@ export const translations = {
 
				             description: 'Choisissez le forfait parfait pour la croissance de votre marque',
			
 
				             mostPopular: 'Plus populaire',
			
 
				             perMonth: '/mois',
			
 
				+            perYear: '/an',
			
 
				             getStarted: 'Commencer avec',
			
 
				             trial: 'Tous les forfaits incluent un essai gratuit de 14 jours. Pas de carte bancaire requise'
			
 
				         },
			
 
				+        register: {
			
 
				+            title: 'Créer un Compte',
			
 
				+            selectedPlan: 'Forfait Sélectionné',
			
 
				+            firstName: 'Prénom',
			
 
				+            firstNamePlaceholder: 'Entrez votre prénom',
			
 
				+            lastName: 'Nom de Famille',
			
 
				+            lastNamePlaceholder: 'Entrez votre nom de famille',
			
 
				+            email: 'Adresse Email',
			
 
				+            emailPlaceholder: 'Entrez votre email',
			
 
				+        },
			
 
				         login: {
			
 
				             title: 'Bon retour',
			
 
				             subtitle: 'Entrez votre email pour continuer',
			
 
				             continue: 'Continuer avec email',
			
 
				             noAccount: 'Vous n\'avez pas de compte ?',
			
 
				             viewPricing: 'Voir les tarifs'
			
 
				+        },
			
 
				+        about: {
			
 
				+            title: 'À Propos de BYOM',
			
 
				+            description: 'Donnons aux créateurs les moyens de réussir avec des solutions basées sur l\'IA pour la croissance et l\'engagement de leur marque.',
			
 
				+            mission: {
			
 
				+                title: 'Notre Mission',
			
 
				+                description: 'Démocratiser la technologie de l\'IA pour les créateurs et rendre la croissance des marques accessible à tous grâce à des outils et des analyses innovants.'
			
 
				+            },
			
 
				+            timeline: 'Notre Parcours',
			
 
				+            milestones: {
			
 
				+                founding: 'Création de BYOM',
			
 
				+                founding_desc: 'Début avec une vision de révolutionner la gestion de marque grâce à l\'IA.',
			
 
				+                launch: 'Lancement de la Plateforme',
			
 
				+                launch_desc: 'Lancement réussi de notre plateforme alimentée par l\'IA auprès des premiers utilisateurs.',
			
 
				+                growth: 'Expansion Mondiale',
			
 
				+                growth_desc: 'Présence dans plus de 50 pays, aidant les créateurs à développer leurs marques.'
			
 
				+            },
			
 
				+            team: {
			
 
				+                title: 'Notre Équipe',
			
 
				+                sarah: 'Leader visionnaire avec 15 ans d\'expérience en IA et gestion de marque.',
			
 
				+                marcus: 'Innovateur tech spécialisé dans les solutions d\'IA et de machine learning.',
			
 
				+                emma: 'Designer primée focalisée sur la création d\'expériences utilisateur intuitives.'
			
 
				+            },
			
 
				+            roles: {
			
 
				+                ceo: 'PDG & Fondatrice',
			
 
				+                cto: 'Directeur Technique',
			
 
				+                design: 'Directrice du Design'
			
 
				+            },
			
 
				+            contact: {
			
 
				+                title: 'Contactez-nous',
			
 
				+                description: 'Des questions ? Nous aimerions avoir de vos nouvelles. Envoyez-nous un message et nous vous répondrons dès que possible.',
			
 
				+                cta: 'Nous Contacter'
			
 
				+            }
			
 
				+        },
			
 
				+        aiTrends: {
			
 
				+            title: 'Tendances IA',
			
 
				+            description: 'Gardez une longueur d\'avance grâce à notre analyse des tendances IA et nos insights pour la croissance de votre marque.',
			
 
				+            overview: {
			
 
				+                title: 'Tendances Actuelles'
			
 
				+            },
			
 
				+            trends: {
			
 
				+                nlp: {
			
 
				+                    description: 'Modèles de langage avancés révolutionnant la création et l\'analyse de contenu.'
			
 
				+                },
			
 
				+                vision: {
			
 
				+                    description: 'Technologies de vision par ordinateur transformant l\'optimisation du contenu visuel.'
			
 
				+                },
			
 
				+                generative: {
			
 
				+                    description: 'L\'IA générative créant de nouvelles possibilités pour le contenu et la créativité des marques.'
			
 
				+                }
			
 
				+            },
			
 
				+            demo: {
			
 
				+                title: 'Voir l\'IA en Action',
			
 
				+                description: 'Découvrez comment nos outils IA peuvent transformer votre stratégie de marque.',
			
 
				+                cta: 'Essayer la Démo'
			
 
				+            },
			
 
				+            stats: {
			
 
				+                title: 'Impact sur l\'Industrie'
			
 
				+            }
			
 
				+        },
			
 
				+        imageGen: {
			
 
				+            title: 'Génération d\'Images',
			
 
				+            description: 'Transformez votre vision de marque en réalité grâce à la génération d\'images par IA.',
			
 
				+            features: {
			
 
				+                title: 'Fonctionnalités de Génération',
			
 
				+                styleTransfer: {
			
 
				+                    description: 'Appliquez instantanément le style de votre marque à n\'importe quelle image avec notre technologie de transfert de style IA.'
			
 
				+                },
			
 
				+                product: {
			
 
				+                    description: 'Créez des visualisations professionnelles de produits sous tous les angles avec des paramètres personnalisables.'
			
 
				+                },
			
 
				+                social: {
			
 
				+                    description: 'Générez du contenu engageant pour les réseaux sociaux qui correspond à l\'identité de votre marque.'
			
 
				+                }
			
 
				+            },
			
 
				+            demo: {
			
 
				+                title: 'Essayez par Vous-même',
			
 
				+                description: 'Découvrez la puissance de la génération d\'images par IA avec notre démo interactive.',
			
 
				+                cta: 'Commencer à Créer'
			
 
				+            },
			
 
				+            styles: {
			
 
				+                title: 'Préréglages de Style'
			
 
				+            }
			
 
				+        },
			
 
				+        analytics: {
			
 
				+            title: 'Tableau de Bord Analytique',
			
 
				+            description: 'Obtenez des insights approfondis sur les performances de votre marque grâce à l\'analyse alimentée par l\'IA.',
			
 
				+            dashboard: {
			
 
				+                title: 'Aperçu des Performances',
			
 
				+                growth: 'Croissance de la Marque',
			
 
				+                engagement: 'Taux d\'Engagement',
			
 
				+                conversion: 'Taux de Conversion'
			
 
				+            },
			
 
				+            metrics: {
			
 
				+                title: 'Métriques Clés',
			
 
				+                engagement: {
			
 
				+                    description: 'Suivez l\'engagement sur toutes les plateformes avec des analyses en temps réel.'
			
 
				+                },
			
 
				+                audience: {
			
 
				+                    description: 'Comprenez votre audience avec une analyse démographique et comportementale détaillée.'
			
 
				+                },
			
 
				+                performance: {
			
 
				+                    description: 'Surveillez les indicateurs de performance clés et suivez les progrès vers les objectifs.'
			
 
				+                }
			
 
				+            },
			
 
				+            actions: {
			
 
				+                title: 'Actions Rapides'
			
 
				+            }
			
 
				+        },
			
 
				+        brandGrowth: {
			
 
				+            title: 'Croissance de Marque',
			
 
				+            description: 'Accélérez la croissance de votre marque avec des stratégies et des insights alimentés par l\'IA.',
			
 
				+            strategies: {
			
 
				+                title: 'Stratégies de Croissance',
			
 
				+                content: {
			
 
				+                    description: 'Stratégies de contenu basées sur les données pour maximiser l\'engagement et la portée.'
			
 
				+                },
			
 
				+                audience: {
			
 
				+                    description: 'Techniques intelligentes de ciblage et d\'optimisation de la croissance de l\'audience.'
			
 
				+                },
			
 
				+                identity: {
			
 
				+                    description: 'Construire et maintenir une identité de marque forte et cohérente.'
			
 
				+                }
			
 
				+            },
			
 
				+            recommendations: {
			
 
				+                title: 'Recommandations IA',
			
 
				+                content: 'Optimisation du Contenu',
			
 
				+                timing: 'Calendrier de Publication',
			
 
				+                engagement: 'Stratégie d\'Engagement'
			
 
				+            },
			
 
				+            tools: {
			
 
				+                title: 'Outils de Croissance'
			
 
				+            }
			
 
				+        },
			
 
				+        contact: {
			
 
				+            title: 'Contactez-nous',
			
 
				+            description: 'Prenez contact avec notre équipe pour toute question ou besoin d\'assistance.',
			
 
				+            form: {
			
 
				+                title: 'Envoyez-nous un Message',
			
 
				+                name: 'Votre Nom',
			
 
				+                email: 'Adresse Email',
			
 
				+                subject: 'Sujet',
			
 
				+                message: 'Votre Message',
			
 
				+                send: 'Envoyer',
			
 
				+                sending: 'Envoi en cours...',
			
 
				+                success: 'Message envoyé avec succès ! Nous vous répondrons bientôt.',
			
 
				+                error: 'Une erreur est survenue lors de l\'envoi. Veuillez réessayer.'
			
 
				+            },
			
 
				+            methods: {
			
 
				+                title: 'Moyens de Contact',
			
 
				+                email: {
			
 
				+                    title: 'Envoyez-nous un Email'
			
 
				+                },
			
 
				+                phone: {
			
 
				+                    title: 'Appelez-nous'
			
 
				+                },
			
 
				+                location: {
			
 
				+                    title: 'Visitez-nous'
			
 
				+                }
			
 
				+            },
			
 
				+            social: {
			
 
				+                title: 'Suivez-nous'
			
 
				+            }
			
 
				+        },
			
 
				+        terms: {
			
 
				+            title: 'Conditions d\'Utilisation',
			
 
				+            description: 'Veuillez lire attentivement ces conditions avant d\'utiliser nos services.',
			
 
				+            usage: {
			
 
				+                title: 'Conditions d\'Utilisation',
			
 
				+                content: 'En accédant et en utilisant les services de BYOM, vous acceptez de vous conformer à ces conditions et à toutes les lois et réglementations applicables.'
			
 
				+            },
			
 
				+            account: {
			
 
				+                title: 'Responsabilités du Compte',
			
 
				+                content: 'Vous êtes responsable de la confidentialité de vos identifiants de compte et de toutes les activités qui se déroulent sous votre compte.'
			
 
				+            },
			
 
				+            intellectual: {
			
 
				+                title: 'Propriété Intellectuelle',
			
 
				+                content: 'Tout le contenu, les fonctionnalités et les fonctions de BYOM nous appartiennent et sont protégés par les lois internationales sur le droit d\'auteur, les marques et autres lois sur la propriété intellectuelle.'
			
 
				+            },
			
 
				+            liability: {
			
 
				+                title: 'Limitation de Responsabilité',
			
 
				+                content: 'BYOM ne sera pas responsable des dommages indirects, accessoires, spéciaux, consécutifs ou punitifs résultant de votre utilisation de nos services.'
			
 
				+            }
			
 
				+        },
			
 
				+        privacy: {
			
 
				+            title: 'Politique de Confidentialité',
			
 
				+            description: 'Découvrez comment nous collectons, utilisons et protégeons vos informations personnelles.',
			
 
				+            collection: {
			
 
				+                title: 'Collecte d\'Informations',
			
 
				+                content: 'Nous collectons les informations que vous nous fournissez directement, y compris les informations personnelles telles que votre nom, adresse email et données d\'utilisation.'
			
 
				+            },
			
 
				+            usage: {
			
 
				+                title: 'Utilisation des Informations',
			
 
				+                content: 'Nous utilisons les informations collectées pour fournir, maintenir et améliorer nos services, ainsi que pour communiquer avec vous.'
			
 
				+            },
			
 
				+            sharing: {
			
 
				+                title: 'Partage d\'Informations',
			
 
				+                content: 'Nous ne vendons ni ne partageons vos informations personnelles avec des tiers, sauf comme décrit dans cette politique ou avec votre consentement.'
			
 
				+            },
			
 
				+            security: {
			
 
				+                title: 'Sécurité des Données',
			
 
				+                content: 'Nous mettons en œuvre des mesures de sécurité appropriées pour protéger vos informations personnelles contre tout accès ou divulgation non autorisé.'
			
 
				+            }
			
 
				         }
			
 
				     }
			
 
				 };
			
--- a/src/index.css
+++ b/src/index.css
@@ -1,11 +1,15 @@
 
				+@import url('https://rsms.me/inter/inter.css');
			
 
				+
			
 
				 @tailwind base;
			
 
				 @tailwind components;
			
 
				 @tailwind utilities;
			
 
				 
			
 
				-@import url('https://rsms.me/inter/inter.css');
			
 
				-
			
 
				 :root {
			
 
				   font-family: 'Inter', system-ui, sans-serif;
			
 
				+  --brand-purple: #7C3AED;
			
 
				+  --brand-pink: #EC4899;
			
 
				+  --brand-blue: #3B82F6;
			
 
				+  --brand-teal: #14B8A6;
			
 
				 }
			
 
				 
			
 
				 @supports (font-variation-settings: normal) {
			
@@ -39,4 +43,120 @@ button:hover {
 
				   .text-balance {
			
 
				     text-wrap: balance;
			
 
				   }
			
 
				-}
			
 
				+}
			
 
				+
			
 
				+/* Footer-inspired global styles */
			
 
				+@layer components {
			
 
				+  .monospace {
			
 
				+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
			
 
				+  }
			
 
				+
			
 
				+  .heading-style {
			
 
				+    @apply font-black uppercase mb-6;
			
 
				+  }
			
 
				+
			
 
				+  .heading-xl {
			
 
				+    @apply heading-style text-xl;
			
 
				+  }
			
 
				+
			
 
				+  .heading-lg {
			
 
				+    @apply heading-style text-lg;
			
 
				+  }
			
 
				+
			
 
				+  .link-hover {
			
 
				+    @apply hover:translate-x-2 transition-transform inline-block;
			
 
				+  }
			
 
				+
			
 
				+  .content-wrapper {
			
 
				+    @apply max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 py-16;
			
 
				+  }
			
 
				+
			
 
				+  .border-style {
			
 
				+    @apply border-2 border-black;
			
 
				+  }
			
 
				+
			
 
				+  .border-top {
			
 
				+    @apply border-t-2 border-black;
			
 
				+  }
			
 
				+
			
 
				+  .grid-layout {
			
 
				+    @apply grid grid-cols-1 md:grid-cols-4 gap-12;
			
 
				+  }
			
 
				+
			
 
				+  .link-list {
			
 
				+    @apply space-y-3;
			
 
				+  }
			
 
				+
			
 
				+  .link-item {
			
 
				+    @apply monospace text-sm link-hover;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* Brand Colors */
			
 
				+.text-brand-purple {
			
 
				+  color: var(--brand-purple);
			
 
				+}
			
 
				+
			
 
				+.text-brand-pink {
			
 
				+  color: var(--brand-pink);
			
 
				+}
			
 
				+
			
 
				+.text-brand-blue {
			
 
				+  color: var(--brand-blue);
			
 
				+}
			
 
				+
			
 
				+.text-brand-teal {
			
 
				+  color: var(--brand-teal);
			
 
				+}
			
 
				+
			
 
				+.bg-brand-purple {
			
 
				+  background-color: var(--brand-purple);
			
 
				+}
			
 
				+
			
 
				+.hover\:bg-brand-purple:hover {
			
 
				+  background-color: var(--brand-purple);
			
 
				+}
			
 
				+
			
 
				+.bg-brand-purple\/10 {
			
 
				+  background-color: color-mix(in srgb, var(--brand-purple) 10%, transparent);
			
 
				+}
			
 
				+
			
 
				+.bg-brand-pink\/10 {
			
 
				+  background-color: color-mix(in srgb, var(--brand-pink) 10%, transparent);
			
 
				+}
			
 
				+
			
 
				+.bg-brand-blue {
			
 
				+  background-color: var(--brand-blue);
			
 
				+}
			
 
				+
			
 
				+/* Animations */
			
 
				+@keyframes spin-slow {
			
 
				+  from {
			
 
				+    transform: rotate(0deg);
			
 
				+  }
			
 
				+  to {
			
 
				+    transform: rotate(360deg);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.animate-spin-slow {
			
 
				+  animation: spin-slow 3s linear infinite;
			
 
				+}
			
 
				+
			
 
				+@keyframes scroll {
			
 
				+  0% {
			
 
				+    transform: translateX(0);
			
 
				+  }
			
 
				+  100% {
			
 
				+    transform: translateX(-50%);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.animate-scroll {
			
 
				+  animation: scroll 20s linear infinite;
			
 
				+}
			
 
				+
			
 
				+/* Delay utilities */
			
 
				+.delay-1000 {
			
 
				+  animation-delay: 1000ms;
			
 
				+}
			
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -0,0 +1,133 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+
			
 
				+function About() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    const teamMembers = [
			
 
				+        {
			
 
				+            name: 'Sarah Chen',
			
 
				+            role: t('about.roles.ceo'),
			
 
				+            image: '/team/sarah.jpg', // Add actual image paths
			
 
				+            description: t('about.team.sarah')
			
 
				+        },
			
 
				+        {
			
 
				+            name: 'Marcus Rodriguez',
			
 
				+            role: t('about.roles.cto'),
			
 
				+            image: '/team/marcus.jpg',
			
 
				+            description: t('about.team.marcus')
			
 
				+        },
			
 
				+        {
			
 
				+            name: 'Emma Laurent',
			
 
				+            role: t('about.roles.design'),
			
 
				+            image: '/team/emma.jpg',
			
 
				+            description: t('about.team.emma')
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    const milestones = [
			
 
				+        {
			
 
				+            year: '2021',
			
 
				+            title: t('about.milestones.founding'),
			
 
				+            description: t('about.milestones.founding_desc')
			
 
				+        },
			
 
				+        {
			
 
				+            year: '2022',
			
 
				+            title: t('about.milestones.launch'),
			
 
				+            description: t('about.milestones.launch_desc')
			
 
				+        },
			
 
				+        {
			
 
				+            year: '2023',
			
 
				+            title: t('about.milestones.growth'),
			
 
				+            description: t('about.milestones.growth_desc')
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('about.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('about.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Mission Section */}
			
 
				+                <div className="bg-white rounded-2xl shadow-lg p-8 mb-16">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-6">{t('about.mission.title')}</h2>
			
 
				+                    <p className="text-lg text-gray-600">
			
 
				+                        {t('about.mission.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Timeline Section */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('about.timeline')}</h2>
			
 
				+                    <div className="space-y-8">
			
 
				+                        {milestones.map((milestone) => (
			
 
				+                            <div key={milestone.year} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-shadow">
			
 
				+                                <div className="absolute -left-3 top-1/2 -translate-y-1/2 w-6 h-6 bg-brand-purple rounded-full flex items-center justify-center text-white text-sm">
			
 
				+                                    <span className="font-medium">{milestone.year}</span>
			
 
				+                                </div>
			
 
				+                                <div className="ml-6">
			
 
				+                                    <h3 className="text-xl font-medium text-gray-900 mb-2">{milestone.title}</h3>
			
 
				+                                    <p className="text-gray-600">{milestone.description}</p>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Team Section */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('about.team.title')}</h2>
			
 
				+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
			
 
				+                        {teamMembers.map((member) => (
			
 
				+                            <div key={member.name} className="bg-white rounded-2xl shadow-lg p-6 group hover:shadow-xl transition-shadow">
			
 
				+                                <div className="w-full aspect-square mb-4 overflow-hidden rounded-xl bg-gray-100 relative">
			
 
				+                                    <div className="absolute inset-0 bg-gradient-to-br from-brand-purple/5 to-brand-pink/5"></div>
			
 
				+                                    <div className="w-full h-full flex items-center justify-center">
			
 
				+                                        <span className="text-4xl">👤</span>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <h3 className="text-xl font-medium text-gray-900 mb-1">{member.name}</h3>
			
 
				+                                <p className="text-sm text-brand-purple mb-3">{member.role}</p>
			
 
				+                                <p className="text-gray-600">{member.description}</p>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Contact Section */}
			
 
				+                <div className="bg-white rounded-2xl shadow-lg p-8 mb-16 text-center">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-6">{t('about.contact.title')}</h2>
			
 
				+                    <p className="text-lg text-gray-600 mb-8">
			
 
				+                        {t('about.contact.description')}
			
 
				+                    </p>
			
 
				+                    <Link 
			
 
				+                        to="/contact" 
			
 
				+                        className="inline-flex items-center gap-2 bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300"
			
 
				+                    >
			
 
				+                        <span>{t('about.contact.cta')}</span>
			
 
				+                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                    </Link>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default About;
			
--- a/src/pages/AiTrends.jsx
+++ b/src/pages/AiTrends.jsx
@@ -0,0 +1,168 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+
			
 
				+function AiTrends() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    const trends = [
			
 
				+        {
			
 
				+            id: 1,
			
 
				+            title: 'Natural Language Processing',
			
 
				+            description: t('aiTrends.trends.nlp.description'),
			
 
				+            icon: '🤖',
			
 
				+            stats: {
			
 
				+                growth: '+127%',
			
 
				+                adoption: '78%',
			
 
				+                impact: 'High'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 2,
			
 
				+            title: 'Computer Vision',
			
 
				+            description: t('aiTrends.trends.vision.description'),
			
 
				+            icon: '👁️',
			
 
				+            stats: {
			
 
				+                growth: '+85%',
			
 
				+                adoption: '64%',
			
 
				+                impact: 'High'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 3,
			
 
				+            title: 'Generative AI',
			
 
				+            description: t('aiTrends.trends.generative.description'),
			
 
				+            icon: '🎨',
			
 
				+            stats: {
			
 
				+                growth: '+245%',
			
 
				+                adoption: '52%',
			
 
				+                impact: 'Very High'
			
 
				+            }
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('aiTrends.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('aiTrends.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Trends Overview */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('aiTrends.overview.title')}</h2>
			
 
				+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
			
 
				+                        {trends.map((trend) => (
			
 
				+                            <div key={trend.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
			
 
				+                                <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
			
 
				+                                    <span className="text-xl">{trend.icon}</span>
			
 
				+                                </div>
			
 
				+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{trend.title}</h3>
			
 
				+                                <p className="text-gray-600 mb-6">{trend.description}</p>
			
 
				+                                <div className="h-px bg-gray-100 mb-6"></div>
			
 
				+                                <div className="grid grid-cols-3 gap-4">
			
 
				+                                    <div>
			
 
				+                                        <span className="text-sm text-gray-500 block">Growth</span>
			
 
				+                                        <span className="font-medium text-brand-purple">{trend.stats.growth}</span>
			
 
				+                                    </div>
			
 
				+                                    <div>
			
 
				+                                        <span className="text-sm text-gray-500 block">Adoption</span>
			
 
				+                                        <span className="font-medium text-brand-purple">{trend.stats.adoption}</span>
			
 
				+                                    </div>
			
 
				+                                    <div>
			
 
				+                                        <span className="text-sm text-gray-500 block">Impact</span>
			
 
				+                                        <span className="font-medium text-brand-purple">{trend.stats.impact}</span>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Interactive Demo Section */}
			
 
				+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
			
 
				+                    <div className="lg:col-span-2">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
			
 
				+                            <div className="relative aspect-video">
			
 
				+                                <video
			
 
				+                                    className="w-full h-full object-cover"
			
 
				+                                    autoPlay
			
 
				+                                    loop
			
 
				+                                    muted
			
 
				+                                    playsInline
			
 
				+                                >
			
 
				+                                    <source src="/ai-demo.mp4" type="video/mp4" />
			
 
				+                                </video>
			
 
				+                                <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
			
 
				+                            </div>
			
 
				+                            <div className="p-8">
			
 
				+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{t('aiTrends.demo.title')}</h3>
			
 
				+                                <p className="text-gray-600 mb-6">{t('aiTrends.demo.description')}</p>
			
 
				+                                <Link 
			
 
				+                                    to="/register" 
			
 
				+                                    className="inline-flex items-center gap-2 bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300"
			
 
				+                                >
			
 
				+                                    <span>{t('aiTrends.demo.cta')}</span>
			
 
				+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                                </Link>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Stats Section */}
			
 
				+                    <div className="lg:col-span-1">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                            <h3 className="text-xl font-medium text-gray-900 mb-8">{t('aiTrends.stats.title')}</h3>
			
 
				+                            <div className="space-y-8">
			
 
				+                                <div>
			
 
				+                                    <div className="flex justify-between mb-2">
			
 
				+                                        <span className="text-sm text-gray-600">Market Growth</span>
			
 
				+                                        <span className="font-medium text-brand-purple">+156%</span>
			
 
				+                                    </div>
			
 
				+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
			
 
				+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: '75%' }}></div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <div className="flex justify-between mb-2">
			
 
				+                                        <span className="text-sm text-gray-600">AI Adoption</span>
			
 
				+                                        <span className="font-medium text-brand-purple">68%</span>
			
 
				+                                    </div>
			
 
				+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
			
 
				+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: '68%' }}></div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <div className="flex justify-between mb-2">
			
 
				+                                        <span className="text-sm text-gray-600">ROI Impact</span>
			
 
				+                                        <span className="font-medium text-brand-purple">+234%</span>
			
 
				+                                    </div>
			
 
				+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
			
 
				+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: '85%' }}></div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default AiTrends;
			
--- a/src/pages/Analytics.jsx
+++ b/src/pages/Analytics.jsx
@@ -0,0 +1,157 @@
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+
			
 
				+function Analytics() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    const metrics = [
			
 
				+        {
			
 
				+            id: 1,
			
 
				+            title: 'Engagement Analytics',
			
 
				+            description: t('analytics.metrics.engagement.description'),
			
 
				+            icon: '📊',
			
 
				+            stats: {
			
 
				+                metrics: '15+',
			
 
				+                update: 'Real-time',
			
 
				+                export: 'CSV/PDF'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 2,
			
 
				+            title: 'Audience Insights',
			
 
				+            description: t('analytics.metrics.audience.description'),
			
 
				+            icon: '👥',
			
 
				+            stats: {
			
 
				+                segments: '8+',
			
 
				+                reach: 'Global',
			
 
				+                tracking: '24/7'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 3,
			
 
				+            title: 'Performance Tracking',
			
 
				+            description: t('analytics.metrics.performance.description'),
			
 
				+            icon: '📈',
			
 
				+            stats: {
			
 
				+                kpis: '20+',
			
 
				+                reports: 'Custom',
			
 
				+                history: '12 months'
			
 
				+            }
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    const dashboardSections = [
			
 
				+        {
			
 
				+            title: t('analytics.dashboard.growth'),
			
 
				+            percentage: '+127%',
			
 
				+            trend: 'up'
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('analytics.dashboard.engagement'),
			
 
				+            percentage: '+85%',
			
 
				+            trend: 'up'
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('analytics.dashboard.conversion'),
			
 
				+            percentage: '+45%',
			
 
				+            trend: 'up'
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('analytics.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('analytics.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Dashboard Preview */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('analytics.dashboard.title')}</h2>
			
 
				+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
			
 
				+                        {dashboardSections.map((section) => (
			
 
				+                            <div key={section.title} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
			
 
				+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{section.title}</h3>
			
 
				+                                <div className="flex items-center gap-4">
			
 
				+                                    <span className="text-4xl font-light text-brand-purple">{section.percentage}</span>
			
 
				+                                    <div className={`w-8 h-8 text-brand-purple transform transition-transform ${section.trend === 'up' ? 'rotate-0' : 'rotate-180'}`}>
			
 
				+                                        ↑
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <div className="mt-4 w-full h-2 bg-gray-100 rounded-full overflow-hidden">
			
 
				+                                    <div className="h-full bg-brand-purple rounded-full" style={{ width: section.percentage }}></div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Metrics and Actions */}
			
 
				+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
			
 
				+                    {/* Metrics Overview */}
			
 
				+                    <div className="lg:col-span-2">
			
 
				+                        <div className="space-y-8">
			
 
				+                            {metrics.map((metric) => (
			
 
				+                                <div key={metric.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
			
 
				+                                    <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
			
 
				+                                        <span className="text-xl">{metric.icon}</span>
			
 
				+                                    </div>
			
 
				+                                    <h3 className="text-xl font-medium text-gray-900 mb-4">{metric.title}</h3>
			
 
				+                                    <p className="text-gray-600 mb-6">{metric.description}</p>
			
 
				+                                    <div className="h-px bg-gray-100 mb-6"></div>
			
 
				+                                    <div className="grid grid-cols-3 gap-4">
			
 
				+                                        {Object.entries(metric.stats).map(([key, value]) => (
			
 
				+                                            <div key={key}>
			
 
				+                                                <span className="text-sm text-gray-500 block capitalize">{key}</span>
			
 
				+                                                <span className="font-medium text-brand-purple">{value}</span>
			
 
				+                                            </div>
			
 
				+                                        ))}
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            ))}
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Quick Actions */}
			
 
				+                    <div className="lg:col-span-1">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('analytics.actions.title')}</h3>
			
 
				+                            <div className="space-y-3">
			
 
				+                                {[
			
 
				+                                    'Generate Report',
			
 
				+                                    'Export Data',
			
 
				+                                    'Set Alerts',
			
 
				+                                    'Share Dashboard',
			
 
				+                                    'Configure KPIs'
			
 
				+                                ].map((action) => (
			
 
				+                                    <div 
			
 
				+                                        key={action} 
			
 
				+                                        className="p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300 cursor-pointer group"
			
 
				+                                    >
			
 
				+                                        <span className="text-gray-600 group-hover:text-brand-purple transition-colors">{action}</span>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Analytics;
			
--- a/src/pages/BrandGrowth.jsx
+++ b/src/pages/BrandGrowth.jsx
@@ -0,0 +1,170 @@
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+
			
 
				+function BrandGrowth() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    const strategies = [
			
 
				+        {
			
 
				+            id: 1,
			
 
				+            title: 'Content Strategy',
			
 
				+            description: t('brandGrowth.strategies.content.description'),
			
 
				+            icon: '📝',
			
 
				+            stats: {
			
 
				+                reach: '+245%',
			
 
				+                engagement: '+167%',
			
 
				+                conversion: '+89%'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 2,
			
 
				+            title: 'Audience Growth',
			
 
				+            description: t('brandGrowth.strategies.audience.description'),
			
 
				+            icon: '🎯',
			
 
				+            stats: {
			
 
				+                targeting: '95%',
			
 
				+                retention: '87%',
			
 
				+                growth: '+156%'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 3,
			
 
				+            title: 'Brand Identity',
			
 
				+            description: t('brandGrowth.strategies.identity.description'),
			
 
				+            icon: '✨',
			
 
				+            stats: {
			
 
				+                recognition: '+178%',
			
 
				+                loyalty: '+92%',
			
 
				+                awareness: '+134%'
			
 
				+            }
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    const recommendations = [
			
 
				+        {
			
 
				+            title: t('brandGrowth.recommendations.content'),
			
 
				+            score: 92,
			
 
				+            priority: 'High',
			
 
				+            impact: '+127%'
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('brandGrowth.recommendations.timing'),
			
 
				+            score: 88,
			
 
				+            priority: 'Medium',
			
 
				+            impact: '+85%'
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('brandGrowth.recommendations.engagement'),
			
 
				+            score: 95,
			
 
				+            priority: 'High',
			
 
				+            impact: '+156%'
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('brandGrowth.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('brandGrowth.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Growth Strategies */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('brandGrowth.strategies.title')}</h2>
			
 
				+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
			
 
				+                        {strategies.map((strategy) => (
			
 
				+                            <div key={strategy.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
			
 
				+                                <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
			
 
				+                                    <span className="text-xl">{strategy.icon}</span>
			
 
				+                                </div>
			
 
				+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{strategy.title}</h3>
			
 
				+                                <p className="text-gray-600 mb-6">{strategy.description}</p>
			
 
				+                                <div className="h-px bg-gray-100 mb-6"></div>
			
 
				+                                <div className="grid grid-cols-3 gap-4">
			
 
				+                                    {Object.entries(strategy.stats).map(([key, value]) => (
			
 
				+                                        <div key={key}>
			
 
				+                                            <span className="text-sm text-gray-500 block capitalize">{key}</span>
			
 
				+                                            <span className="font-medium text-brand-purple">{value}</span>
			
 
				+                                        </div>
			
 
				+                                    ))}
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* AI Recommendations and Tools */}
			
 
				+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
			
 
				+                    {/* AI Recommendations */}
			
 
				+                    <div className="lg:col-span-2">
			
 
				+                        <div className="space-y-6">
			
 
				+                            {recommendations.map((rec) => (
			
 
				+                                <div key={rec.title} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
			
 
				+                                    <div className="flex justify-between items-center mb-4">
			
 
				+                                        <h3 className="text-xl font-medium text-gray-900">{rec.title}</h3>
			
 
				+                                        <div className="flex items-center gap-2">
			
 
				+                                            <span className="text-sm text-gray-500">Score:</span>
			
 
				+                                            <span className="font-medium text-brand-purple text-xl">{rec.score}</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                    <div className="grid grid-cols-2 gap-4 mb-4">
			
 
				+                                        <div>
			
 
				+                                            <span className="text-sm text-gray-500 block">Priority</span>
			
 
				+                                            <span className="font-medium text-brand-purple">{rec.priority}</span>
			
 
				+                                        </div>
			
 
				+                                        <div>
			
 
				+                                            <span className="text-sm text-gray-500 block">Potential Impact</span>
			
 
				+                                            <span className="font-medium text-brand-purple">{rec.impact}</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
			
 
				+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: `${rec.score}%` }}></div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            ))}
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Growth Tools */}
			
 
				+                    <div className="lg:col-span-1">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('brandGrowth.tools.title')}</h3>
			
 
				+                            <div className="space-y-3">
			
 
				+                                {[
			
 
				+                                    'Content Calendar',
			
 
				+                                    'Audience Insights',
			
 
				+                                    'Competitor Analysis',
			
 
				+                                    'Performance Tracking',
			
 
				+                                    'Brand Guidelines'
			
 
				+                                ].map((tool) => (
			
 
				+                                    <div 
			
 
				+                                        key={tool} 
			
 
				+                                        className="p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300 cursor-pointer group"
			
 
				+                                    >
			
 
				+                                        <span className="text-gray-600 group-hover:text-brand-purple transition-colors">{tool}</span>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default BrandGrowth;
			
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -0,0 +1,231 @@
 
				+import { useState } from 'react';
			
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				+
			
 
				+function Contact() {
			
 
				+    const { t } = useLanguage();
			
 
				+    const [formData, setFormData] = useState({
			
 
				+        name: '',
			
 
				+        email: '',
			
 
				+        subject: '',
			
 
				+        message: ''
			
 
				+    });
			
 
				+    const [isSubmitting, setIsSubmitting] = useState(false);
			
 
				+    const [submitStatus, setSubmitStatus] = useState(null);
			
 
				+
			
 
				+    const handleChange = (e) => {
			
 
				+        setFormData({
			
 
				+            ...formData,
			
 
				+            [e.target.name]: e.target.value
			
 
				+        });
			
 
				+    };
			
 
				+
			
 
				+    const handleSubmit = async (e) => {
			
 
				+        e.preventDefault();
			
 
				+        setIsSubmitting(true);
			
 
				+        
			
 
				+        try {
			
 
				+            const response = await fetch(`${API_HOST}/api/v1/onboard/contact`, {
			
 
				+                method: 'POST',
			
 
				+                headers: {
			
 
				+                    'Content-Type': 'application/json',
			
 
				+                },
			
 
				+                body: JSON.stringify(formData)
			
 
				+            });
			
 
				+
			
 
				+            if (response.ok) {
			
 
				+                setSubmitStatus('success');
			
 
				+                setFormData({ name: '', email: '', subject: '', message: '' });
			
 
				+            } else {
			
 
				+                setSubmitStatus('error');
			
 
				+            }
			
 
				+        } catch (error) {
			
 
				+            setSubmitStatus('error');
			
 
				+            console.error('Contact form submission error:', error);
			
 
				+        } finally {
			
 
				+            setIsSubmitting(false);
			
 
				+        }
			
 
				+    };
			
 
				+
			
 
				+    const contactMethods = [
			
 
				+        {
			
 
				+            icon: '📧',
			
 
				+            title: t('contact.methods.email.title'),
			
 
				+            value: 'contact@byom.ai',
			
 
				+            link: 'mailto:contact@byom.ai'
			
 
				+        },
			
 
				+        {
			
 
				+            icon: '📱',
			
 
				+            title: t('contact.methods.phone.title'),
			
 
				+            value: '+33 1 23 45 67 89',
			
 
				+            link: 'tel:+33123456789'
			
 
				+        },
			
 
				+        {
			
 
				+            icon: '📍',
			
 
				+            title: t('contact.methods.location.title'),
			
 
				+            value: 'Paris, France',
			
 
				+            link: 'https://maps.google.com/?q=Paris,France'
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('contact.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('contact.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Main content */}
			
 
				+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
			
 
				+                    {/* Contact Form */}
			
 
				+                    <div className="lg:col-span-2">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                            <h2 className="text-2xl font-medium text-gray-900 mb-8">{t('contact.form.title')}</h2>
			
 
				+                            <form onSubmit={handleSubmit} className="space-y-6">
			
 
				+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
			
 
				+                                    <div>
			
 
				+                                        <label className="block text-sm text-gray-700 mb-2" htmlFor="name">
			
 
				+                                            {t('contact.form.name')}
			
 
				+                                        </label>
			
 
				+                                        <input
			
 
				+                                            type="text"
			
 
				+                                            id="name"
			
 
				+                                            name="name"
			
 
				+                                            value={formData.name}
			
 
				+                                            onChange={handleChange}
			
 
				+                                            required
			
 
				+                                            className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
			
 
				+                                        />
			
 
				+                                    </div>
			
 
				+                                    <div>
			
 
				+                                        <label className="block text-sm text-gray-700 mb-2" htmlFor="email">
			
 
				+                                            {t('contact.form.email')}
			
 
				+                                        </label>
			
 
				+                                        <input
			
 
				+                                            type="email"
			
 
				+                                            id="email"
			
 
				+                                            name="email"
			
 
				+                                            value={formData.email}
			
 
				+                                            onChange={handleChange}
			
 
				+                                            required
			
 
				+                                            className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
			
 
				+                                        />
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <label className="block text-sm text-gray-700 mb-2" htmlFor="subject">
			
 
				+                                        {t('contact.form.subject')}
			
 
				+                                    </label>
			
 
				+                                    <input
			
 
				+                                        type="text"
			
 
				+                                        id="subject"
			
 
				+                                        name="subject"
			
 
				+                                        value={formData.subject}
			
 
				+                                        onChange={handleChange}
			
 
				+                                        required
			
 
				+                                        className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
			
 
				+                                    />
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <label className="block text-sm text-gray-700 mb-2" htmlFor="message">
			
 
				+                                        {t('contact.form.message')}
			
 
				+                                    </label>
			
 
				+                                    <textarea
			
 
				+                                        id="message"
			
 
				+                                        name="message"
			
 
				+                                        value={formData.message}
			
 
				+                                        onChange={handleChange}
			
 
				+                                        required
			
 
				+                                        rows="6"
			
 
				+                                        className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent resize-none"
			
 
				+                                    ></textarea>
			
 
				+                                </div>
			
 
				+                                <button
			
 
				+                                    type="submit"
			
 
				+                                    disabled={isSubmitting}
			
 
				+                                    className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
			
 
				+                                >
			
 
				+                                    <span className="flex items-center gap-2">
			
 
				+                                        {isSubmitting ? t('contact.form.sending') : t('contact.form.send')}
			
 
				+                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                                    </span>
			
 
				+                                </button>
			
 
				+                                {submitStatus === 'success' && (
			
 
				+                                    <p className="text-green-600 text-sm mt-4">{t('contact.form.success')}</p>
			
 
				+                                )}
			
 
				+                                {submitStatus === 'error' && (
			
 
				+                                    <p className="text-red-600 text-sm mt-4">{t('contact.form.error')}</p>
			
 
				+                                )}
			
 
				+                            </form>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Contact Info */}
			
 
				+                    <div className="lg:col-span-1">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg p-6">
			
 
				+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('contact.methods.title')}</h3>
			
 
				+                            <div className="space-y-6">
			
 
				+                                {contactMethods.map((method) => (
			
 
				+                                    <a
			
 
				+                                        key={method.title}
			
 
				+                                        href={method.link}
			
 
				+                                        target="_blank"
			
 
				+                                        rel="noopener noreferrer"
			
 
				+                                        className="block p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300"
			
 
				+                                    >
			
 
				+                                        <div className="flex items-center gap-4">
			
 
				+                                            <span className="text-2xl">{method.icon}</span>
			
 
				+                                            <div>
			
 
				+                                                <h4 className="text-sm font-medium text-gray-900">{method.title}</h4>
			
 
				+                                                <p className="text-sm text-gray-600">{method.value}</p>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                    </a>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                        {/* Social Links */}
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg p-6 mt-6">
			
 
				+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('contact.social.title')}</h3>
			
 
				+                            <div className="space-y-4">
			
 
				+                                {[
			
 
				+                                    { name: 'Twitter', url: 'https://twitter.com/byom' },
			
 
				+                                    { name: 'LinkedIn', url: 'https://linkedin.com/company/byom' },
			
 
				+                                    { name: 'Instagram', url: 'https://instagram.com/byom' }
			
 
				+                                ].map((social) => (
			
 
				+                                    <a
			
 
				+                                        key={social.name}
			
 
				+                                        href={social.url}
			
 
				+                                        target="_blank"
			
 
				+                                        rel="noopener noreferrer"
			
 
				+                                        className="block p-3 rounded-xl hover:bg-gray-50 transition-colors duration-300 text-sm text-gray-600 hover:text-brand-purple"
			
 
				+                                    >
			
 
				+                                        {social.name}
			
 
				+                                    </a>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Contact;
			
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,3 +1,4 @@
 
				+import Footer from '../components/Footer';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				 
			
 
				 function Home() {
			
@@ -62,34 +63,11 @@ function Home() {
 
				                                 playsInline
			
 
				                             >
			
 
				                                 <source src="/video.mp4" type="video/mp4" />
			
 
				-                                {/* Fallback image if video fails to load */}
			
 
				-                                <img
			
 
				-                                    src="/path-to-fallback-image.jpg"
			
 
				-                                    alt="AI Analytics Dashboard"
			
 
				-                                    className="absolute inset-0 w-full h-full object-cover rounded-2xl"
			
 
				-                                />
			
 
				                             </video>
			
 
				 
			
 
				                             {/* Gradient Overlay */}
			
 
				                             <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl"></div>
			
 
				 
			
 
				-                            {/* Content */}
			
 
				-                            {/* <div className="absolute inset-0 flex flex-col items-center justify-center p-8">
			
 
				-                                <div className="relative z-10 text-center">
			
 
				-                                    <div className="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-xl">
			
 
				-                                        <div className="flex items-center gap-4 mb-4">
			
 
				-                                            <div className="w-2 h-2 rounded-full bg-brand-purple animate-pulse"></div>
			
 
				-                                            <div className="w-2 h-2 rounded-full bg-brand-pink animate-pulse delay-100"></div>
			
 
				-                                            <div className="w-2 h-2 rounded-full bg-brand-blue animate-pulse delay-200"></div>
			
 
				-                                        </div>
			
 
				-                                        <div className="space-y-2">
			
 
				-                                            <div className="h-2 w-32 bg-gray-200 rounded-full"></div>
			
 
				-                                            <div className="h-2 w-24 bg-gray-200 rounded-full"></div>
			
 
				-                                        </div>
			
 
				-                                    </div>
			
 
				-                                </div>
			
 
				-                            </div> */}
			
 
				-
			
 
				                             {/* Interactive button */}
			
 
				                             <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
			
 
				                                 <div className="bg-black text-white rounded-full px-6 py-3 text-sm cursor-pointer group-hover:px-8 transition-all duration-300 flex items-center gap-2 hover:bg-brand-purple">
			
@@ -101,8 +79,9 @@ function Home() {
 
				                     </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default Home; 
			
 
				+export default Home;
			
--- a/src/pages/ImageGeneration.jsx
+++ b/src/pages/ImageGeneration.jsx
@@ -0,0 +1,139 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+
			
 
				+function ImageGeneration() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    const features = [
			
 
				+        {
			
 
				+            id: 1,
			
 
				+            title: 'Brand Style Transfer',
			
 
				+            description: t('imageGen.features.styleTransfer.description'),
			
 
				+            icon: '🎨',
			
 
				+            stats: {
			
 
				+                styles: '25+',
			
 
				+                speed: '< 30s',
			
 
				+                quality: 'HD'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 2,
			
 
				+            title: 'Product Visualization',
			
 
				+            description: t('imageGen.features.product.description'),
			
 
				+            icon: '📦',
			
 
				+            stats: {
			
 
				+                formats: '12+',
			
 
				+                angles: '360°',
			
 
				+                backgrounds: '50+'
			
 
				+            }
			
 
				+        },
			
 
				+        {
			
 
				+            id: 3,
			
 
				+            title: 'Social Media Content',
			
 
				+            description: t('imageGen.features.social.description'),
			
 
				+            icon: '📱',
			
 
				+            stats: {
			
 
				+                templates: '100+',
			
 
				+                formats: 'All',
			
 
				+                customization: 'Full'
			
 
				+            }
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('imageGen.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('imageGen.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Features Overview */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('imageGen.features.title')}</h2>
			
 
				+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
			
 
				+                        {features.map((feature) => (
			
 
				+                            <div key={feature.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
			
 
				+                                <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
			
 
				+                                    <span className="text-xl">{feature.icon}</span>
			
 
				+                                </div>
			
 
				+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{feature.title}</h3>
			
 
				+                                <p className="text-gray-600 mb-6">{feature.description}</p>
			
 
				+                                <div className="h-px bg-gray-100 mb-6"></div>
			
 
				+                                <div className="grid grid-cols-3 gap-4">
			
 
				+                                    {Object.entries(feature.stats).map(([key, value]) => (
			
 
				+                                        <div key={key}>
			
 
				+                                            <span className="text-sm text-gray-500 block capitalize">{key}</span>
			
 
				+                                            <span className="font-medium text-brand-purple">{value}</span>
			
 
				+                                        </div>
			
 
				+                                    ))}
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Image Generator Demo and Style Presets */}
			
 
				+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
			
 
				+                    <div className="lg:col-span-2">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
			
 
				+                            <div className="relative aspect-video">
			
 
				+                                <div className="absolute inset-0 grid grid-cols-2 gap-4 p-6">
			
 
				+                                    <div className="bg-gray-100 rounded-xl"></div>
			
 
				+                                    <div className="bg-gray-100 rounded-xl"></div>
			
 
				+                                    <div className="bg-gray-100 rounded-xl"></div>
			
 
				+                                    <div className="bg-gray-100 rounded-xl"></div>
			
 
				+                                </div>
			
 
				+                                <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent"></div>
			
 
				+                            </div>
			
 
				+                            <div className="p-8">
			
 
				+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{t('imageGen.demo.title')}</h3>
			
 
				+                                <p className="text-gray-600 mb-6">{t('imageGen.demo.description')}</p>
			
 
				+                                <Link 
			
 
				+                                    to="/register" 
			
 
				+                                    className="inline-flex items-center gap-2 bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300"
			
 
				+                                >
			
 
				+                                    <span>{t('imageGen.demo.cta')}</span>
			
 
				+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                                </Link>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Style Presets */}
			
 
				+                    <div className="lg:col-span-1">
			
 
				+                        <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('imageGen.styles.title')}</h3>
			
 
				+                            <div className="space-y-3">
			
 
				+                                {['Minimalist', 'Brutalist', 'Retro', 'Modern', 'Abstract'].map((style) => (
			
 
				+                                    <div 
			
 
				+                                        key={style} 
			
 
				+                                        className="p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300 cursor-pointer group"
			
 
				+                                    >
			
 
				+                                        <span className="text-gray-600 group-hover:text-brand-purple transition-colors">{style}</span>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default ImageGeneration;
			
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,83 +1,116 @@
 
				 import { useState } from 'react';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+import { Link, useNavigate } from 'react-router-dom';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				 
			
 
				 function Login() {
			
 
				     const [email, setEmail] = useState('');
			
 
				-    const [isFocused, setIsFocused] = useState(false);
			
 
				+    const [isLoading, setIsLoading] = useState(false);
			
 
				+    const [error, setError] = useState('');
			
 
				     const { t } = useLanguage();
			
 
				+    const navigate = useNavigate();
			
 
				 
			
 
				-    const handleSubmit = (e) => {
			
 
				+    const handleSubmit = async (e) => {
			
 
				         e.preventDefault();
			
 
				-        // Handle login logic here
			
 
				-        console.log('Login with:', email);
			
 
				+        setIsLoading(true);
			
 
				+        setError('');
			
 
				+
			
 
				+        try {
			
 
				+            const response = await fetch(`${API_HOST}/api/v1/gw/user/host?email=${email}`, {
			
 
				+                method: 'GET',
			
 
				+            });
			
 
				+        
			
 
				+            const data = await response.json();
			
 
				+            if (data.redirect) {
			
 
				+                window.location.replace(data.redirect);
			
 
				+            }
			
 
				+        } catch (err) {
			
 
				+            console.error('Error:', err);
			
 
				+        } finally {
			
 
				+            setIsLoading(false);
			
 
				+        }
			
 
				+
			
 
				     };
			
 
				 
			
 
				     return (
			
 
				-        <div className="min-h-screen flex items-center justify-center px-4 relative">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
			
 
				-                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
			
 
				-                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="w-full max-w-md relative">
			
 
				-                {/* Header */}
			
 
				-                <div className="text-center">
			
 
				-                    <h2 className="text-[40px] font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				                         {t('login.title')}
			
 
				-                        <span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></span>
			
 
				-                    </h2>
			
 
				-                    <p className="mt-2 text-sm text-gray-600">
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				                         {t('login.subtitle')}
			
 
				                     </p>
			
 
				                 </div>
			
 
				 
			
 
				-                {/* Form */}
			
 
				-                <form onSubmit={handleSubmit} className="mt-12">
			
 
				-                    <div className="space-y-6">
			
 
				-                        <div className="relative">
			
 
				-                            <label htmlFor="email" className="sr-only">
			
 
				-                                Email address
			
 
				-                            </label>
			
 
				-                            <input
			
 
				-                                id="email"
			
 
				-                                name="email"
			
 
				-                                type="email"
			
 
				-                                required
			
 
				-                                value={email}
			
 
				-                                onChange={(e) => setEmail(e.target.value)}
			
 
				-                                onFocus={() => setIsFocused(true)}
			
 
				-                                onBlur={() => setIsFocused(false)}
			
 
				-                                placeholder="Email address"
			
 
				-                                className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
			
 
				-                            />
			
 
				-                            <div className={`absolute inset-0 rounded-full border border-brand-purple transform scale-105 opacity-0 transition-all duration-300 ${isFocused ? 'opacity-10' : ''}`}></div>
			
 
				-                        </div>
			
 
				+                {/* Login Form */}
			
 
				+                <div className="max-w-md mx-auto">
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                        {error && (
			
 
				+                            <div className="p-4 rounded-lg bg-red-50 text-red-600 text-sm mb-6">
			
 
				+                                {error}
			
 
				+                            </div>
			
 
				+                        )}
			
 
				+
			
 
				+                        <form onSubmit={handleSubmit} className="space-y-6">
			
 
				+                            <div>
			
 
				+                                <label htmlFor="email" className="block text-sm text-gray-700 mb-2">
			
 
				+                                    Email address
			
 
				+                                </label>
			
 
				+                                <input
			
 
				+                                    id="email"
			
 
				+                                    name="email"
			
 
				+                                    type="email"
			
 
				+                                    required
			
 
				+                                    value={email}
			
 
				+                                    onChange={(e) => setEmail(e.target.value)}
			
 
				+                                    placeholder="Enter your email"
			
 
				+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
			
 
				+                                    disabled={isLoading}
			
 
				+                                />
			
 
				+                            </div>
			
 
				 
			
 
				-                        <div className="relative group">
			
 
				                             <button
			
 
				                                 type="submit"
			
 
				-                                className="flex w-full justify-center items-center rounded-full bg-brand-purple px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-brand-purple/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-purple transition-all gap-2"
			
 
				+                                disabled={isLoading}
			
 
				+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
			
 
				                             >
			
 
				-                                <span>{t('login.continue')}</span>
			
 
				-                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				-                            </button>
			
 
				-                            <div className="absolute inset-0 rounded-full bg-brand-purple opacity-0 group-hover:opacity-10 transform scale-105 transition-all"></div>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </form>
			
 
				+                            {isLoading ? (
			
 
				+                                <span>Processing...</span>
			
 
				+                            ) : (
			
 
				+                                <span className="flex items-center gap-2">
			
 
				+                                    {t('login.continue')}
			
 
				+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                                </span>
			
 
				+                            )}
			
 
				+                        </button>
			
 
				+                    </form>
			
 
				+                </div>
			
 
				 
			
 
				-                {/* Footer */}
			
 
				-                <p className="mt-8 text-center text-sm text-gray-500">
			
 
				-                    {t('login.noAccount')}{' '}
			
 
				-                    <a href="/pricing" className="font-medium text-brand-purple hover:text-brand-purple/80 relative inline-block group">
			
 
				-                        {t('login.viewPricing')}
			
 
				-                        <span className="absolute bottom-0 left-0 w-full h-0.5 bg-brand-purple transform scale-x-0 transition-transform group-hover:scale-x-100"></span>
			
 
				-                    </a>
			
 
				-                </p>
			
 
				+                <div className="mt-6 text-center">
			
 
				+                    <p className="text-sm text-gray-500">
			
 
				+                        {t('login.noAccount')}{' '}
			
 
				+                        <Link to="/pricing" className="text-brand-purple hover:text-brand-purple/80 transition-colors">
			
 
				+                            {t('login.viewPricing')}
			
 
				+                        </Link>
			
 
				+                    </p>
			
 
				+                </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default Login; 
			
 
				+export default Login;
			
--- a/src/pages/Payment.jsx
+++ b/src/pages/Payment.jsx
@@ -1,36 +1,41 @@
 
				 import { useState } from 'react';
			
 
				 import { useSearchParams } from 'react-router-dom';
			
 
				-import { useLanguage } from '../context/LanguageContext';
			
 
				+import PropTypes from 'prop-types';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				 
			
 
				-function Payment() {
			
 
				+function Payment({ pricingData }) {
			
 
				     const [searchParams] = useSearchParams();
			
 
				-    const { t } = useLanguage();
			
 
				     const [message, setMessage] = useState('');
			
 
				     const [isLoading, setIsLoading] = useState(false);
			
 
				 
			
 
				     const selectedPlan = searchParams.get('plan') || 'starter';
			
 
				-    const planAmounts = {
			
 
				-        starter: 29,
			
 
				-        professional: 99,
			
 
				-        business: 249
			
 
				-    };
			
 
				+    const billingCycle = searchParams.get('billing') || 'monthly';
			
 
				+    const email = searchParams.get('email');
			
 
				+
			
 
				+    // Find the selected plan details from pricingData
			
 
				+    const planDetails = pricingData?.find(plan => 
			
 
				+        plan.name.toLowerCase() === selectedPlan.toLowerCase()
			
 
				+    );
			
 
				+
			
 
				+    const amount = planDetails ? (
			
 
				+        billingCycle === 'yearly' 
			
 
				+            ? planDetails.prices.yearly 
			
 
				+            : planDetails.prices.monthly
			
 
				+    ) : 0;
			
 
				 
			
 
				     const handleCheckout = async (e) => {
			
 
				         e.preventDefault();
			
 
				         setIsLoading(true);
			
 
				         try {
			
 
				-            // Step 1: Create payment intent through your backend
			
 
				             const formData = new FormData();
			
 
				-            formData.append('lookup_key', `${selectedPlan}_monthly`);
			
 
				-
			
 
				-            // Get email from URL parameters
			
 
				-            const userEmail = searchParams.get('email');
			
 
				-            if (!userEmail) {
			
 
				-                throw new Error('Email not found. Please try registering again.');
			
 
				-            }
			
 
				-            formData.append('email', userEmail);
			
 
				+            formData.append('priceId', billingCycle === 'yearly' 
			
 
				+                ? planDetails?.prices.yearlyPriceId 
			
 
				+                : planDetails?.prices.monthlyPriceId
			
 
				+            );
			
 
				+            formData.append('email', email);
			
 
				 
			
 
				-            const response = await fetch('http://192.168.1.35:8080/api/v1/create-checkout-session', {
			
 
				+            const response = await fetch(`${API_HOST}/api/v1/onboard/create-checkout-session`, {
			
 
				                 method: 'POST',
			
 
				                 body: formData,
			
 
				             });
			
@@ -40,10 +45,7 @@ function Payment() {
 
				                 throw new Error(errorData.error || 'Failed to create checkout session');
			
 
				             }
			
 
				 
			
 
				-            // Step 2: Get the sessionId from your backend
			
 
				-            const { sessionId, url } = await response.json();
			
 
				-
			
 
				-            // Step 3: Redirect to Stripe checkout using the returned URL
			
 
				+            const { url } = await response.json();
			
 
				             window.location.href = url;
			
 
				 
			
 
				         } catch (error) {
			
@@ -54,75 +56,101 @@ function Payment() {
 
				     };
			
 
				 
			
 
				     return (
			
 
				-        <div className="min-h-screen flex items-center justify-center px-4 relative">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
			
 
				-                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
			
 
				-                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="w-full max-w-md">
			
 
				-                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
			
 
				-                    <div className="text-center mb-8">
			
 
				-                        <h2 className="text-[40px] font-light tracking-tight text-gray-900 relative inline-block">
			
 
				-                            Complete Setup
			
 
				-                            <span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></span>
			
 
				-                        </h2>
			
 
				-                        <p className="mt-2 text-sm text-gray-600">
			
 
				-                            Selected plan: <span className="font-medium capitalize">{selectedPlan}</span>
			
 
				-                        </p>
			
 
				-                    </div>
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        Complete Setup
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        Selected plan: <span className="text-brand-purple font-medium uppercase">{selectedPlan}</span>
			
 
				+                    </p>
			
 
				+                </div>
			
 
				 
			
 
				-                    {message ? (
			
 
				-                        <div className="bg-yellow-50 rounded-2xl p-6">
			
 
				-                            <p className="text-yellow-800">{message}</p>
			
 
				-                        </div>
			
 
				-                    ) : (
			
 
				-                        <div className="space-y-8">
			
 
				-                            <div className="bg-gray-50 rounded-2xl p-6">
			
 
				-                                <div className="flex justify-between items-center mb-4">
			
 
				-                                    <span className="text-gray-600">Plan</span>
			
 
				-                                    <span className="font-medium capitalize">{selectedPlan}</span>
			
 
				+                {/* Content */}
			
 
				+                <div className="max-w-md mx-auto">
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                        {message && (
			
 
				+                            <div className="p-4 rounded-lg bg-yellow-50 text-yellow-800 text-sm mb-6">
			
 
				+                                {message}
			
 
				+                            </div>
			
 
				+                        )}
			
 
				+                        <div className="space-y-6">
			
 
				+                            <div className="space-y-4">
			
 
				+                                <div className="flex justify-between items-center">
			
 
				+                                    <span className="text-sm text-gray-600">Plan</span>
			
 
				+                                    <span className="font-medium text-gray-900 uppercase">{selectedPlan}</span>
			
 
				                                 </div>
			
 
				-                                <div className="flex justify-between items-center mb-4">
			
 
				-                                    <span className="text-gray-600">Amount</span>
			
 
				-                                    <span className="font-medium">${planAmounts[selectedPlan]}.00 / month</span>
			
 
				+                                <div className="h-px bg-gray-100"></div>
			
 
				+                                <div className="flex justify-between items-center">
			
 
				+                                    <span className="text-sm text-gray-600">Amount</span>
			
 
				+                                    <span className="font-medium text-gray-900">
			
 
				+                                        ${amount}.00 / {billingCycle === 'yearly' ? 'year' : 'month'}
			
 
				+                                    </span>
			
 
				                                 </div>
			
 
				+                                <div className="h-px bg-gray-100"></div>
			
 
				                                 <div className="flex justify-between items-center">
			
 
				-                                    <span className="text-gray-600">Trial Period</span>
			
 
				-                                    <span className="text-brand-purple font-medium">14 days free</span>
			
 
				+                                    <span className="text-sm text-gray-600">Trial Period</span>
			
 
				+                                    <span className="font-medium text-gray-900">14 days free</span>
			
 
				                                 </div>
			
 
				                             </div>
			
 
				+
			
 
				                             <form onSubmit={handleCheckout}>
			
 
				-                                <input type="hidden" name="lookup_key" value={`${selectedPlan}_monthly`} />
			
 
				                                 <button
			
 
				                                     type="submit"
			
 
				                                     disabled={isLoading}
			
 
				-                                    className="w-full rounded-full bg-brand-purple px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-brand-purple/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-purple transition-all flex items-center justify-center gap-2 disabled:opacity-70"
			
 
				+                                    className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
			
 
				                                 >
			
 
				                                     {isLoading ? (
			
 
				-                                        <>
			
 
				-                                            <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
			
 
				-                                            <span>Processing...</span>
			
 
				-                                        </>
			
 
				+                                        <span>Processing...</span>
			
 
				                                     ) : (
			
 
				-                                        <>
			
 
				-                                            <span>Proceed to checkout</span>
			
 
				+                                        <span className="flex items-center gap-2">
			
 
				+                                            Proceed to checkout
			
 
				                                             <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				-                                        </>
			
 
				+                                        </span>
			
 
				                                     )}
			
 
				                                 </button>
			
 
				                             </form>
			
 
				-                        </div>
			
 
				-                    )}
			
 
				 
			
 
				-                    <p className="mt-4 text-center text-sm text-gray-500">
			
 
				-                        Secure payment powered by Stripe
			
 
				-                    </p>
			
 
				+                            <div className="text-center">
			
 
				+                                <p className="text-sm text-gray-500">
			
 
				+                                    Secure payment powered by Stripe
			
 
				+                                </p>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default Payment; 
			
 
				+Payment.propTypes = {
			
 
				+    pricingData: PropTypes.arrayOf(
			
 
				+        PropTypes.shape({
			
 
				+            name: PropTypes.string.isRequired,
			
 
				+            prices: PropTypes.shape({
			
 
				+                monthly: PropTypes.number.isRequired,
			
 
				+                yearly: PropTypes.number.isRequired,
			
 
				+                monthlyPriceId: PropTypes.string.isRequired,
			
 
				+                yearlyPriceId: PropTypes.string.isRequired
			
 
				+            }).isRequired
			
 
				+        })
			
 
				+    )
			
 
				+};
			
 
				+
			
 
				+Payment.defaultProps = {
			
 
				+    pricingData: []
			
 
				+};
			
 
				+
			
 
				+export default Payment;
			
--- a/src/pages/PaymentCancel.jsx
+++ b/src/pages/PaymentCancel.jsx
@@ -1,42 +1,70 @@
 
				-import { useNavigate } from 'react-router-dom';
			
 
				-import { useLanguage } from '../context/LanguageContext';
			
 
				+import { useNavigate, Link } from 'react-router-dom';
			
 
				+import Footer from '../components/Footer';
			
 
				 
			
 
				 function PaymentCancel() {
			
 
				     const navigate = useNavigate();
			
 
				-    const { t } = useLanguage();
			
 
				 
			
 
				     return (
			
 
				-        <div className="min-h-screen flex items-center justify-center px-4 relative">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
			
 
				-                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
			
 
				-                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="w-full max-w-md">
			
 
				-                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
			
 
				-                    <div className="space-y-8">
			
 
				-                        <div className="bg-yellow-50 rounded-2xl p-6 text-center">
			
 
				-                            <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
			
 
				-                                <svg className="w-8 h-8 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			
 
				-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
			
 
				-                                </svg>
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h1 className="text-[60px] leading-tight font-light tracking-tight text-gray-900 lg:text-[80px] relative mb-6">
			
 
				+                        <span className="relative inline-block">
			
 
				+                            Payment Cancelled
			
 
				+                            <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                        </span>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl">
			
 
				+                        Your payment was cancelled. No charges were made.
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
			
 
				+                    <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 space-y-8 border border-gray-100 relative group">
			
 
				+                        {/* Gradient border */}
			
 
				+                        <div className="absolute inset-0 rounded-3xl border border-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20 pointer-events-none"></div>
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center">
			
 
				+                                <span className="text-2xl text-brand-purple">×</span>
			
 
				                             </div>
			
 
				-                            <h3 className="text-xl font-semibold text-gray-900 mb-2">Payment Cancelled</h3>
			
 
				-                            <p className="text-gray-600">Your payment was cancelled. No charges were made.</p>
			
 
				                         </div>
			
 
				-                        <button
			
 
				-                            onClick={() => navigate('/payment')}
			
 
				-                            className="w-full rounded-full bg-brand-purple px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-brand-purple/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-purple transition-all flex items-center justify-center gap-2"
			
 
				-                        >
			
 
				-                            <span>Try again</span>
			
 
				-                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				-                        </button>
			
 
				+
			
 
				+                        <div className="text-center space-y-4">
			
 
				+                            <p className="text-gray-500">
			
 
				+                                Would you like to try again or go back to the pricing page?
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <div className="space-y-4">
			
 
				+                            <button
			
 
				+                                onClick={() => navigate('/payment')}
			
 
				+                                className="w-full bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
			
 
				+                            >
			
 
				+                                <span>Try again</span>
			
 
				+                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                            </button>
			
 
				+                            <Link 
			
 
				+                                to="/pricing" 
			
 
				+                                className="w-full bg-gray-100 text-gray-900 rounded-full px-6 py-3 text-sm group hover:bg-brand-purple hover:text-white transition-colors duration-300 flex items-center justify-center gap-2"
			
 
				+                            >
			
 
				+                                <span>View pricing</span>
			
 
				+                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                            </Link>
			
 
				+                        </div>
			
 
				                     </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default PaymentCancel; 
			
 
				+export default PaymentCancel;
			
--- a/src/pages/PaymentSuccess.jsx
+++ b/src/pages/PaymentSuccess.jsx
@@ -1,58 +1,69 @@
 
				-import { useEffect, useState } from 'react';
			
 
				-import { useSearchParams, useNavigate } from 'react-router-dom';
			
 
				-import { useLanguage } from '../context/LanguageContext';
			
 
				+import { useSearchParams } from 'react-router-dom';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				 
			
 
				 function PaymentSuccess() {
			
 
				     const [searchParams] = useSearchParams();
			
 
				-    const { t } = useLanguage();
			
 
				-    const [isLoading, setIsLoading] = useState(false);
			
 
				     const sessionId = searchParams.get('session_id');
			
 
				 
			
 
				     return (
			
 
				-        <div className="min-h-screen flex items-center justify-center px-4 relative">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
			
 
				-                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
			
 
				-                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="w-full max-w-md">
			
 
				-                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
			
 
				-                    <div className="space-y-8">
			
 
				-                        <div className="bg-green-50 rounded-2xl p-6 text-center">
			
 
				-                            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
			
 
				-                                <svg className="w-8 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			
 
				-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
			
 
				-                                </svg>
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        Payment Successful
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        Thank you for subscribing to our service.
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="max-w-md mx-auto">
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-8">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16 relative">
			
 
				+                                <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
			
 
				+                                <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                    <span className="text-3xl text-brand-purple">✓</span>
			
 
				+                                </div>
			
 
				                             </div>
			
 
				-                            <h3 className="text-xl font-semibold text-gray-900 mb-2">Subscription Successful!</h3>
			
 
				-                            <p className="text-gray-600">Thank you for subscribing to our service.</p>
			
 
				                         </div>
			
 
				-                        <form action="http://192.168.1.35:8080/api/v1/create-portal-session" method="POST">
			
 
				+
			
 
				+                        <div className="text-center">
			
 
				+                            <p className="text-gray-600">
			
 
				+                                Your subscription is now active. You can start using our services right away.
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <div className="h-px bg-gray-100"></div>
			
 
				+
			
 
				+                        <form action={`${API_HOST}/api/v1/onboard/create-portal-session`} method="POST">
			
 
				                             <input type="hidden" id="session-id" name="session_id" value={sessionId} />
			
 
				                             <button
			
 
				                                 type="submit"
			
 
				-                                disabled={isLoading}
			
 
				-                                className="w-full rounded-full bg-gray-900 px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all flex items-center justify-center gap-2"
			
 
				+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
			
 
				                             >
			
 
				-                                {isLoading ? (
			
 
				-                                    <>
			
 
				-                                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
			
 
				-                                        <span>Processing...</span>
			
 
				-                                    </>
			
 
				-                                ) : (
			
 
				-                                    <>
			
 
				-                                        <span>Manage billing information</span>
			
 
				-                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				-                                    </>
			
 
				-                                )}
			
 
				+                                <span className="flex items-center gap-2">
			
 
				+                                    Manage billing information
			
 
				+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                                </span>
			
 
				                             </button>
			
 
				                         </form>
			
 
				                     </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default PaymentSuccess; 
			
 
				+export default PaymentSuccess;
			
--- a/src/pages/Pricing.jsx
+++ b/src/pages/Pricing.jsx
@@ -1,139 +1,137 @@
 
				-import { Link } from 'react-router-dom';
			
 
				+import PropTypes from 'prop-types';
			
 
				 import { useState } from 'react';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				 
			
 
				-function Pricing() {
			
 
				+function Pricing({ pricingData, isLoading }) {
			
 
				     const [hoveredPlan, setHoveredPlan] = useState(null);
			
 
				+    const [isYearly, setIsYearly] = useState(false);
			
 
				     const { t } = useLanguage();
			
 
				 
			
 
				-    const plans = [
			
 
				-        {
			
 
				-            name: 'Starter',
			
 
				-            price: '29',
			
 
				-            features: [
			
 
				-                'Basic AI trend analysis',
			
 
				-                '25 AI image generations/month',
			
 
				-                'Basic analytics dashboard',
			
 
				-                'Content calendar',
			
 
				-                'Email support',
			
 
				-                'Single user'
			
 
				-            ],
			
 
				-        },
			
 
				-        {
			
 
				-            name: 'Professional',
			
 
				-            price: '99',
			
 
				-            popular: true,
			
 
				-            features: [
			
 
				-                'Advanced AI trend predictions',
			
 
				-                '150 AI image generations/month',
			
 
				-                'Advanced analytics & insights',
			
 
				-                'Content strategy AI assistant',
			
 
				-                'Priority support',
			
 
				-                'Up to 3 team members',
			
 
				-                'Brand growth recommendations',
			
 
				-                'Social media scheduling'
			
 
				-            ],
			
 
				-        },
			
 
				-        {
			
 
				-            name: 'Business',
			
 
				-            price: '249',
			
 
				-            features: [
			
 
				-                'Custom AI solutions',
			
 
				-                'Unlimited image generations',
			
 
				-                'Multi-brand analytics',
			
 
				-                'Dedicated account manager',
			
 
				-                'API access',
			
 
				-                'Unlimited team members',
			
 
				-                'Custom integrations',
			
 
				-                'White-label reports'
			
 
				-            ],
			
 
				-        },
			
 
				-    ];
			
 
				-
			
 
				     return (
			
 
				-        <div className="py-24 sm:py-32 relative overflow-hidden">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none">
			
 
				-                <div className="absolute top-1/4 left-0 w-72 h-72 bg-brand-purple/10 rounded-full blur-3xl"></div>
			
 
				-                <div className="absolute bottom-1/4 right-0 w-72 h-72 bg-brand-pink/10 rounded-full blur-3xl"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="mx-auto max-w-7xl px-6 lg:px-8 relative">
			
 
				-                <div className="mx-auto max-w-4xl text-center">
			
 
				-                    <h2 className="text-base font-semibold leading-7 text-brand-purple inline-flex items-center gap-2">
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				                         {t('pricing.title')}
			
 
				-                        <span className="inline-block w-1 h-1 bg-brand-pink rounded-full animate-pulse"></span>
			
 
				-                    </h2>
			
 
				-                    <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl relative">
			
 
				-                        {t('pricing.subtitle')}
			
 
				-                        <span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-blue rounded-full"></span>
			
 
				-                    </p>
			
 
				-                    <p className="mt-6 text-lg leading-8 text-gray-600">
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				                         {t('pricing.description')}
			
 
				                     </p>
			
 
				                 </div>
			
 
				 
			
 
				-                <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 relative">
			
 
				-                    {plans.map((plan) => (
			
 
				-                        <div
			
 
				-                            key={plan.name}
			
 
				-                            className={`relative rounded-3xl p-8 transition-all duration-300 
			
 
				-                                ${plan.popular ? 'ring-2 ring-brand-purple' : 'ring-1 ring-gray-200'}
			
 
				-                                ${hoveredPlan === plan.name ? 'transform scale-105 bg-gradient-to-br from-white to-brand-light' : ''}`}
			
 
				-                            onMouseEnter={() => setHoveredPlan(plan.name)}
			
 
				-                            onMouseLeave={() => setHoveredPlan(null)}
			
 
				-                        >
			
 
				-                            {plan.popular && (
			
 
				-                                <span className="absolute -top-4 left-1/2 -translate-x-1/2 bg-brand-purple text-white text-xs px-4 py-1 rounded-full">
			
 
				-                                    {t('pricing.mostPopular')}
			
 
				-                                </span>
			
 
				-                            )}
			
 
				-                            <h3 className="text-lg font-semibold leading-8 text-gray-900">{plan.name}</h3>
			
 
				-                            <p className="mt-4 flex items-baseline">
			
 
				-                                <span className="text-5xl font-bold tracking-tight text-gray-900">${plan.price}</span>
			
 
				-                                <span className="ml-2 text-sm text-gray-600">{t('pricing.perMonth')}</span>
			
 
				-                            </p>
			
 
				-                            <ul className="mt-8 space-y-3 text-sm leading-6 text-gray-600">
			
 
				-                                {plan.features.map((feature, index) => (
			
 
				-                                    <li
			
 
				-                                        key={feature}
			
 
				-                                        className="flex gap-x-3 items-center transition-all duration-300"
			
 
				-                                        style={{
			
 
				-                                            transform: hoveredPlan === plan.name ? 'translateX(8px)' : 'none',
			
 
				-                                            transitionDelay: `${index * 50}ms`
			
 
				-                                        }}
			
 
				-                                    >
			
 
				-                                        <svg className="h-6 w-5 flex-none text-black" viewBox="0 0 20 20" fill="currentColor">
			
 
				-                                            <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
			
 
				-                                        </svg>
			
 
				-                                        {feature}
			
 
				-                                    </li>
			
 
				-                                ))}
			
 
				-                            </ul>
			
 
				-                            <Link
			
 
				-                                to={`/register?plan=${plan.name.toLowerCase()}`}
			
 
				-                                className={`mt-8 block rounded-full px-8 py-4 text-center text-sm font-semibold shadow-sm transition-all duration-300
			
 
				-                                    ${plan.popular
			
 
				-                                        ? 'bg-brand-purple text-white hover:bg-brand-purple/90'
			
 
				-                                        : 'bg-brand-light text-black hover:bg-brand-light/80'
			
 
				-                                    }`}
			
 
				-                            >
			
 
				-                                {t('pricing.getStarted')} {plan.name}
			
 
				-                            </Link>
			
 
				-                        </div>
			
 
				-                    ))}
			
 
				+                {/* Billing Toggle */}
			
 
				+                <div className="flex justify-center items-center mb-16">
			
 
				+                    <span className={`text-sm mr-4 transition-colors ${!isYearly ? 'text-black' : 'text-gray-500'}`}>Monthly</span>
			
 
				+                    <button 
			
 
				+                        onClick={() => setIsYearly(!isYearly)}
			
 
				+                        className="relative w-14 h-7 bg-gray-100 rounded-full p-1 transition-colors hover:bg-gray-200"
			
 
				+                    >
			
 
				+                        <div 
			
 
				+                            className="absolute top-1 left-1 w-5 h-5 bg-brand-purple rounded-full transition-transform duration-300"
			
 
				+                            style={{
			
 
				+                                transform: isYearly ? 'translateX(100%)' : 'translateX(0)',
			
 
				+                            }}
			
 
				+                        />
			
 
				+                    </button>
			
 
				+                    <span className={`text-sm ml-4 transition-colors ${isYearly ? 'text-black' : 'text-gray-500'}`}>
			
 
				+                        Yearly <span className="text-brand-purple">-20%</span>
			
 
				+                    </span>
			
 
				                 </div>
			
 
				 
			
 
				-                <div className="mt-16 text-center">
			
 
				-                    <p className="text-gray-600 text-sm flex items-center justify-center gap-2">
			
 
				-                        <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
			
 
				+                {/* Pricing Grid */}
			
 
				+                {isLoading ? (
			
 
				+                    <div className="text-center text-gray-500">Loading plans...</div>
			
 
				+                ) : (
			
 
				+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
			
 
				+                        {[...pricingData].reverse().map((plan) => (
			
 
				+                            <div
			
 
				+                                key={plan.name}
			
 
				+                                className={`relative bg-white rounded-2xl transition-all duration-300 ${
			
 
				+                                    hoveredPlan === plan.name ? 'transform -translate-y-2 shadow-xl' : 'shadow-lg'
			
 
				+                                } ${
			
 
				+                                    plan.popular ? 'ring-2 ring-brand-purple' : ''
			
 
				+                                }`}
			
 
				+                                onMouseEnter={() => setHoveredPlan(plan.name)}
			
 
				+                                onMouseLeave={() => setHoveredPlan(null)}
			
 
				+                            >
			
 
				+                                {plan.popular && (
			
 
				+                                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-brand-purple text-white px-4 py-1 rounded-full">
			
 
				+                                        <span className="text-sm">{t('pricing.mostPopular')}</span>
			
 
				+                                    </div>
			
 
				+                                )}
			
 
				+                                <div className="p-8">
			
 
				+                                    <h3 className="text-xl font-medium mb-4">{plan.name}</h3>
			
 
				+                                    <p className="text-sm text-gray-500 mb-4">{plan.description}</p>
			
 
				+                                    <div className="flex items-baseline mb-8">
			
 
				+                                        <span className="text-4xl font-light">
			
 
				+                                            ${isYearly ? plan.prices.yearly : plan.prices.monthly}
			
 
				+                                        </span>
			
 
				+                                        <span className="ml-2 text-gray-500">
			
 
				+                                            {isYearly ? t('pricing.perYear') : t('pricing.perMonth')}
			
 
				+                                        </span>
			
 
				+                                    </div>
			
 
				+                                    <div className="h-px bg-gray-100 mb-8"></div>
			
 
				+                                    <ul className="space-y-4 mb-8">
			
 
				+                                        {plan.features.map((feature) => (
			
 
				+                                            <li key={feature} className="flex items-start gap-3 text-sm text-gray-600">
			
 
				+                                                <span className="text-brand-purple">→</span>
			
 
				+                                                {feature}
			
 
				+                                            </li>
			
 
				+                                        ))}
			
 
				+                                    </ul>
			
 
				+                                    <button
			
 
				+                                        onClick={() => {window.location =`/register?plan=${plan.name.toLowerCase()}&billing=${isYearly ? 'yearly' : 'monthly'}`}}
			
 
				+                                        className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
			
 
				+                                    >
			
 
				+                                        <span>{t('pricing.getStarted')}</span>
			
 
				+                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                )}
			
 
				+
			
 
				+                <div className="text-center">
			
 
				+                    <p className="text-gray-500">
			
 
				                         {t('pricing.trial')}
			
 
				-                        <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
			
 
				                     </p>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default Pricing; 
			
 
				+Pricing.propTypes = {
			
 
				+    pricingData: PropTypes.arrayOf(
			
 
				+        PropTypes.shape({
			
 
				+            name: PropTypes.string.isRequired,
			
 
				+            description: PropTypes.string.isRequired,
			
 
				+            popular: PropTypes.bool,
			
 
				+            prices: PropTypes.shape({
			
 
				+                monthly: PropTypes.number.isRequired,
			
 
				+                yearly: PropTypes.number.isRequired
			
 
				+            }).isRequired,
			
 
				+            features: PropTypes.arrayOf(PropTypes.string).isRequired
			
 
				+        })
			
 
				+    ),
			
 
				+    isLoading: PropTypes.bool
			
 
				+};
			
 
				+
			
 
				+Pricing.defaultProps = {
			
 
				+    pricingData: [],
			
 
				+    isLoading: false
			
 
				+};
			
 
				+
			
 
				+export default Pricing;
			
--- a/src/pages/Privacy.jsx
+++ b/src/pages/Privacy.jsx
@@ -0,0 +1,63 @@
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+
			
 
				+function Privacy() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    const sections = [
			
 
				+        {
			
 
				+            title: t('privacy.collection.title'),
			
 
				+            content: t('privacy.collection.content')
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('privacy.usage.title'),
			
 
				+            content: t('privacy.usage.content')
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('privacy.sharing.title'),
			
 
				+            content: t('privacy.sharing.content')
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('privacy.security.title'),
			
 
				+            content: t('privacy.security.content')
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('privacy.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('privacy.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Privacy Content */}
			
 
				+                <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                    <div className="space-y-12">
			
 
				+                        {sections.map((section) => (
			
 
				+                            <div key={section.title}>
			
 
				+                                <h2 className="text-2xl font-medium text-gray-900 mb-4">{section.title}</h2>
			
 
				+                                <p className="text-gray-600 whitespace-pre-line leading-relaxed">{section.content}</p>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Privacy;
			
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@@ -1,6 +1,8 @@
 
				 import { useState } from 'react';
			
 
				-import { useSearchParams, useNavigate } from 'react-router-dom';
			
 
				+import { useSearchParams, useNavigate, Link } from 'react-router-dom';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				 
			
 
				 function Register() {
			
 
				     const [searchParams] = useSearchParams();
			
@@ -23,7 +25,7 @@ function Register() {
 
				             const id = Math.random().toString(36).substr(2, 9);
			
 
				             const token = Math.random().toString(36).substr(2, 9);
			
 
				 
			
 
				-            const response = await fetch('http://192.168.1.35:8080/api/v1/check-email', {
			
 
				+            const response = await fetch(`${API_HOST}/api/v1/onboard/check-email`, {
			
 
				                 method: 'POST',
			
 
				                 headers: {
			
 
				                     'Content-Type': 'application/json',
			
@@ -43,7 +45,7 @@ function Register() {
 
				                 throw new Error('Registration failed');
			
 
				             }
			
 
				 
			
 
				-            // Show success message and redirect
			
 
				+            // Navigate to registration success page instead of verify-email
			
 
				             navigate('/registration-success');
			
 
				         } catch (err) {
			
 
				             setError(err.message);
			
@@ -53,35 +55,39 @@ function Register() {
 
				     };
			
 
				 
			
 
				     return (
			
 
				-        <div className="min-h-screen flex items-center justify-center px-4 relative">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
			
 
				-                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
			
 
				-                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="w-full max-w-md">
			
 
				-                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
			
 
				-                    <div className="text-center">
			
 
				-                        <h2 className="text-[40px] font-light tracking-tight text-gray-900 relative inline-block">
			
 
				-                            Create Account
			
 
				-                            <span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></span>
			
 
				-                        </h2>
			
 
				-                        <p className="mt-2 text-sm text-gray-600">
			
 
				-                            Selected plan: <span className="font-medium capitalize">{selectedPlan}</span>
			
 
				-                        </p>
			
 
				-                    </div>
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('register.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('register.selectedPlan')}: <span className="text-brand-purple font-medium">{selectedPlan}</span>
			
 
				+                    </p>
			
 
				+                </div>
			
 
				 
			
 
				-                    {error && (
			
 
				-                        <div className="mt-4 p-4 bg-red-50 rounded-2xl text-red-600 text-sm">
			
 
				-                            {error}
			
 
				-                        </div>
			
 
				-                    )}
			
 
				+                {/* Registration Form */}
			
 
				+                <div className="max-w-md mx-auto">
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                        {error && (
			
 
				+                            <div className="p-4 rounded-lg bg-red-50 text-red-600 text-sm mb-6">
			
 
				+                                {error}
			
 
				+                            </div>
			
 
				+                        )}
			
 
				 
			
 
				-                    <form onSubmit={handleSubmit} className="mt-8 space-y-6">
			
 
				-                        <div className="space-y-4">
			
 
				+                        <form onSubmit={handleSubmit} className="space-y-6">
			
 
				                             <div>
			
 
				-                                <label htmlFor="name" className="sr-only">First Name</label>
			
 
				+                                <label htmlFor="name" className="block text-sm text-gray-700 mb-2">
			
 
				+                                    {t('register.firstName')}
			
 
				+                                </label>
			
 
				                                 <input
			
 
				                                     id="name"
			
 
				                                     name="name"
			
@@ -89,13 +95,15 @@ function Register() {
 
				                                     required
			
 
				                                     value={name}
			
 
				                                     onChange={(e) => setName(e.target.value)}
			
 
				-                                    placeholder="First Name"
			
 
				-                                    className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
			
 
				+                                    placeholder={t('register.firstNamePlaceholder')}
			
 
				+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
			
 
				                                 />
			
 
				                             </div>
			
 
				 
			
 
				                             <div>
			
 
				-                                <label htmlFor="surname" className="sr-only">Last Name</label>
			
 
				+                                <label htmlFor="surname" className="block text-sm text-gray-700 mb-2">
			
 
				+                                    {t('register.lastName')}
			
 
				+                                </label>
			
 
				                                 <input
			
 
				                                     id="surname"
			
 
				                                     name="surname"
			
@@ -103,13 +111,15 @@ function Register() {
 
				                                     required
			
 
				                                     value={surname}
			
 
				                                     onChange={(e) => setSurname(e.target.value)}
			
 
				-                                    placeholder="Last Name"
			
 
				-                                    className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
			
 
				+                                    placeholder={t('register.lastNamePlaceholder')}
			
 
				+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
			
 
				                                 />
			
 
				                             </div>
			
 
				 
			
 
				                             <div>
			
 
				-                                <label htmlFor="email" className="sr-only">Email address</label>
			
 
				+                                <label htmlFor="email" className="block text-sm text-gray-700 mb-2">
			
 
				+                                    {t('register.email')}
			
 
				+                                </label>
			
 
				                                 <input
			
 
				                                     id="email"
			
 
				                                     name="email"
			
@@ -117,44 +127,41 @@ function Register() {
 
				                                     required
			
 
				                                     value={email}
			
 
				                                     onChange={(e) => setEmail(e.target.value)}
			
 
				-                                    placeholder="Email address"
			
 
				-                                    className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
			
 
				+                                    placeholder={t('register.emailPlaceholder')}
			
 
				+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
			
 
				                                 />
			
 
				                             </div>
			
 
				-                        </div>
			
 
				 
			
 
				-                        <div>
			
 
				                             <button
			
 
				                                 type="submit"
			
 
				                                 disabled={isLoading}
			
 
				-                                className="relative flex w-full justify-center items-center rounded-full bg-brand-purple px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-brand-purple/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-purple transition-all gap-2 disabled:opacity-70"
			
 
				+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
			
 
				                             >
			
 
				-                                {isLoading ? (
			
 
				-                                    <>
			
 
				-                                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
			
 
				-                                        <span>Creating account...</span>
			
 
				-                                    </>
			
 
				-                                ) : (
			
 
				-                                    <>
			
 
				-                                        <span>Create account</span>
			
 
				-                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				-                                    </>
			
 
				-                                )}
			
 
				+                            {isLoading ? (
			
 
				+                                <span>{t('register.creating')}</span>
			
 
				+                            ) : (
			
 
				+                                <span className="flex items-center gap-2">
			
 
				+                                    {t('register.create')}
			
 
				+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                                </span>
			
 
				+                            )}
			
 
				                             </button>
			
 
				-                        </div>
			
 
				+                        </form>
			
 
				+                    </div>
			
 
				 
			
 
				-                        <p className="mt-4 text-center text-sm text-gray-500">
			
 
				-                            Already have an account?{' '}
			
 
				-                            <a href="/login" className="font-medium text-brand-purple hover:text-brand-purple/80 relative inline-block group">
			
 
				-                                Sign in
			
 
				-                                <span className="absolute bottom-0 left-0 w-full h-0.5 bg-brand-purple transform scale-x-0 transition-transform group-hover:scale-x-100"></span>
			
 
				-                            </a>
			
 
				+                    <div className="mt-6 text-center">
			
 
				+                        <p className="text-sm text-gray-500">
			
 
				+                            {t('register.haveAccount')}{' '}
			
 
				+                            <Link to="/login" className="text-brand-purple hover:text-brand-purple/80 transition-colors">
			
 
				+                                {t('register.signIn')}
			
 
				+                            </Link>
			
 
				                         </p>
			
 
				-                    </form>
			
 
				+                    </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default Register; 
			
 
				+export default Register;
			
--- a/src/pages/RegistrationSuccess.jsx
+++ b/src/pages/RegistrationSuccess.jsx
@@ -1,43 +1,70 @@
 
				 import { Link } from 'react-router-dom';
			
 
				-import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				 
			
 
				 function RegistrationSuccess() {
			
 
				-    const { t } = useLanguage();
			
 
				 
			
 
				     return (
			
 
				-        <div className="min-h-screen flex items-center justify-center px-4 relative">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
			
 
				-                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
			
 
				-                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="w-full max-w-md">
			
 
				-                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8 text-center">
			
 
				-                    <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center mx-auto">
			
 
				-                        <svg className="w-8 h-8 text-brand-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			
 
				-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
			
 
				-                        </svg>
			
 
				-                    </div>
			
 
				-                    <h2 className="mt-6 text-2xl font-semibold text-gray-900">Check your email</h2>
			
 
				-                    <p className="mt-2 text-gray-600">
			
 
				-                        We've sent you a verification link to your email address. Please click the link to verify your account.
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h1 className="text-[60px] leading-tight font-light tracking-tight text-gray-900 lg:text-[80px] relative mb-6">
			
 
				+                        <span className="relative inline-block">
			
 
				+                            Check Your Email
			
 
				+                            <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                        </span>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl">
			
 
				+                        We&apos;ve sent you a verification link. Please check your inbox to continue.
			
 
				                     </p>
			
 
				-                    <div className="mt-8 space-y-4">
			
 
				-                        <p className="text-sm text-gray-500">
			
 
				-                            Didn't receive the email? Check your spam folder or
			
 
				-                        </p>
			
 
				-                        <button
			
 
				-                            className="text-brand-purple hover:text-brand-purple/80 text-sm font-medium"
			
 
				-                            onClick={() => window.location.reload()}
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
			
 
				+                    <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 space-y-8 border border-gray-100 relative group">
			
 
				+                        {/* Gradient border */}
			
 
				+                        <div className="absolute inset-0 rounded-3xl border border-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20 pointer-events-none"></div>
			
 
				+                        
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center">
			
 
				+                                <span className="text-2xl text-brand-purple">✉</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <div className="text-center space-y-4">
			
 
				+                            <p className="text-gray-500">
			
 
				+                                Click the link in the email we just sent you to verify your account.
			
 
				+                            </p>
			
 
				+                            <p className="text-sm text-gray-400">
			
 
				+                                Didn&apos;t receive the email? Check your spam folder or{" "}
			
 
				+                                <button 
			
 
				+                                    onClick={() => window.location.reload()}
			
 
				+                                    className="text-brand-purple hover:text-brand-purple/80 transition-colors font-medium"
			
 
				+                                >
			
 
				+                                    click here to try again
			
 
				+                                </button>
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+
			
 
				+                        <Link 
			
 
				+                            to="/login" 
			
 
				+                            className="w-full bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
			
 
				                         >
			
 
				-                            Click here to try again
			
 
				-                        </button>
			
 
				+                            <span>Back to Login</span>
			
 
				+                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                        </Link>
			
 
				                     </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default RegistrationSuccess; 
			
 
				+export default RegistrationSuccess;
			
--- a/src/pages/Terms.jsx
+++ b/src/pages/Terms.jsx
@@ -0,0 +1,63 @@
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+
			
 
				+function Terms() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    const sections = [
			
 
				+        {
			
 
				+            title: t('terms.usage.title'),
			
 
				+            content: t('terms.usage.content')
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('terms.account.title'),
			
 
				+            content: t('terms.account.content')
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('terms.intellectual.title'),
			
 
				+            content: t('terms.intellectual.content')
			
 
				+        },
			
 
				+        {
			
 
				+            title: t('terms.liability.title'),
			
 
				+            content: t('terms.liability.content')
			
 
				+        }
			
 
				+    ];
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('terms.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('terms.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Terms Content */}
			
 
				+                <div className="bg-white rounded-2xl shadow-lg p-8">
			
 
				+                    <div className="space-y-12">
			
 
				+                        {sections.map((section) => (
			
 
				+                            <div key={section.title}>
			
 
				+                                <h2 className="text-2xl font-medium text-gray-900 mb-4">{section.title}</h2>
			
 
				+                                <p className="text-gray-600 whitespace-pre-line leading-relaxed">{section.content}</p>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Terms;
			
--- a/src/pages/VerifyEmail.jsx
+++ b/src/pages/VerifyEmail.jsx
@@ -1,6 +1,8 @@
 
				 import { useEffect, useState } from 'react';
			
 
				-import { useSearchParams, useNavigate } from 'react-router-dom';
			
 
				+import { useSearchParams, useNavigate, Link } from 'react-router-dom';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				 
			
 
				 function VerifyEmail() {
			
 
				     const [searchParams] = useSearchParams();
			
@@ -20,7 +22,7 @@ function VerifyEmail() {
 
				             }
			
 
				 
			
 
				             try {
			
 
				-                const response = await fetch(`http://192.168.1.35:8080/api/v1/validate-email?token=${token}`, {
			
 
				+                const response = await fetch(`${API_HOST}/api/v1/onboard/validate-email?token=${token}`, {
			
 
				                     method: 'GET',
			
 
				                     headers: {
			
 
				                         'Content-Type': 'application/json',
			
@@ -50,40 +52,55 @@ function VerifyEmail() {
 
				         switch (verificationStatus) {
			
 
				             case 'verifying':
			
 
				                 return (
			
 
				-                    <div className="flex flex-col items-center">
			
 
				-                        <div className="w-16 h-16 border-4 border-brand-purple border-t-transparent rounded-full animate-spin"></div>
			
 
				-                        <p className="mt-4 text-gray-600">Verifying your email...</p>
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16">
			
 
				+                                <div className="w-full h-full border-4 border-brand-purple rounded-full animate-spin"></div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <p className="text-gray-600 text-center">{t('verify.verifying')}</p>
			
 
				                     </div>
			
 
				                 );
			
 
				             case 'success':
			
 
				                 return (
			
 
				-                    <div className="flex flex-col items-center">
			
 
				-                        <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center">
			
 
				-                            <svg className="w-8 h-8 text-brand-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			
 
				-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
			
 
				-                            </svg>
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16 relative">
			
 
				+                                <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
			
 
				+                                <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                    <span className="text-3xl text-brand-purple">✓</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div className="text-center space-y-4">
			
 
				+                            <h2 className="text-2xl font-medium text-gray-900">{t('verify.success.title')}</h2>
			
 
				+                            <p className="text-gray-600">{t('verify.success.message')}</p>
			
 
				+                            <p className="text-sm text-gray-500">{t('verify.success.redirecting')}</p>
			
 
				                         </div>
			
 
				-                        <h2 className="mt-6 text-2xl font-semibold text-gray-900">Email Verified!</h2>
			
 
				-                        <p className="mt-2 text-gray-600">Your email has been successfully verified.</p>
			
 
				-                        <p className="mt-1 text-sm text-gray-500">Redirecting to payment...</p>
			
 
				                     </div>
			
 
				                 );
			
 
				             case 'error':
			
 
				                 return (
			
 
				-                    <div className="flex flex-col items-center">
			
 
				-                        <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
			
 
				-                            <svg className="w-8 h-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			
 
				-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
			
 
				-                            </svg>
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16 relative">
			
 
				+                                <div className="w-full h-full border-4 border-red-500 rounded-full"></div>
			
 
				+                                <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                    <span className="text-3xl text-red-500">×</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div className="text-center space-y-4">
			
 
				+                            <h2 className="text-2xl font-medium text-gray-900">{t('verify.error.title')}</h2>
			
 
				+                            <p className="text-gray-600">{error}</p>
			
 
				                         </div>
			
 
				-                        <h2 className="mt-6 text-2xl font-semibold text-gray-900">Verification Failed</h2>
			
 
				-                        <p className="mt-2 text-gray-600">{error}</p>
			
 
				-                        <button
			
 
				-                            onClick={() => navigate('/login')}
			
 
				-                            className="mt-6 px-6 py-2 bg-brand-purple text-white rounded-full hover:bg-brand-purple/90 transition-colors"
			
 
				+                        <Link 
			
 
				+                            to="/login" 
			
 
				+                            className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
			
 
				                         >
			
 
				-                            Go to Login
			
 
				-                        </button>
			
 
				+                            <span>{t('verify.error.backToLogin')}</span>
			
 
				+                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                        </Link>
			
 
				                     </div>
			
 
				                 );
			
 
				             default:
			
@@ -92,20 +109,34 @@ function VerifyEmail() {
 
				     };
			
 
				 
			
 
				     return (
			
 
				-        <div className="min-h-screen flex items-center justify-center px-4 relative">
			
 
				-            {/* Background elements */}
			
 
				-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
			
 
				-                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
			
 
				-                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				             </div>
			
 
				 
			
 
				-            <div className="w-full max-w-md">
			
 
				-                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {t('verify.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {t('verify.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="max-w-md mx-auto">
			
 
				                     {renderContent()}
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
 
				 
			
 
				-export default VerifyEmail; 
			
 
				+export default VerifyEmail;
			
--- a/src/pages/VerifyEmailConfirm.jsx
+++ b/src/pages/VerifyEmailConfirm.jsx
@@ -0,0 +1,142 @@
 
				+import { useEffect, useState } from 'react';
			
 
				+import { useSearchParams, useNavigate, Link } from 'react-router-dom';
			
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				+
			
 
				+function VerifyEmailConfirm() {
			
 
				+    const [searchParams] = useSearchParams();
			
 
				+    const navigate = useNavigate();
			
 
				+    const { t } = useLanguage();
			
 
				+    const [verificationStatus, setVerificationStatus] = useState('verifying'); // 'verifying', 'success', 'error'
			
 
				+    const [error, setError] = useState('');
			
 
				+
			
 
				+    useEffect(() => {
			
 
				+        const verifyEmail = async () => {
			
 
				+            const token = searchParams.get('token');
			
 
				+
			
 
				+            if (!token) {
			
 
				+                setVerificationStatus('error');
			
 
				+                setError('No verification token provided');
			
 
				+                return;
			
 
				+            }
			
 
				+
			
 
				+            try {
			
 
				+                const response = await fetch(`${API_HOST}/api/v1/onboard/validate-email?token=${token}`, {
			
 
				+                    method: 'GET',
			
 
				+                    headers: {
			
 
				+                        'Content-Type': 'application/json',
			
 
				+                    },
			
 
				+                });
			
 
				+
			
 
				+                if (!response.ok) {
			
 
				+                    throw new Error('Verification failed');
			
 
				+                }
			
 
				+
			
 
				+                setVerificationStatus('success');
			
 
				+                // Redirect to payment after 3 seconds on success
			
 
				+                setTimeout(() => {
			
 
				+                    navigate(`/payment?plan=${searchParams.get('plan')}&email=${searchParams.get('email')}`);
			
 
				+                }, 3000);
			
 
				+
			
 
				+            } catch (err) {
			
 
				+                setVerificationStatus('error');
			
 
				+                setError(err.message);
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        verifyEmail();
			
 
				+    }, [searchParams, navigate]);
			
 
				+
			
 
				+    return (
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Floating elements */}
			
 
				+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
			
 
				+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
			
 
				+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="text-center mb-16">
			
 
				+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
			
 
				+                        {verificationStatus === 'verifying' && t('verify.title')}
			
 
				+                        {verificationStatus === 'success' && t('verify.success.title')}
			
 
				+                        {verificationStatus === 'error' && t('verify.error.title')}
			
 
				+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				+                    </h1>
			
 
				+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
			
 
				+                        {verificationStatus === 'verifying' && t('verify.description')}
			
 
				+                        {verificationStatus === 'success' && t('verify.success.message')}
			
 
				+                        {verificationStatus === 'error' && t('verify.error.message')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="max-w-md mx-auto">
			
 
				+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            {verificationStatus === 'verifying' && (
			
 
				+                                <div className="w-16 h-16">
			
 
				+                                    <div className="w-full h-full border-4 border-brand-purple rounded-full animate-spin"></div>
			
 
				+                                </div>
			
 
				+                            )}
			
 
				+                            {verificationStatus === 'success' && (
			
 
				+                                <div className="w-16 h-16 relative">
			
 
				+                                    <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
			
 
				+                                    <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                        <span className="text-3xl text-brand-purple">✓</span>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            )}
			
 
				+                            {verificationStatus === 'error' && (
			
 
				+                                <div className="w-16 h-16 relative">
			
 
				+                                    <div className="w-full h-full border-4 border-red-500 rounded-full"></div>
			
 
				+                                    <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                        <span className="text-3xl text-red-500">×</span>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            )}
			
 
				+                        </div>
			
 
				+
			
 
				+                        <div className="text-center space-y-4">
			
 
				+                            {verificationStatus === 'verifying' && (
			
 
				+                                <p className="text-gray-600">
			
 
				+                                    {t('verify.verifying')}
			
 
				+                                </p>
			
 
				+                            )}
			
 
				+                            {verificationStatus === 'success' && (
			
 
				+                                <p className="text-gray-600">
			
 
				+                                    {t('verify.success.redirecting')}
			
 
				+                                </p>
			
 
				+                            )}
			
 
				+                            {verificationStatus === 'error' && (
			
 
				+                                <>
			
 
				+                                    <p className="text-red-600">
			
 
				+                                        {error}
			
 
				+                                    </p>
			
 
				+                                    <p className="text-sm text-gray-500">
			
 
				+                                        {t('verify.error.tryAgain')}
			
 
				+                                    </p>
			
 
				+                                </>
			
 
				+                            )}
			
 
				+                        </div>
			
 
				+
			
 
				+                        {verificationStatus === 'error' && (
			
 
				+                            <Link 
			
 
				+                                to="/login" 
			
 
				+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
			
 
				+                            >
			
 
				+                                <span>{t('verify.error.backToLogin')}</span>
			
 
				+                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                            </Link>
			
 
				+                        )}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default VerifyEmailConfirm;
Autor	SHA1 Mensaje	Fecha
lblt	f17fc3add7 Refactor API host configuration, enhance Docker setup, and improve PaymentCancel page styling	hace 1 semana
lblt	388444fbca Update API host and enhance UI components with new styles and translations	hace 2 semanas
lblt	426bce3048 Add custom styles for brutalist components and scrollbar enhancements	hace 2 semanas
lblt	58686d6004 brut style with full stripe workflow	hace 1 mes