1 month ago · 58686d6004
--- a/Dockerfile
+++ b/Dockerfile
@@ -0,0 +1,32 @@
 
				+# 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
			
 
				+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/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/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,98 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+import { useLanguage } from '../context/LanguageContext';
			
 
				+
			
 
				+function Footer() {
			
 
				+    const { t } = useLanguage();
			
 
				+
			
 
				+    return (
			
 
				+        <footer className="border-t-2 border-black mt-32">
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 py-16">
			
 
				+                <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
			
 
				+                    {/* Company Info */}
			
 
				+                    <div>
			
 
				+                        <h4 className="text-xl font-black uppercase mb-6">BYOM</h4>
			
 
				+                        <p className="monospace text-sm">
			
 
				+                            AI-powered platform helping influencers grow their brand through advanced analytics and creative tools.
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Legal Links */}
			
 
				+                    <div>
			
 
				+                        <h4 className="text-lg font-black uppercase mb-6">Legal</h4>
			
 
				+                        <ul className="space-y-3">
			
 
				+                            <li>
			
 
				+                                <Link to="/terms" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    Terms of Service
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <Link to="/privacy" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    Privacy Policy
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Company Links */}
			
 
				+                    <div>
			
 
				+                        <h4 className="text-lg font-black uppercase mb-6">Company</h4>
			
 
				+                        <ul className="space-y-3">
			
 
				+                            <li>
			
 
				+                                <Link to="/about" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    About Us
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <Link to="/careers" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    Careers
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <Link to="/contact" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    Contact
			
 
				+                                </Link>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Social Links */}
			
 
				+                    <div>
			
 
				+                        <h4 className="text-lg font-black uppercase mb-6">Follow Us</h4>
			
 
				+                        <ul className="space-y-3">
			
 
				+                            <li>
			
 
				+                                <a href="https://twitter.com/byom" target="_blank" rel="noopener noreferrer" 
			
 
				+                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    Twitter
			
 
				+                                </a>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <a href="https://linkedin.com/company/byom" target="_blank" rel="noopener noreferrer"
			
 
				+                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    LinkedIn
			
 
				+                                </a>
			
 
				+                            </li>
			
 
				+                            <li>
			
 
				+                                <a href="https://instagram.com/byom" target="_blank" rel="noopener noreferrer"
			
 
				+                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
			
 
				+                                    Instagram
			
 
				+                                </a>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Bottom Bar */}
			
 
				+                <div className="border-t-2 border-black mt-12 pt-8 flex justify-between items-center">
			
 
				+                    <p className="monospace text-sm">
			
 
				+                        © {new Date().getFullYear()} BYOM. All rights reserved.
			
 
				+                    </p>
			
 
				+                    <div className="flex items-center gap-4">
			
 
				+                        <span className="monospace text-sm">Made with ♥ in Paris</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </footer>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Footer; 
			
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -7,6 +7,13 @@ function Navbar() {
 
				     const dropdownRef = useRef(null);
			
 
				     const { language, setLanguage, t } = useLanguage();
			
 
				 
			
 
				+    const menuItems = [
			
 
				+        { id: 'aiTrends', icon: 'ai', pattern: 'pattern-ai' },
			
 
				+        { id: 'imageGen', icon: 'image', pattern: 'pattern-image' },
			
 
				+        { id: 'analytics', icon: 'analytics', pattern: 'pattern-analytics' },
			
 
				+        { id: 'brandGrowth', icon: 'growth', pattern: 'pattern-growth' }
			
 
				+    ];
			
 
				+
			
 
				     // Close dropdown when clicking outside
			
 
				     useEffect(() => {
			
 
				         function handleClickOutside(event) {
			
@@ -22,36 +29,43 @@ function Navbar() {
 
				     }, []);
			
 
				 
			
 
				     return (
			
 
				-        <nav className="fixed w-full bg-white z-50 top-0 py-6">
			
 
				-            <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">
			
 
				+        <nav className="fixed w-full bg-white z-50 top-0">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="absolute inset-0 technical-grid opacity-30 pointer-events-none"></div>
			
 
				+            
			
 
				+            {/* Border bottom */}
			
 
				+            <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-black"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16">
			
 
				+                <div className="flex justify-between items-center h-24">
			
 
				+                    {/* Logo */}
			
 
				+                    <Link to="/" className="monospace text-2xl font-black uppercase tracking-tighter relative group">
			
 
				                         byom
			
 
				+                        <div className="absolute -right-3 -top-3 w-2 h-2 bg-black geometric-shape diamond opacity-0 group-hover:opacity-100 transition-opacity"></div>
			
 
				                     </Link>
			
 
				 
			
 
				-                    {/* Contact dropdown */}
			
 
				-                    <div className="absolute left-1/2 -translate-x-1/2" ref={dropdownRef}>
			
 
				+                    {/* Center menu */}
			
 
				+                    <div className="flex items-center gap-12" 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="brutalist-button !py-2 !px-4 text-sm relative"
			
 
				                         >
			
 
				                             {t('nav.contact')}
			
 
				                         </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">
			
 
				+                            <div className="absolute top-full mt-4 left-1/2 -translate-x-1/2 brutalist-dropdown">
			
 
				+                                <div className="p-6">
			
 
				+                                    <div className="monospace text-sm font-bold uppercase mb-4">
			
 
				                                         {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"
			
 
				+                                        className="flex items-center gap-3 text-base monospace hover:translate-x-2 transition-transform"
			
 
				                                     >
			
 
				-                                        <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>
			
 
				+                                        <div className="w-2 h-2 bg-black geometric-shape diamond"></div>
			
 
				                                         hello@byom.fr
			
 
				                                     </a>
			
 
				                                 </div>
			
@@ -59,21 +73,22 @@ function Navbar() {
 
				                         )}
			
 
				                     </div>
			
 
				 
			
 
				-                    <div className="flex items-center gap-6">
			
 
				+                    {/* Right menu */}
			
 
				+                    <div className="flex items-center gap-12">
			
 
				                         {/* Language switcher */}
			
 
				                         <button
			
 
				                             onClick={() => setLanguage(language === 'en' ? 'fr' : 'en')}
			
 
				-                            className="text-sm text-gray-500 hover:text-brand-purple transition-colors"
			
 
				+                            className="monospace text-sm font-bold hover:translate-x-1 transition-transform"
			
 
				                         >
			
 
				                             {language.toUpperCase()}
			
 
				                         </button>
			
 
				 
			
 
				-                        <Link to="/pricing" className="text-sm">
			
 
				+                        <Link to="/pricing" className="monospace text-sm font-bold hover:translate-x-1 transition-transform">
			
 
				                             {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">
			
 
				-                            <span>{t('nav.login')}</span>
			
 
				-                            <span>→</span>
			
 
				+
			
 
				+                        <Link to="/login" className="brutalist-button !py-2 !px-4 text-sm">
			
 
				+                            {t('nav.login')} →
			
 
				                         </Link>
			
 
				                     </div>
			
 
				                 </div>
			
--- 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 @@
 
				+export const API_HOST = 'https://byom.moooffle.com'; 
			
--- a/src/context/LanguageContext.jsx
+++ b/src/context/LanguageContext.jsx
@@ -28,6 +28,7 @@ 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'
			
 
				         },
			
@@ -37,6 +38,209 @@ export const translations = {
 
				             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,6 +268,7 @@ 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'
			
 
				         },
			
@@ -73,6 +278,209 @@ export const translations = {
 
				             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
@@ -39,4 +39,46 @@ button:hover {
 
				   .text-balance {
			
 
				     text-wrap: balance;
			
 
				   }
			
 
				+}
			
 
				+
			
 
				+/* Webkit browsers (Chrome, Safari, newer versions of Opera) */
			
 
				+::-webkit-scrollbar {
			
 
				+    width: 12px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-track {
			
 
				+    background: white;
			
 
				+    border-left: 2px solid black;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb {
			
 
				+    background: black;
			
 
				+    border: 2px solid black;
			
 
				+    transition: all 0.3s ease;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:hover {
			
 
				+    background: #333;
			
 
				+}
			
 
				+
			
 
				+/* Firefox */
			
 
				+* {
			
 
				+    scrollbar-width: thin;
			
 
				+    scrollbar-color: black white;
			
 
				+}
			
 
				+
			
 
				+/* For Edge and other browsers that support standard scrollbar styling */
			
 
				+* {
			
 
				+    scrollbar-width: thin;
			
 
				+}
			
 
				+
			
 
				+*::-webkit-scrollbar-corner {
			
 
				+    background: white;
			
 
				+}
			
 
				+
			
 
				+/* Optional: Style for when the scrollbar corner meets both scrollbars */
			
 
				+*::-webkit-scrollbar-corner {
			
 
				+    background: white;
			
 
				+    border-left: 2px solid black;
			
 
				+    border-top: 2px solid black;
			
 
				 }
			
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 
				 import ReactDOM from 'react-dom/client'
			
 
				 import App from './App.jsx'
			
 
				 import './index.css'
			
 
				+import './styles.css'
			
 
				 
			
 
				 ReactDOM.createRoot(document.getElementById('root')).render(
			
 
				   <React.StrictMode>
			
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -0,0 +1,130 @@
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('about.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape triangle w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('about.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Mission Section */}
			
 
				+                <div className="brutalist-card p-8 mb-16">
			
 
				+                    <h2 className="text-2xl font-black uppercase mb-6">{t('about.mission.title')}</h2>
			
 
				+                    <p className="monospace text-lg">
			
 
				+                        {t('about.mission.description')}
			
 
				+                    </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Timeline Section */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-black uppercase mb-8">{t('about.timeline')}</h2>
			
 
				+                    <div className="space-y-8">
			
 
				+                        {milestones.map((milestone, index) => (
			
 
				+                            <div key={milestone.year} className="brutalist-card p-6 relative">
			
 
				+                                <div className="absolute -left-4 -top-4 w-12 h-12 bg-black text-white flex items-center justify-center">
			
 
				+                                    <span className="monospace font-bold">{milestone.year}</span>
			
 
				+                                </div>
			
 
				+                                <h3 className="text-xl font-bold mb-2 mt-2">{milestone.title}</h3>
			
 
				+                                <p className="monospace">{milestone.description}</p>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Team Section */}
			
 
				+                <div className="mb-16">
			
 
				+                    <h2 className="text-2xl font-black uppercase mb-8">{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="brutalist-card p-6">
			
 
				+                                <div className="w-full aspect-square mb-4 overflow-hidden">
			
 
				+                                    <div className="w-full h-full bg-gray-200">
			
 
				+                                        {/* Add actual images later */}
			
 
				+                                        <div className="w-full h-full flex items-center justify-center">
			
 
				+                                            <span className="text-4xl">👤</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <h3 className="text-xl font-bold mb-1">{member.name}</h3>
			
 
				+                                <p className="monospace text-sm mb-3">{member.role}</p>
			
 
				+                                <p className="monospace">{member.description}</p>
			
 
				+                            </div>
			
 
				+                        ))}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Contact Section */}
			
 
				+                <div className="brutalist-card p-8 mb-16">
			
 
				+                    <h2 className="text-2xl font-black uppercase mb-6">{t('about.contact.title')}</h2>
			
 
				+                    <p className="monospace text-lg mb-6">
			
 
				+                        {t('about.contact.description')}
			
 
				+                    </p>
			
 
				+                    <Link to="/contact" className="brutalist-button inline-block">
			
 
				+                        {t('about.contact.cta')} →
			
 
				+                    </Link>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default About; 
			
--- a/src/pages/AiTrends.jsx
+++ b/src/pages/AiTrends.jsx
@@ -0,0 +1,169 @@
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('aiTrends.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape square w-full h-full bg-black rotate-45"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('aiTrends.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Main content */}
			
 
				+                <div className="grid-layout gap-8">
			
 
				+                    {/* Trends Overview */}
			
 
				+                    <div className="col-span-12">
			
 
				+                        <div className="brutalist-card p-8">
			
 
				+                            <h2 className="text-2xl font-black uppercase mb-8">{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="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
			
 
				+                                        <div className="absolute -right-2 -top-2 w-8 h-8 bg-black text-white flex items-center justify-center">
			
 
				+                                            <span className="text-xl">{trend.icon}</span>
			
 
				+                                        </div>
			
 
				+                                        <h3 className="text-xl font-bold mb-4">{trend.title}</h3>
			
 
				+                                        <p className="monospace mb-6">{trend.description}</p>
			
 
				+                                        <div className="section-divider"></div>
			
 
				+                                        <div className="grid grid-cols-3 gap-4 mt-4">
			
 
				+                                            <div>
			
 
				+                                                <span className="monospace text-sm block">Growth</span>
			
 
				+                                                <span className="font-bold">{trend.stats.growth}</span>
			
 
				+                                            </div>
			
 
				+                                            <div>
			
 
				+                                                <span className="monospace text-sm block">Adoption</span>
			
 
				+                                                <span className="font-bold">{trend.stats.adoption}</span>
			
 
				+                                            </div>
			
 
				+                                            <div>
			
 
				+                                                <span className="monospace text-sm block">Impact</span>
			
 
				+                                                <span className="font-bold">{trend.stats.impact}</span>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Interactive Demo Section */}
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <div className="brutalist-card p-0 overflow-hidden">
			
 
				+                            <div className="relative aspect-video">
			
 
				+                                <video
			
 
				+                                    className="w-full h-full object-cover grayscale contrast-125 brightness-125"
			
 
				+                                    autoPlay
			
 
				+                                    loop
			
 
				+                                    muted
			
 
				+                                    playsInline
			
 
				+                                >
			
 
				+                                    <source src="/ai-demo.mp4" type="video/mp4" />
			
 
				+                                </video>
			
 
				+                                <div className="video-overlay"></div>
			
 
				+                                <div className="absolute inset-0 diagonal-lines"></div>
			
 
				+                            </div>
			
 
				+                            <div className="p-6">
			
 
				+                                <h3 className="text-xl font-bold mb-4">{t('aiTrends.demo.title')}</h3>
			
 
				+                                <p className="monospace mb-4">{t('aiTrends.demo.description')}</p>
			
 
				+                                <Link to="/register" className="brutalist-button inline-block">
			
 
				+                                    {t('aiTrends.demo.cta')} →
			
 
				+                                </Link>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Stats Section */}
			
 
				+                    <div className="col-span-12 md:col-span-4">
			
 
				+                        <div className="brutalist-card p-6">
			
 
				+                            <h3 className="text-xl font-bold mb-6">{t('aiTrends.stats.title')}</h3>
			
 
				+                            <div className="space-y-6">
			
 
				+                                <div>
			
 
				+                                    <div className="flex justify-between mb-2">
			
 
				+                                        <span className="monospace">Market Growth</span>
			
 
				+                                        <span className="font-bold">+156%</span>
			
 
				+                                    </div>
			
 
				+                                    <div className="w-full h-2 bg-gray-200">
			
 
				+                                        <div className="h-full bg-black" style={{ width: '75%' }}></div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <div className="flex justify-between mb-2">
			
 
				+                                        <span className="monospace">AI Adoption</span>
			
 
				+                                        <span className="font-bold">68%</span>
			
 
				+                                    </div>
			
 
				+                                    <div className="w-full h-2 bg-gray-200">
			
 
				+                                        <div className="h-full bg-black" style={{ width: '68%' }}></div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <div className="flex justify-between mb-2">
			
 
				+                                        <span className="monospace">ROI Impact</span>
			
 
				+                                        <span className="font-bold">+234%</span>
			
 
				+                                    </div>
			
 
				+                                    <div className="w-full h-2 bg-gray-200">
			
 
				+                                        <div className="h-full bg-black" 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,161 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('analytics.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape pentagon w-full h-full bg-black rotate-30"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('analytics.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Main content */}
			
 
				+                <div className="grid-layout gap-8">
			
 
				+                    {/* Dashboard Preview */}
			
 
				+                    <div className="col-span-12">
			
 
				+                        <div className="brutalist-card p-8">
			
 
				+                            <h2 className="text-2xl font-black uppercase mb-8">{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="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
			
 
				+                                        <h3 className="text-xl font-bold mb-4">{section.title}</h3>
			
 
				+                                        <div className="flex items-center gap-4">
			
 
				+                                            <span className="text-4xl font-bold">{section.percentage}</span>
			
 
				+                                            <div className={`w-8 h-8 ${section.trend === 'up' ? 'rotate-0' : 'rotate-180'}`}>
			
 
				+                                                ↑
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                        <div className="mt-4 w-full h-2 bg-gray-200">
			
 
				+                                            <div className="h-full bg-black" style={{ width: section.percentage }}></div>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Metrics Overview */}
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <div className="brutalist-card p-8">
			
 
				+                            <h2 className="text-2xl font-black uppercase mb-8">{t('analytics.metrics.title')}</h2>
			
 
				+                            <div className="space-y-8">
			
 
				+                                {metrics.map((metric) => (
			
 
				+                                    <div key={metric.id} className="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
			
 
				+                                        <div className="absolute -right-2 -top-2 w-8 h-8 bg-black text-white flex items-center justify-center">
			
 
				+                                            <span className="text-xl">{metric.icon}</span>
			
 
				+                                        </div>
			
 
				+                                        <h3 className="text-xl font-bold mb-4">{metric.title}</h3>
			
 
				+                                        <p className="monospace mb-6">{metric.description}</p>
			
 
				+                                        <div className="section-divider"></div>
			
 
				+                                        <div className="grid grid-cols-3 gap-4 mt-4">
			
 
				+                                            {Object.entries(metric.stats).map(([key, value]) => (
			
 
				+                                                <div key={key}>
			
 
				+                                                    <span className="monospace text-sm block capitalize">{key}</span>
			
 
				+                                                    <span className="font-bold">{value}</span>
			
 
				+                                                </div>
			
 
				+                                            ))}
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Quick Actions */}
			
 
				+                    <div className="col-span-12 md:col-span-4">
			
 
				+                        <div className="brutalist-card p-6">
			
 
				+                            <h3 className="text-xl font-bold mb-6">{t('analytics.actions.title')}</h3>
			
 
				+                            <div className="space-y-4">
			
 
				+                                {[
			
 
				+                                    'Generate Report',
			
 
				+                                    'Export Data',
			
 
				+                                    'Set Alerts',
			
 
				+                                    'Share Dashboard',
			
 
				+                                    'Configure KPIs'
			
 
				+                                ].map((action) => (
			
 
				+                                    <div key={action} className="brutalist-card p-3 hover:-translate-x-2 transition-transform cursor-pointer">
			
 
				+                                        <span className="monospace">{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,174 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('brandGrowth.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape hexagon w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('brandGrowth.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Main content */}
			
 
				+                <div className="grid-layout gap-8">
			
 
				+                    {/* Growth Strategies */}
			
 
				+                    <div className="col-span-12">
			
 
				+                        <div className="brutalist-card p-8">
			
 
				+                            <h2 className="text-2xl font-black uppercase mb-8">{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="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
			
 
				+                                        <div className="absolute -right-2 -top-2 w-8 h-8 bg-black text-white flex items-center justify-center">
			
 
				+                                            <span className="text-xl">{strategy.icon}</span>
			
 
				+                                        </div>
			
 
				+                                        <h3 className="text-xl font-bold mb-4">{strategy.title}</h3>
			
 
				+                                        <p className="monospace mb-6">{strategy.description}</p>
			
 
				+                                        <div className="section-divider"></div>
			
 
				+                                        <div className="grid grid-cols-3 gap-4 mt-4">
			
 
				+                                            {Object.entries(strategy.stats).map(([key, value]) => (
			
 
				+                                                <div key={key}>
			
 
				+                                                    <span className="monospace text-sm block capitalize">{key}</span>
			
 
				+                                                    <span className="font-bold">{value}</span>
			
 
				+                                                </div>
			
 
				+                                            ))}
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* AI Recommendations */}
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <div className="brutalist-card p-8">
			
 
				+                            <h2 className="text-2xl font-black uppercase mb-8">{t('brandGrowth.recommendations.title')}</h2>
			
 
				+                            <div className="space-y-6">
			
 
				+                                {recommendations.map((rec) => (
			
 
				+                                    <div key={rec.title} className="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
			
 
				+                                        <div className="flex justify-between items-center mb-4">
			
 
				+                                            <h3 className="text-xl font-bold">{rec.title}</h3>
			
 
				+                                            <div className="flex items-center gap-2">
			
 
				+                                                <span className="monospace text-sm">Score:</span>
			
 
				+                                                <span className="font-bold text-xl">{rec.score}</span>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                        <div className="grid grid-cols-2 gap-4">
			
 
				+                                            <div>
			
 
				+                                                <span className="monospace text-sm block">Priority</span>
			
 
				+                                                <span className="font-bold">{rec.priority}</span>
			
 
				+                                            </div>
			
 
				+                                            <div>
			
 
				+                                                <span className="monospace text-sm block">Potential Impact</span>
			
 
				+                                                <span className="font-bold">{rec.impact}</span>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                        <div className="mt-4 w-full h-2 bg-gray-200">
			
 
				+                                            <div className="h-full bg-black" style={{ width: `${rec.score}%` }}></div>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Growth Tools */}
			
 
				+                    <div className="col-span-12 md:col-span-4">
			
 
				+                        <div className="brutalist-card p-6">
			
 
				+                            <h3 className="text-xl font-bold mb-6">{t('brandGrowth.tools.title')}</h3>
			
 
				+                            <div className="space-y-4">
			
 
				+                                {[
			
 
				+                                    'Content Calendar',
			
 
				+                                    'Audience Insights',
			
 
				+                                    'Competitor Analysis',
			
 
				+                                    'Performance Tracking',
			
 
				+                                    'Brand Guidelines'
			
 
				+                                ].map((tool) => (
			
 
				+                                    <div key={tool} className="brutalist-card p-3 hover:-translate-x-2 transition-transform cursor-pointer">
			
 
				+                                        <span className="monospace">{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,228 @@
 
				+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');
			
 
				+        } 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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('contact.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape triangle w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('contact.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Main content */}
			
 
				+                <div className="grid-layout gap-8">
			
 
				+                    {/* Contact Form */}
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <div className="brutalist-card p-8">
			
 
				+                            <h2 className="text-2xl font-black uppercase 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="monospace block mb-2" htmlFor="name">
			
 
				+                                            {t('contact.form.name')}
			
 
				+                                        </label>
			
 
				+                                        <input
			
 
				+                                            type="text"
			
 
				+                                            id="name"
			
 
				+                                            name="name"
			
 
				+                                            value={formData.name}
			
 
				+                                            onChange={handleChange}
			
 
				+                                            required
			
 
				+                                            className="brutalist-input w-full"
			
 
				+                                        />
			
 
				+                                    </div>
			
 
				+                                    <div>
			
 
				+                                        <label className="monospace block mb-2" htmlFor="email">
			
 
				+                                            {t('contact.form.email')}
			
 
				+                                        </label>
			
 
				+                                        <input
			
 
				+                                            type="email"
			
 
				+                                            id="email"
			
 
				+                                            name="email"
			
 
				+                                            value={formData.email}
			
 
				+                                            onChange={handleChange}
			
 
				+                                            required
			
 
				+                                            className="brutalist-input w-full"
			
 
				+                                        />
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <label className="monospace block mb-2" htmlFor="subject">
			
 
				+                                        {t('contact.form.subject')}
			
 
				+                                    </label>
			
 
				+                                    <input
			
 
				+                                        type="text"
			
 
				+                                        id="subject"
			
 
				+                                        name="subject"
			
 
				+                                        value={formData.subject}
			
 
				+                                        onChange={handleChange}
			
 
				+                                        required
			
 
				+                                        className="brutalist-input w-full"
			
 
				+                                    />
			
 
				+                                </div>
			
 
				+                                <div>
			
 
				+                                    <label className="monospace block mb-2" htmlFor="message">
			
 
				+                                        {t('contact.form.message')}
			
 
				+                                    </label>
			
 
				+                                    <textarea
			
 
				+                                        id="message"
			
 
				+                                        name="message"
			
 
				+                                        value={formData.message}
			
 
				+                                        onChange={handleChange}
			
 
				+                                        required
			
 
				+                                        rows="6"
			
 
				+                                        className="brutalist-input w-full"
			
 
				+                                    ></textarea>
			
 
				+                                </div>
			
 
				+                                <button
			
 
				+                                    type="submit"
			
 
				+                                    disabled={isSubmitting}
			
 
				+                                    className="brutalist-button"
			
 
				+                                >
			
 
				+                                    {isSubmitting ? t('contact.form.sending') : t('contact.form.send')} →
			
 
				+                                </button>
			
 
				+                                {submitStatus === 'success' && (
			
 
				+                                    <p className="monospace text-green-600">{t('contact.form.success')}</p>
			
 
				+                                )}
			
 
				+                                {submitStatus === 'error' && (
			
 
				+                                    <p className="monospace text-red-600">{t('contact.form.error')}</p>
			
 
				+                                )}
			
 
				+                            </form>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Contact Info */}
			
 
				+                    <div className="col-span-12 md:col-span-4">
			
 
				+                        <div className="brutalist-card p-6">
			
 
				+                            <h3 className="text-xl font-bold 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="brutalist-card p-4 block hover:-translate-x-2 transition-transform"
			
 
				+                                    >
			
 
				+                                        <div className="flex items-center gap-4">
			
 
				+                                            <span className="text-2xl">{method.icon}</span>
			
 
				+                                            <div>
			
 
				+                                                <h4 className="font-bold">{method.title}</h4>
			
 
				+                                                <p className="monospace">{method.value}</p>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                    </a>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                        {/* Social Links */}
			
 
				+                        <div className="brutalist-card p-6 mt-6">
			
 
				+                            <h3 className="text-xl font-bold 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="brutalist-card p-3 block hover:-translate-x-2 transition-transform"
			
 
				+                                    >
			
 
				+                                        <span className="monospace">{social.name}</span>
			
 
				+                                    </a>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Contact; 
			
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,106 +1,136 @@
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+import { Link } from 'react-router-dom';
			
 
				+import Footer from '../components/Footer';
			
 
				 
			
 
				 function Home() {
			
 
				     const { t } = useLanguage();
			
 
				 
			
 
				+    const features = [
			
 
				+        { id: 'aiTrends', icon: 'ai', pattern: 'pattern-ai' },
			
 
				+        { id: 'imageGen', icon: 'image', pattern: 'pattern-image' },
			
 
				+        { id: 'analytics', icon: 'analytics', pattern: 'pattern-analytics' },
			
 
				+        { id: 'brandGrowth', icon: 'growth', pattern: 'pattern-growth' }
			
 
				+    ];
			
 
				+
			
 
				     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>
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				 
			
 
				-            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
			
 
				-                {/* Interactive cursor element */}
			
 
				-                <div className="absolute top-32 right-8 max-w-[300px] text-xs text-gray-500 group cursor-pointer hover:text-black transition-colors">
			
 
				-                    {t('home.description')}
			
 
				-                    <div className="h-0.5 w-0 bg-brand-blue transition-all duration-300 group-hover:w-full"></div>
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('home.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('home.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				                 </div>
			
 
				 
			
 
				-                {/* Main content */}
			
 
				-                <div>
			
 
				-                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 lg:text-[120px] relative">
			
 
				-                        <span className="relative inline-block">
			
 
				-                            {t('home.title')}
			
 
				-                            <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
			
 
				-                        </span>
			
 
				-                        <div className="flex items-center gap-2">
			
 
				-                            <span className="text-brand-blue group-hover:translate-x-2 transition-transform">→</span>
			
 
				-                            <span className="relative">
			
 
				-                                {t('home.subtitle')}
			
 
				-                                <span className="absolute -bottom-2 left-0 w-full h-0.5 bg-brand-pink transform scale-x-0 transition-transform group-hover:scale-x-100"></span>
			
 
				-                            </span>
			
 
				-                            <span className="text-brand-teal ml-2 animate-spin-slow">*</span>
			
 
				-                        </div>
			
 
				-                    </h1>
			
 
				+                <div className="geometric-divider"></div>
			
 
				 
			
 
				-                    {/* Scrolling text with gradient fade */}
			
 
				-                    <div className="mt-16 overflow-hidden border-t border-b border-gray-200 py-3 relative">
			
 
				-                        <div className="absolute inset-y-0 left-0 w-20 bg-gradient-to-r from-white to-transparent z-10"></div>
			
 
				-                        <div className="absolute inset-y-0 right-0 w-20 bg-gradient-to-l from-white to-transparent z-10"></div>
			
 
				-                        <div className="flex gap-8 text-sm text-gray-400 animate-scroll">
			
 
				-                            <span className="hover:text-brand-purple transition-colors">{t('home.features.aiTrends')}</span>
			
 
				-                            <span>•</span>
			
 
				-                            <span className="hover:text-brand-pink transition-colors">{t('home.features.imageGen')}</span>
			
 
				-                            <span>•</span>
			
 
				-                            <span className="hover:text-brand-blue transition-colors">{t('home.features.analytics')}</span>
			
 
				-                            <span>•</span>
			
 
				-                            <span className="hover:text-brand-teal transition-colors">{t('home.features.brandGrowth')}</span>
			
 
				+                {/* Feature grid */}
			
 
				+                {/* <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-32">
			
 
				+                    <div className="brutalist-card">
			
 
				+                        <div className="relative">
			
 
				+                            <div className="icon-ai mb-6"></div>
			
 
				+                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.aiTrends')}</h3>
			
 
				+                            <div className="hover-line"></div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div className="brutalist-card">
			
 
				+                        <div className="relative">
			
 
				+                            <div className="icon-image mb-6"></div>
			
 
				+                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.imageGen')}</h3>
			
 
				+                            <div className="hover-line"></div>
			
 
				                         </div>
			
 
				                     </div>
			
 
				+                    <div className="brutalist-card">
			
 
				+                        <div className="relative">
			
 
				+                            <div className="icon-analytics mb-6"></div>
			
 
				+                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.analytics')}</h3>
			
 
				+                            <div className="hover-line"></div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div className="brutalist-card">
			
 
				+                        <div className="relative">
			
 
				+                            <div className="icon-growth mb-6"></div>
			
 
				+                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.brandGrowth')}</h3>
			
 
				+                            <div className="hover-line"></div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div> */}
			
 
				 
			
 
				-                    {/* Video/Image section */}
			
 
				-                    <div className="mt-16">
			
 
				-                        <div className="bg-gradient-to-br from-brand-purple/5 to-brand-pink/5 rounded-3xl p-12 aspect-[16/9] relative group overflow-hidden">
			
 
				-                            {/* Video Background */}
			
 
				+                {/* Main content grid */}
			
 
				+                <div className="grid-layout gap-8">
			
 
				+                    {/* Left column - Single video */}
			
 
				+                    <div className="col-span-12 md:col-span-7 brutalist-card p-0 overflow-hidden">
			
 
				+                        <div className="relative aspect-[4/3] overflow-hidden">
			
 
				                             <video
			
 
				-                                className="absolute inset-0 w-full h-full object-cover rounded-2xl opacity-90"
			
 
				+                                className="w-full h-full object-cover grayscale contrast-125 brightness-125"
			
 
				                                 autoPlay
			
 
				                                 loop
			
 
				                                 muted
			
 
				                                 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>
			
 
				+                            <div className="video-overlay"></div>
			
 
				+                            <div className="absolute inset-0 diagonal-lines"></div>
			
 
				+                        </div>
			
 
				+                        <div className="p-6">
			
 
				+                            <div className="section-divider"></div>
			
 
				+                            <h2 className="brutalist-subheading mb-4">Build Your Own Model</h2>
			
 
				+                            <Link to="/about" className="brutalist-button inline-block">
			
 
				+                                About Us →
			
 
				+                            </Link>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				 
			
 
				-                            {/* 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>
			
 
				+                    {/* Right column - Feature grid */}
			
 
				+                    <div className="col-span-12 md:col-span-5">
			
 
				+                        <div className="grid grid-cols-2 gap-3 h-full">
			
 
				+                            <Link to="/ai-trends" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
			
 
				+                                <div className="relative h-full flex flex-col justify-between">
			
 
				+                                    <div className="icon-ai mb-4"></div>
			
 
				+                                    <h3 className="text-sm font-black uppercase">{t('home.features.aiTrends')}</h3>
			
 
				+                                    <div className="hover-line mt-2"></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">
			
 
				-                                    <span>{t('home.explore')}</span>
			
 
				-                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				+                            </Link>
			
 
				+                            <Link to="/image-generation" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
			
 
				+                                <div className="relative h-full flex flex-col justify-between">
			
 
				+                                    <div className="icon-image mb-4"></div>
			
 
				+                                    <h3 className="text-sm font-black uppercase">{t('home.features.imageGen')}</h3>
			
 
				+                                    <div className="hover-line mt-2"></div>
			
 
				                                 </div>
			
 
				-                            </div>
			
 
				+                            </Link>
			
 
				+                            <Link to="/analytics" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
			
 
				+                                <div className="relative h-full flex flex-col justify-between">
			
 
				+                                    <div className="icon-analytics mb-4"></div>
			
 
				+                                    <h3 className="text-sm font-black uppercase">{t('home.features.analytics')}</h3>
			
 
				+                                    <div className="hover-line mt-2"></div>
			
 
				+                                </div>
			
 
				+                            </Link>
			
 
				+                            <Link to="/brand-growth" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
			
 
				+                                <div className="relative h-full flex flex-col justify-between">
			
 
				+                                    <div className="icon-growth mb-4"></div>
			
 
				+                                    <h3 className="text-sm font-black uppercase">{t('home.features.brandGrowth')}</h3>
			
 
				+                                    <div className="hover-line mt-2"></div>
			
 
				+                                </div>
			
 
				+                            </Link>
			
 
				                         </div>
			
 
				                     </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				+
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/ImageGeneration.jsx
+++ b/src/pages/ImageGeneration.jsx
@@ -0,0 +1,136 @@
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('imageGen.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape circle w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('imageGen.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Main content */}
			
 
				+                <div className="grid-layout gap-8">
			
 
				+                    {/* Features Overview */}
			
 
				+                    <div className="col-span-12">
			
 
				+                        <div className="brutalist-card p-8">
			
 
				+                            <h2 className="text-2xl font-black uppercase mb-8">{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="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
			
 
				+                                        <div className="absolute -right-2 -top-2 w-8 h-8 bg-black text-white flex items-center justify-center">
			
 
				+                                            <span className="text-xl">{feature.icon}</span>
			
 
				+                                        </div>
			
 
				+                                        <h3 className="text-xl font-bold mb-4">{feature.title}</h3>
			
 
				+                                        <p className="monospace mb-6">{feature.description}</p>
			
 
				+                                        <div className="section-divider"></div>
			
 
				+                                        <div className="grid grid-cols-3 gap-4 mt-4">
			
 
				+                                            {Object.entries(feature.stats).map(([key, value]) => (
			
 
				+                                                <div key={key}>
			
 
				+                                                    <span className="monospace text-sm block capitalize">{key}</span>
			
 
				+                                                    <span className="font-bold">{value}</span>
			
 
				+                                                </div>
			
 
				+                                            ))}
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Image Generator Demo */}
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <div className="brutalist-card p-0 overflow-hidden">
			
 
				+                            <div className="relative aspect-video">
			
 
				+                                <div className="absolute inset-0 grid grid-cols-2 gap-2 p-4">
			
 
				+                                    <div className="bg-gray-100 rounded"></div>
			
 
				+                                    <div className="bg-gray-100 rounded"></div>
			
 
				+                                    <div className="bg-gray-100 rounded"></div>
			
 
				+                                    <div className="bg-gray-100 rounded"></div>
			
 
				+                                </div>
			
 
				+                                <div className="absolute inset-0 diagonal-lines"></div>
			
 
				+                            </div>
			
 
				+                            <div className="p-6">
			
 
				+                                <h3 className="text-xl font-bold mb-4">{t('imageGen.demo.title')}</h3>
			
 
				+                                <p className="monospace mb-4">{t('imageGen.demo.description')}</p>
			
 
				+                                <Link to="/register" className="brutalist-button inline-block">
			
 
				+                                    {t('imageGen.demo.cta')} →
			
 
				+                                </Link>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {/* Style Presets */}
			
 
				+                    <div className="col-span-12 md:col-span-4">
			
 
				+                        <div className="brutalist-card p-6">
			
 
				+                            <h3 className="text-xl font-bold mb-6">{t('imageGen.styles.title')}</h3>
			
 
				+                            <div className="space-y-4">
			
 
				+                                {['Minimalist', 'Brutalist', 'Retro', 'Modern', 'Abstract'].map((style) => (
			
 
				+                                    <div key={style} className="brutalist-card p-3 hover:-translate-x-2 transition-transform cursor-pointer">
			
 
				+                                        <span className="monospace">{style}</span>
			
 
				+                                    </div>
			
 
				+                                ))}
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <Footer />
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default ImageGeneration; 
			
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,81 +1,118 @@
 
				 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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></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">
			
 
				-                        {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">
			
 
				-                        {t('login.subtitle')}
			
 
				-                    </p>
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('login.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('login.subtitle')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				                 </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 className="geometric-divider mb-16"></div>
			
 
				+
			
 
				+                {/* Login Form */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        <div className="brutalist-card">
			
 
				+                            {error && (
			
 
				+                                <div className="p-4 border-2 border-black bg-red-100 monospace">
			
 
				+                                    {error}
			
 
				+                                </div>
			
 
				+                            )}
			
 
				+
			
 
				+                            <form onSubmit={handleSubmit} className="p-6 space-y-8">
			
 
				+                                <div>
			
 
				+                                    <label htmlFor="email" className="block text-sm font-black uppercase 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 border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
			
 
				+                                        disabled={isLoading}
			
 
				+                                    />
			
 
				+                                </div>
			
 
				+
			
 
				+                                <div className="section-divider"></div>
			
 
				+
			
 
				+                                <button
			
 
				+                                    type="submit"
			
 
				+                                    disabled={isLoading}
			
 
				+                                    className="brutalist-button w-full disabled:opacity-50"
			
 
				+                                >
			
 
				+                                    {isLoading ? (
			
 
				+                                        <span className="monospace">Processing...</span>
			
 
				+                                    ) : (
			
 
				+                                        <span>{t('login.continue')} →</span>
			
 
				+                                    )}
			
 
				+                                </button>
			
 
				+                            </form>
			
 
				                         </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"
			
 
				-                            >
			
 
				-                                <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 className="mt-8 text-center">
			
 
				+                            <p className="monospace">
			
 
				+                                {t('login.noAccount')}{' '}
			
 
				+                                <Link to="/pricing" className="underline font-bold hover:text-gray-600 transition-colors">
			
 
				+                                    {t('login.viewPricing')}
			
 
				+                                </Link>
			
 
				+                            </p>
			
 
				                         </div>
			
 
				                     </div>
			
 
				-                </form>
			
 
				-
			
 
				-                {/* 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>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/Payment.jsx
+++ b/src/pages/Payment.jsx
@@ -1,36 +1,42 @@
 
				 import { useState } from 'react';
			
 
				-import { useSearchParams } from 'react-router-dom';
			
 
				+import { useSearchParams, Link } from 'react-router-dom';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+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`);
			
 
				+            formData.append('priceId', billingCycle === 'yearly' 
			
 
				+                ? planDetails?.prices.yearlyPriceId 
			
 
				+                : planDetails?.prices.monthlyPriceId
			
 
				+            );
			
 
				+            formData.append('email', email);
			
 
				 
			
 
				-            // 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);
			
 
				-
			
 
				-            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 +46,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,73 +57,83 @@ 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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></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">
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				                             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>
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            Selected plan: <span className="uppercase font-bold">{selectedPlan}</span>
			
 
				                         </p>
			
 
				                     </div>
			
 
				+                </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>
			
 
				+                <div className="geometric-divider mb-16"></div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        <div className="brutalist-card">
			
 
				+                            {message && (
			
 
				+                                <div className="p-4 border-2 border-black bg-yellow-100 monospace">
			
 
				+                                    {message}
			
 
				                                 </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="p-6 space-y-8">
			
 
				+                                <div className="space-y-4">
			
 
				+                                    <div className="flex justify-between items-center">
			
 
				+                                        <span className="monospace uppercase text-sm font-black">Plan</span>
			
 
				+                                        <span className="monospace uppercase font-bold">{selectedPlan}</span>
			
 
				+                                    </div>
			
 
				+                                    <div className="section-divider"></div>
			
 
				+                                    <div className="flex justify-between items-center">
			
 
				+                                        <span className="monospace uppercase text-sm font-black">Amount</span>
			
 
				+                                        <span className="monospace font-bold">
			
 
				+                                            ${amount}.00 / {billingCycle === 'yearly' ? 'year' : 'month'}
			
 
				+                                        </span>
			
 
				+                                    </div>
			
 
				+                                    <div className="section-divider"></div>
			
 
				+                                    <div className="flex justify-between items-center">
			
 
				+                                        <span className="monospace uppercase text-sm font-black">Trial Period</span>
			
 
				+                                        <span className="monospace font-bold">14 days free</span>
			
 
				+                                    </div>
			
 
				                                 </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>
			
 
				+
			
 
				+                                <form onSubmit={handleCheckout} className="mt-8">
			
 
				+                                    <button
			
 
				+                                        type="submit"
			
 
				+                                        disabled={isLoading}
			
 
				+                                        className="brutalist-button w-full disabled:opacity-50"
			
 
				+                                    >
			
 
				+                                        {isLoading ? (
			
 
				+                                            <span className="monospace">Processing...</span>
			
 
				+                                        ) : (
			
 
				+                                            <span>Proceed to checkout →</span>
			
 
				+                                        )}
			
 
				+                                    </button>
			
 
				+                                </form>
			
 
				+
			
 
				+                                <div className="text-center">
			
 
				+                                    <p className="monospace text-sm">
			
 
				+                                        Secure payment powered by Stripe
			
 
				+                                    </p>
			
 
				                                 </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"
			
 
				-                                >
			
 
				-                                    {isLoading ? (
			
 
				-                                        <>
			
 
				-                                            <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
			
 
				-                                            <span>Processing...</span>
			
 
				-                                        </>
			
 
				-                                    ) : (
			
 
				-                                        <>
			
 
				-                                            <span>Proceed to checkout</span>
			
 
				-                                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
			
 
				-                                        </>
			
 
				-                                    )}
			
 
				-                                </button>
			
 
				-                            </form>
			
 
				                         </div>
			
 
				-                    )}
			
 
				-
			
 
				-                    <p className="mt-4 text-center text-sm text-gray-500">
			
 
				-                        Secure payment powered by Stripe
			
 
				-                    </p>
			
 
				+                    </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/PaymentCancel.jsx
+++ b/src/pages/PaymentCancel.jsx
@@ -1,40 +1,73 @@
 
				-import { useNavigate } from 'react-router-dom';
			
 
				+import { useNavigate, Link } from 'react-router-dom';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            Payment Cancelled
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            Your payment was cancelled. No charges were made.
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div className="geometric-divider mb-16"></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>
			
 
				+                {/* Content */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        <div className="brutalist-card p-6 space-y-6">
			
 
				+                            <div className="flex items-center justify-center">
			
 
				+                                <div className="w-16 h-16">
			
 
				+                                    <div className="geometric-shape circle w-full h-full border-4 border-black">
			
 
				+                                        <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                            <span className="text-2xl">×</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+
			
 
				+                            <div className="text-center space-y-4">
			
 
				+                                <p className="monospace">
			
 
				+                                    Would you like to try again or go back to the pricing page?
			
 
				+                                </p>
			
 
				+                            </div>
			
 
				+
			
 
				+                            <div className="section-divider"></div>
			
 
				+
			
 
				+                            <div className="space-y-4">
			
 
				+                                <button
			
 
				+                                    onClick={() => navigate('/payment')}
			
 
				+                                    className="brutalist-button w-full"
			
 
				+                                >
			
 
				+                                    Try again →
			
 
				+                                </button>
			
 
				+                                <Link to="/pricing" className="brutalist-button w-full text-center">
			
 
				+                                    View pricing →
			
 
				+                                </Link>
			
 
				                             </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>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/PaymentSuccess.jsx
+++ b/src/pages/PaymentSuccess.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 PaymentSuccess() {
			
 
				     const [searchParams] = useSearchParams();
			
@@ -9,48 +11,69 @@ function PaymentSuccess() {
 
				     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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            Payment Successful
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            Thank you for subscribing to our service.
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div className="geometric-divider mb-16"></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>
			
 
				+                {/* Content */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        <div className="brutalist-card p-6 space-y-6">
			
 
				+                            <div className="flex items-center justify-center">
			
 
				+                                <div className="w-16 h-16 relative">
			
 
				+                                    <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
			
 
				+                                    <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                        <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>✓</span>
			
 
				+                                    </div>
			
 
				+                                </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 className="text-center space-y-4">
			
 
				+                                <p className="monospace">
			
 
				+                                    Your subscription is now active. You can start using our services right away.
			
 
				+                                </p>
			
 
				+                            </div>
			
 
				+
			
 
				+                            <div className="section-divider"></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="brutalist-button w-full disabled:opacity-50"
			
 
				+                                >
			
 
				+                                    {isLoading ? (
			
 
				+                                        <span className="monospace">Processing...</span>
			
 
				+                                    ) : (
			
 
				+                                        <span>Manage billing information →</span>
			
 
				+                                    )}
			
 
				+                                </button>
			
 
				+                            </form>
			
 
				                         </div>
			
 
				-                        <form action="http://192.168.1.35:8080/api/v1/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"
			
 
				-                            >
			
 
				-                                {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>
			
 
				-                                    </>
			
 
				-                                )}
			
 
				-                            </button>
			
 
				-                        </form>
			
 
				                     </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/Pricing.jsx
+++ b/src/pages/Pricing.jsx
@@ -1,137 +1,135 @@
 
				 import { Link } from 'react-router-dom';
			
 
				 import { useState } from 'react';
			
 
				 import { useLanguage } from '../context/LanguageContext';
			
 
				+import Footer from '../components/Footer';
			
 
				+import { API_HOST } from '../config';
			
 
				 
			
 
				-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'
			
 
				-            ],
			
 
				-        },
			
 
				-    ];
			
 
				+    const handleSubscribe = async (plan) => {
			
 
				+        try {
			
 
				+            const priceId = isYearly ? plan.prices.yearlyPriceId : plan.prices.monthlyPriceId;
			
 
				+            const response = await fetch(`${API_HOST}/api/v1/onboard/create-checkout-session`, {
			
 
				+                method: 'POST',
			
 
				+                headers: { 'Content-Type': 'application/json' },
			
 
				+                body: JSON.stringify({ priceId })
			
 
				+            });
			
 
				+            
			
 
				+            const { url } = await response.json();
			
 
				+            window.location.href = url;
			
 
				+        } catch (error) {
			
 
				+            console.error('Error creating checkout session:', error);
			
 
				+        }
			
 
				+    };
			
 
				 
			
 
				     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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></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">
			
 
				-                        {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">
			
 
				-                        {t('pricing.description')}
			
 
				-                    </p>
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('pricing.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('pricing.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Billing Toggle */}
			
 
				+                <div className="flex justify-center items-center mb-12">
			
 
				+                    <span className={`monospace mr-4 transition-colors ${!isYearly ? 'font-bold' : ''}`}>Monthly</span>
			
 
				+                    <div 
			
 
				+                        onClick={() => setIsYearly(!isYearly)}
			
 
				+                        className="brutalist-card inline-flex p-2 relative cursor-pointer w-16"
			
 
				+                    >
			
 
				+                        <div 
			
 
				+                            className="absolute top-2 left-2 h-[calc(100%-16px)] w-[calc(50%-8px)] bg-black transition-transform duration-300"
			
 
				+                            style={{
			
 
				+                                transform: isYearly ? 'translateX(100%)' : 'translateX(0)',
			
 
				+                            }}
			
 
				+                        />
			
 
				+                        <div className="relative w-6 h-6"></div>
			
 
				+                        <div className="relative w-6 h-6"></div>
			
 
				+                    </div>
			
 
				+                    <span className={`monospace ml-4 transition-colors ${isYearly ? 'font-bold' : ''}`}>
			
 
				+                        Yearly <span className="text-xs">-20%</span>
			
 
				+                    </span>
			
 
				                 </div>
			
 
				 
			
 
				-                <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 relative">
			
 
				-                    {plans.map((plan) => (
			
 
				+                <div className="geometric-divider mb-16"></div>
			
 
				+
			
 
				+                {/* Pricing Grid */}
			
 
				+                {isLoading ? (
			
 
				+                    <div className="text-center monospace">Loading plans...</div>
			
 
				+                ) : (
			
 
				+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
			
 
				+                        {[...pricingData].reverse().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' : ''}`}
			
 
				+                            className={`brutalist-card relative transition-transform duration-300 ${
			
 
				+                                hoveredPlan === plan.name ? 'transform -translate-y-2' : ''
			
 
				+                            } ${plan.popular ? 'border-4' : 'border-2'}`}
			
 
				                             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>
			
 
				+                                <div className="absolute -top-3 right-4 bg-black text-white px-4 py-1">
			
 
				+                                    <span className="monospace text-sm">{t('pricing.mostPopular')}</span>
			
 
				+                                </div>
			
 
				                             )}
			
 
				-                            <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 className="p-6">
			
 
				+                                <h3 className="text-2xl font-black uppercase mb-4">{plan.name}</h3>
			
 
				+                                <p className="text-sm monospace mb-4">{plan.description}</p>
			
 
				+                                <div className="flex items-baseline mb-6">
			
 
				+                                    <span className="text-4xl font-black">
			
 
				+                                        ${isYearly ? plan.prices.yearly : plan.prices.monthly}
			
 
				+                                    </span>
			
 
				+                                    <span className="ml-2 monospace">
			
 
				+                                        {isYearly ? t('pricing.perYear') : t('pricing.perMonth')}
			
 
				+                                    </span>
			
 
				+                                </div>
			
 
				+                                <div className="section-divider mb-6"></div>
			
 
				+                                <ul className="space-y-4">
			
 
				+                                    {plan.features.map((feature) => (
			
 
				+                                        <li key={feature} className="flex items-start gap-3 monospace">
			
 
				+                                            <span className="text-xl leading-none">→</span>
			
 
				+                                            {feature}
			
 
				+                                        </li>
			
 
				+                                    ))}
			
 
				+                                </ul>
			
 
				+                                <button
			
 
				+                                    onClick={() => {window.location =`/register?plan=${plan.name.toLowerCase()}&billing=${isYearly ? 'yearly' : 'monthly'}`}}
			
 
				+                                    className="brutalist-button w-full mt-8 text-center"
			
 
				+                                                            >
			
 
				+                                    {t('pricing.getStarted')} →
			
 
				+                                </button>
			
 
				+                            </div>
			
 
				                         </div>
			
 
				                     ))}
			
 
				                 </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>
			
 
				+                <div className="geometric-divider my-16"></div>
			
 
				+
			
 
				+                <div className="text-center monospace">
			
 
				+                    <p className="text-lg">
			
 
				                         {t('pricing.trial')}
			
 
				-                        <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
			
 
				                     </p>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/Privacy.jsx
+++ b/src/pages/Privacy.jsx
@@ -0,0 +1,64 @@
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('privacy.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape circle w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('privacy.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Privacy Content */}
			
 
				+                <div className="brutalist-card p-8">
			
 
				+                    <div className="space-y-12">
			
 
				+                        {sections.map((section) => (
			
 
				+                            <div key={section.title}>
			
 
				+                                <h2 className="text-2xl font-black uppercase mb-4">{section.title}</h2>
			
 
				+                                <p className="monospace whitespace-pre-line">{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,106 +55,117 @@ 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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></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">
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				                             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>
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            Selected plan: <span className="uppercase font-bold">{selectedPlan}</span>
			
 
				                         </p>
			
 
				                     </div>
			
 
				+                </div>
			
 
				 
			
 
				-                    {error && (
			
 
				-                        <div className="mt-4 p-4 bg-red-50 rounded-2xl text-red-600 text-sm">
			
 
				-                            {error}
			
 
				-                        </div>
			
 
				-                    )}
			
 
				-
			
 
				-                    <form onSubmit={handleSubmit} className="mt-8 space-y-6">
			
 
				-                        <div className="space-y-4">
			
 
				-                            <div>
			
 
				-                                <label htmlFor="name" className="sr-only">First Name</label>
			
 
				-                                <input
			
 
				-                                    id="name"
			
 
				-                                    name="name"
			
 
				-                                    type="text"
			
 
				-                                    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"
			
 
				-                                />
			
 
				-                            </div>
			
 
				+                <div className="geometric-divider mb-16"></div>
			
 
				 
			
 
				-                            <div>
			
 
				-                                <label htmlFor="surname" className="sr-only">Last Name</label>
			
 
				-                                <input
			
 
				-                                    id="surname"
			
 
				-                                    name="surname"
			
 
				-                                    type="text"
			
 
				-                                    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"
			
 
				-                                />
			
 
				-                            </div>
			
 
				+                {/* Registration Form */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        <div className="brutalist-card">
			
 
				+                            {error && (
			
 
				+                                <div className="p-4 border-2 border-black bg-red-100 monospace">
			
 
				+                                    {error}
			
 
				+                                </div>
			
 
				+                            )}
			
 
				 
			
 
				-                            <div>
			
 
				-                                <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)}
			
 
				-                                    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>
			
 
				-                        </div>
			
 
				+                            <form onSubmit={handleSubmit} className="p-6 space-y-8">
			
 
				+                                <div className="space-y-6">
			
 
				+                                    <div>
			
 
				+                                        <label htmlFor="name" className="block text-sm font-black uppercase mb-2">
			
 
				+                                            First Name
			
 
				+                                        </label>
			
 
				+                                        <input
			
 
				+                                            id="name"
			
 
				+                                            name="name"
			
 
				+                                            type="text"
			
 
				+                                            required
			
 
				+                                            value={name}
			
 
				+                                            onChange={(e) => setName(e.target.value)}
			
 
				+                                            placeholder="Enter your first name"
			
 
				+                                            className="w-full border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
			
 
				+                                        />
			
 
				+                                    </div>
			
 
				+
			
 
				+                                    <div>
			
 
				+                                        <label htmlFor="surname" className="block text-sm font-black uppercase mb-2">
			
 
				+                                            Last Name
			
 
				+                                        </label>
			
 
				+                                        <input
			
 
				+                                            id="surname"
			
 
				+                                            name="surname"
			
 
				+                                            type="text"
			
 
				+                                            required
			
 
				+                                            value={surname}
			
 
				+                                            onChange={(e) => setSurname(e.target.value)}
			
 
				+                                            placeholder="Enter your last name"
			
 
				+                                            className="w-full border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
			
 
				+                                        />
			
 
				+                                    </div>
			
 
				+
			
 
				+                                    <div>
			
 
				+                                        <label htmlFor="email" className="block text-sm font-black uppercase 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 border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
			
 
				+                                        />
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+
			
 
				+                                <div className="section-divider"></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"
			
 
				-                            >
			
 
				-                                {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>
			
 
				-                                    </>
			
 
				-                                )}
			
 
				-                            </button>
			
 
				+                                <button
			
 
				+                                    type="submit"
			
 
				+                                    disabled={isLoading}
			
 
				+                                    className="brutalist-button w-full disabled:opacity-50"
			
 
				+                                >
			
 
				+                                    {isLoading ? (
			
 
				+                                        <span className="monospace">Creating account...</span>
			
 
				+                                    ) : (
			
 
				+                                        <span>Create account →</span>
			
 
				+                                    )}
			
 
				+                                </button>
			
 
				+                            </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>
			
 
				-                        </p>
			
 
				-                    </form>
			
 
				+                        <div className="mt-8 text-center">
			
 
				+                            <p className="monospace">
			
 
				+                                Already have an account?{' '}
			
 
				+                                <Link to="/login" className="underline font-bold hover:text-gray-600 transition-colors">
			
 
				+                                    Sign in
			
 
				+                                </Link>
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/RegistrationSuccess.jsx
+++ b/src/pages/RegistrationSuccess.jsx
@@ -1,41 +1,72 @@
 
				 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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></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.
			
 
				-                    </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
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            Check Your Email
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            We've sent you a verification link. Please check your inbox to continue.
			
 
				                         </p>
			
 
				-                        <button
			
 
				-                            className="text-brand-purple hover:text-brand-purple/80 text-sm font-medium"
			
 
				-                            onClick={() => window.location.reload()}
			
 
				-                        >
			
 
				-                            Click here to try again
			
 
				-                        </button>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div className="geometric-divider mb-16"></div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        <div className="brutalist-card p-6 space-y-6">
			
 
				+                            <div className="flex items-center justify-center">
			
 
				+                                <div className="w-16 h-16 relative">
			
 
				+                                    <div className="geometric-shape square w-full h-full border-4 border-black"></div>
			
 
				+                                    <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                        <span className="text-2xl">✉</span>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+
			
 
				+                            <div className="text-center space-y-4">
			
 
				+                                <p className="monospace">
			
 
				+                                    Click the link in the email we just sent you to verify your account.
			
 
				+                                </p>
			
 
				+                                <p className="monospace text-sm">
			
 
				+                                    Didn't receive the email? Check your spam folder or{' '}
			
 
				+                                    <button 
			
 
				+                                        onClick={() => window.location.reload()}
			
 
				+                                        className="underline font-bold hover:text-gray-600 transition-colors"
			
 
				+                                    >
			
 
				+                                        click here to try again
			
 
				+                                    </button>
			
 
				+                                </p>
			
 
				+                            </div>
			
 
				+
			
 
				+                            <div className="section-divider"></div>
			
 
				+
			
 
				+                            <Link to="/login" className="brutalist-button w-full text-center">
			
 
				+                                Back to Login →
			
 
				+                            </Link>
			
 
				+                        </div>
			
 
				                     </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/Terms.jsx
+++ b/src/pages/Terms.jsx
@@ -0,0 +1,64 @@
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {t('terms.title')}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape square w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {t('terms.description')}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Terms Content */}
			
 
				+                <div className="brutalist-card p-8">
			
 
				+                    <div className="space-y-12">
			
 
				+                        {sections.map((section) => (
			
 
				+                            <div key={section.title}>
			
 
				+                                <h2 className="text-2xl font-black uppercase mb-4">{section.title}</h2>
			
 
				+                                <p className="monospace whitespace-pre-line">{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,52 @@ 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="brutalist-card p-6 space-y-6">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16">
			
 
				+                                <div className="geometric-shape circle w-full h-full border-4 border-black animate-spin"></div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <p className="monospace text-center">Verifying your email...</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="brutalist-card p-6 space-y-6">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16 relative">
			
 
				+                                <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
			
 
				+                                <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                    <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>✓</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div className="text-center space-y-4">
			
 
				+                            <h2 className="monospace text-2xl font-bold">Email Verified!</h2>
			
 
				+                            <p className="monospace">Your email has been successfully verified.</p>
			
 
				+                            <p className="monospace text-sm">Redirecting to payment...</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="brutalist-card p-6 space-y-6">
			
 
				+                        <div className="flex items-center justify-center">
			
 
				+                            <div className="w-16 h-16 relative">
			
 
				+                                <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
			
 
				+                                <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                    <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>×</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div className="text-center space-y-4">
			
 
				+                            <h2 className="monospace text-2xl font-bold">Verification Failed</h2>
			
 
				+                            <p className="monospace">{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"
			
 
				-                        >
			
 
				-                            Go to Login
			
 
				-                        </button>
			
 
				+                        <div className="section-divider"></div>
			
 
				+                        <Link to="/login" className="brutalist-button w-full text-center">
			
 
				+                            Back to Login →
			
 
				+                        </Link>
			
 
				                     </div>
			
 
				                 );
			
 
				             default:
			
@@ -92,18 +106,37 @@ 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>
			
 
				+        <div className="relative min-h-screen bg-white">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            Email Verification
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            Please wait while we verify your email address.
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div className="geometric-divider mb-16"></div>
			
 
				 
			
 
				-            <div className="w-full max-w-md">
			
 
				-                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
			
 
				-                    {renderContent()}
			
 
				+                {/* Content */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        {renderContent()}
			
 
				+                    </div>
			
 
				                 </div>
			
 
				             </div>
			
 
				+
			
 
				+            <Footer />
			
 
				         </div>
			
 
				     );
			
 
				 }
			
--- a/src/pages/VerifyEmailConfirm.jsx
+++ b/src/pages/VerifyEmailConfirm.jsx
@@ -0,0 +1,149 @@
 
				+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">
			
 
				+            {/* Technical grid background */}
			
 
				+            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
			
 
				+
			
 
				+            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
			
 
				+                {/* Header section */}
			
 
				+                <div className="grid-layout mb-16">
			
 
				+                    <div className="col-span-12 md:col-span-8">
			
 
				+                        <h1 className="brutalist-heading relative">
			
 
				+                            {verificationStatus === 'verifying' && 'Verifying Email'}
			
 
				+                            {verificationStatus === 'success' && 'Email Verified!'}
			
 
				+                            {verificationStatus === 'error' && 'Verification Failed'}
			
 
				+                            <div className="absolute -right-8 -top-8 w-16 h-16">
			
 
				+                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
			
 
				+                            </div>
			
 
				+                        </h1>
			
 
				+                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
			
 
				+                            {verificationStatus === 'verifying' && 'Please wait while we verify your email address...'}
			
 
				+                            {verificationStatus === 'success' && 'Your email has been successfully verified. Redirecting to payment...'}
			
 
				+                            {verificationStatus === 'error' && 'We encountered an error while verifying your email.'}
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div className="geometric-divider mb-16"></div>
			
 
				+
			
 
				+                {/* Content */}
			
 
				+                <div className="grid-layout">
			
 
				+                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
			
 
				+                        <div className="brutalist-card p-6 space-y-6">
			
 
				+                            <div className="flex items-center justify-center">
			
 
				+                                {verificationStatus === 'verifying' && (
			
 
				+                                    <div className="w-16 h-16">
			
 
				+                                        <div className="geometric-shape circle w-full h-full border-4 border-black animate-spin"></div>
			
 
				+                                    </div>
			
 
				+                                )}
			
 
				+                                {verificationStatus === 'success' && (
			
 
				+                                    <div className="w-16 h-16">
			
 
				+                                        <div className="geometric-shape circle w-full h-full border-4 border-black">
			
 
				+                                            <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                                <span className="text-2xl">✓</span>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                )}
			
 
				+                                {verificationStatus === 'error' && (
			
 
				+                                    <div className="w-16 h-16">
			
 
				+                                        <div className="geometric-shape circle w-full h-full border-4 border-black">
			
 
				+                                            <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                                                <span className="text-2xl">×</span>
			
 
				+                                            </div>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                )}
			
 
				+                            </div>
			
 
				+
			
 
				+                            <div className="text-center space-y-4">
			
 
				+                                {verificationStatus === 'verifying' && (
			
 
				+                                    <p className="monospace">
			
 
				+                                        Verifying your email address...
			
 
				+                                    </p>
			
 
				+                                )}
			
 
				+                                {verificationStatus === 'success' && (
			
 
				+                                    <p className="monospace">
			
 
				+                                        Great! You'll be redirected to complete your payment shortly.
			
 
				+                                    </p>
			
 
				+                                )}
			
 
				+                                {verificationStatus === 'error' && (
			
 
				+                                    <>
			
 
				+                                        <p className="monospace text-red-600">
			
 
				+                                            {error}
			
 
				+                                        </p>
			
 
				+                                        <p className="monospace text-sm">
			
 
				+                                            Please try again or contact support if the problem persists.
			
 
				+                                        </p>
			
 
				+                                    </>
			
 
				+                                )}
			
 
				+                            </div>
			
 
				+
			
 
				+                            {verificationStatus === 'error' && (
			
 
				+                                <>
			
 
				+                                    <div className="section-divider"></div>
			
 
				+                                    <Link to="/login" className="brutalist-button w-full text-center">
			
 
				+                                        Back to Login →
			
 
				+                                    </Link>
			
 
				+                                </>
			
 
				+                            )}
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+
			
 
				+            
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default VerifyEmailConfirm; 
			
--- a/src/styles.css
+++ b/src/styles.css
@@ -0,0 +1,568 @@
 
				+@tailwind base;
			
 
				+@tailwind components;
			
 
				+@tailwind utilities;
			
 
				+
			
 
				+@layer utilities {
			
 
				+  .tracking-tighter {
			
 
				+    letter-spacing: -0.05em;
			
 
				+  }
			
 
				+  
			
 
				+  .aspect-square {
			
 
				+    aspect-ratio: 1 / 1;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@layer components {
			
 
				+  /* Brutalist Border */
			
 
				+  .brutalist-border {
			
 
				+    @apply border-2 border-black;
			
 
				+  }
			
 
				+
			
 
				+  .animate-draw {
			
 
				+    stroke-dasharray: 1000;
			
 
				+    stroke-dashoffset: 1000;
			
 
				+  }
			
 
				+
			
 
				+  .hieroglyph-symbol {
			
 
				+    @apply relative w-full aspect-square;
			
 
				+    &::before {
			
 
				+      content: '';
			
 
				+      @apply absolute inset-0 border border-white/20;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .modern-symbol {
			
 
				+    @apply w-12 h-12 border-2 border-white transform transition-transform duration-500;
			
 
				+    &:hover {
			
 
				+      @apply rotate-90 scale-110;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .modern-symbol-circle {
			
 
				+    @apply w-12 h-12 rounded-full border-2 border-white transform transition-transform duration-500;
			
 
				+    &:hover {
			
 
				+      @apply scale-110;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .symbol-container {
			
 
				+    @apply relative p-2 animate-pulse;
			
 
				+  }
			
 
				+
			
 
				+  .symbol-stripe {
			
 
				+    @apply w-full h-full;
			
 
				+    background-image: repeating-linear-gradient(
			
 
				+      90deg,
			
 
				+      white 0px,
			
 
				+      white 2px,
			
 
				+      transparent 2px,
			
 
				+      transparent 10px
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  .symbol-dots {
			
 
				+    @apply w-full h-full;
			
 
				+    background-image: radial-gradient(
			
 
				+      circle,
			
 
				+      white 1px,
			
 
				+      transparent 1px
			
 
				+    );
			
 
				+    background-size: 8px 8px;
			
 
				+  }
			
 
				+
			
 
				+  .symbol-checker {
			
 
				+    @apply w-full h-full;
			
 
				+    background-image: 
			
 
				+      linear-gradient(45deg, white 25%, transparent 25%),
			
 
				+      linear-gradient(-45deg, white 25%, transparent 25%);
			
 
				+    background-size: 8px 8px;
			
 
				+  }
			
 
				+
			
 
				+  .symbol-arrow {
			
 
				+    clip-path: polygon(0 0, 100% 50%, 0 100%);
			
 
				+    @apply w-full h-full bg-white/20;
			
 
				+  }
			
 
				+
			
 
				+  .symbol-cloud {
			
 
				+    clip-path: path('M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30');
			
 
				+    @apply w-full h-full bg-white/20;
			
 
				+  }
			
 
				+
			
 
				+  .symbol-octagon {
			
 
				+    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
			
 
				+    @apply w-full h-full bg-white/20;
			
 
				+  }
			
 
				+
			
 
				+  .glyph-symbol {
			
 
				+    @apply relative w-full aspect-square opacity-0;
			
 
				+    animation: appear 0.5s ease forwards;
			
 
				+    &::before {
			
 
				+      content: '';
			
 
				+      @apply absolute inset-0 border border-white/10;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .technical-symbol {
			
 
				+    @apply w-16 h-16 relative;
			
 
				+    &::before, &::after {
			
 
				+      content: '';
			
 
				+      @apply absolute inset-0 border-2 border-white/60 transition-transform duration-700;
			
 
				+    }
			
 
				+    &:hover::before {
			
 
				+      @apply rotate-45 scale-110;
			
 
				+    }
			
 
				+    &:hover::after {
			
 
				+      @apply -rotate-45 scale-90;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .technical-symbol-circle {
			
 
				+    @apply w-16 h-16 relative;
			
 
				+    &::before {
			
 
				+      content: '';
			
 
				+      @apply absolute inset-0 border-2 border-white/60 rounded-full transition-transform duration-700;
			
 
				+    }
			
 
				+    &::after {
			
 
				+      content: '';
			
 
				+      @apply absolute inset-4 border border-white/30 transition-transform duration-700;
			
 
				+    }
			
 
				+    &:hover::before {
			
 
				+      @apply scale-110;
			
 
				+    }
			
 
				+    &:hover::after {
			
 
				+      @apply scale-75;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .symbol-container {
			
 
				+    @apply relative;
			
 
				+    animation: float 6s ease-in-out infinite;
			
 
				+  }
			
 
				+
			
 
				+  /* Navbar Styles */
			
 
				+  .nav-link {
			
 
				+    @apply relative text-gray-400 hover:text-white transition-colors duration-300;
			
 
				+    &::after {
			
 
				+      content: '';
			
 
				+      @apply absolute left-0 bottom-[-4px] w-0 h-px bg-white transition-all duration-300;
			
 
				+    }
			
 
				+    &:hover::after {
			
 
				+      @apply w-full;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .technical-symbol-small {
			
 
				+    @apply w-8 h-8 relative;
			
 
				+    &::before {
			
 
				+      content: '';
			
 
				+      @apply absolute inset-0 border border-white/60 rotate-45;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  /* Background Patterns */
			
 
				+  .bg-grid-pattern {
			
 
				+    background-image: linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),
			
 
				+                      linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
			
 
				+    background-size: 40px 40px;
			
 
				+  }
			
 
				+
			
 
				+  /* Pricing Cards */
			
 
				+  .pricing-card {
			
 
				+    @apply relative bg-black/50 backdrop-blur-md transition-transform duration-500;
			
 
				+    &:hover {
			
 
				+      transform: translateY(-8px);
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  /* Particles */
			
 
				+  .particle-container {
			
 
				+    @apply absolute inset-0 overflow-hidden;
			
 
				+  }
			
 
				+
			
 
				+  .particle {
			
 
				+    @apply absolute w-1 h-1 bg-white/30 rounded-full;
			
 
				+    animation: float-random 20s linear infinite;
			
 
				+    
			
 
				+    @for $i from 1 through 20 {
			
 
				+      &:nth-child(#{$i}) {
			
 
				+        left: random(100) * 1%;
			
 
				+        top: random(100) * 1%;
			
 
				+        animation-delay: random(5000) * -1ms;
			
 
				+        animation-duration: (random(20) + 10) * 1s;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  /* Geometric Icons */
			
 
				+  .icon-ai {
			
 
				+    position: relative;
			
 
				+    width: 2rem;
			
 
				+    height: 2rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: path('M0 0 H32 V32 H0 V0 M8 0 V32');
			
 
				+    clip-path: path('M0 0 H32 V32 H0 V0 M8 0 V32');
			
 
				+  }
			
 
				+
			
 
				+  .icon-image {
			
 
				+    position: relative;
			
 
				+    width: 2rem;
			
 
				+    height: 2rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
			
 
				+    clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
			
 
				+  }
			
 
				+
			
 
				+  .icon-analytics {
			
 
				+    position: relative;
			
 
				+    width: 2rem;
			
 
				+    height: 2rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: path('M0 0h5v32h-5zM14 0h5v32h-5zM28 0h5v32h-5z');
			
 
				+    clip-path: path('M0 0h5v32h-5zM14 0h5v32h-5zM28 0h5v32h-5z');
			
 
				+  }
			
 
				+
			
 
				+  .icon-growth {
			
 
				+    position: relative;
			
 
				+    width: 2rem;
			
 
				+    height: 2rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: path('M16 0 L32 32 L0 32 Z');
			
 
				+    clip-path: path('M16 0 L32 32 L0 32 Z');
			
 
				+  }
			
 
				+
			
 
				+  /* Small Icons */
			
 
				+  .icon-ai-small {
			
 
				+    position: relative;
			
 
				+    width: 1rem;
			
 
				+    height: 1rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: path('M0 0 H16 V16 H0 V0 M4 0 V16');
			
 
				+    clip-path: path('M0 0 H16 V16 H0 V0 M4 0 V16');
			
 
				+  }
			
 
				+
			
 
				+  .icon-image-small {
			
 
				+    position: relative;
			
 
				+    width: 1rem;
			
 
				+    height: 1rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
			
 
				+    clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
			
 
				+  }
			
 
				+
			
 
				+  .icon-analytics-small {
			
 
				+    position: relative;
			
 
				+    width: 1rem;
			
 
				+    height: 1rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: path('M0 0h3v16h-3zM7 0h3v16h-3zM14 0h3v16h-3z');
			
 
				+    clip-path: path('M0 0h3v16h-3zM7 0h3v16h-3zM14 0h3v16h-3z');
			
 
				+  }
			
 
				+
			
 
				+  .icon-growth-small {
			
 
				+    position: relative;
			
 
				+    width: 1rem;
			
 
				+    height: 1rem;
			
 
				+    background-color: black;
			
 
				+    -webkit-clip-path: path('M8 0 L16 16 L0 16 Z');
			
 
				+    clip-path: path('M8 0 L16 16 L0 16 Z');
			
 
				+  }
			
 
				+
			
 
				+  /* Card Styles */
			
 
				+  .brutalist-card {
			
 
				+    position: relative;
			
 
				+    padding: 1.5rem;
			
 
				+    border: 2px solid black;
			
 
				+    transition: background-color 0.3s;
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-card:hover {
			
 
				+    background-color: rgba(0, 0, 0, 0.05);
			
 
				+  }
			
 
				+
			
 
				+  /* Hover Line Effect */
			
 
				+  .hover-line {
			
 
				+    height: 3px;
			
 
				+    width: 0;
			
 
				+    background-color: black;
			
 
				+    transition: width 0.3s;
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-card:hover .hover-line {
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+
			
 
				+  /* Pattern backgrounds for hover states */
			
 
				+  .pattern-ai {
			
 
				+    @apply absolute inset-0 opacity-0 transition-opacity;
			
 
				+    background-image: linear-gradient(45deg, black 25%, transparent 25%),
			
 
				+                      linear-gradient(-45deg, black 25%, transparent 25%);
			
 
				+    background-size: 8px 8px;
			
 
				+  }
			
 
				+
			
 
				+  .pattern-image {
			
 
				+    @apply absolute inset-0 opacity-0 transition-opacity;
			
 
				+    background-image: radial-gradient(circle, black 1px, transparent 1px);
			
 
				+    background-size: 8px 8px;
			
 
				+  }
			
 
				+
			
 
				+  .pattern-analytics {
			
 
				+    @apply absolute inset-0 opacity-0 transition-opacity;
			
 
				+    background-image: repeating-linear-gradient(
			
 
				+      90deg,
			
 
				+      black 0px,
			
 
				+      black 2px,
			
 
				+      transparent 2px,
			
 
				+      transparent 8px
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  .pattern-growth {
			
 
				+    @apply absolute inset-0 opacity-0 transition-opacity;
			
 
				+    background-image: linear-gradient(0deg, black 50%, transparent 50%);
			
 
				+    background-size: 8px 8px;
			
 
				+  }
			
 
				+
			
 
				+  /* Remove all title decoration styles */
			
 
				+  .title-ai, .title-image, .title-analytics, .title-growth {
			
 
				+    @apply relative inline-block;
			
 
				+  }
			
 
				+
			
 
				+  @keyframes appear {
			
 
				+    0% {
			
 
				+      opacity: 0;
			
 
				+      transform: scale(0.8);
			
 
				+    }
			
 
				+    100% {
			
 
				+      opacity: 1;
			
 
				+      transform: scale(1);
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  /* Dropdown Menu */
			
 
				+  .brutalist-dropdown {
			
 
				+    position: absolute;
			
 
				+    background-color: white;
			
 
				+    border: 2px solid black;
			
 
				+    min-width: 240px;
			
 
				+    box-shadow: 4px 4px 0 black;
			
 
				+    transform-origin: top center;
			
 
				+    animation: dropdownAppear 0.2s ease-out;
			
 
				+    margin-top: 0.5rem;
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-dropdown::before,
			
 
				+  .brutalist-dropdown::after {
			
 
				+    content: '';
			
 
				+    position: absolute;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-dropdown::before {
			
 
				+    top: -10px;
			
 
				+    border-left: 10px solid transparent;
			
 
				+    border-right: 10px solid transparent;
			
 
				+    border-bottom: 10px solid black;
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-dropdown::after {
			
 
				+    top: -7px;
			
 
				+    border-left: 8px solid transparent;
			
 
				+    border-right: 8px solid transparent;
			
 
				+    border-bottom: 8px solid white;
			
 
				+  }
			
 
				+
			
 
				+  @keyframes dropdownAppear {
			
 
				+    from {
			
 
				+      opacity: 0;
			
 
				+      transform: translateY(-5px) translateX(-50%);
			
 
				+    }
			
 
				+    to {
			
 
				+      opacity: 1;
			
 
				+      transform: translateY(0) translateX(-50%);
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  /* Update brutalist button styles */
			
 
				+  .brutalist-button {
			
 
				+    position: relative;
			
 
				+    padding: 0.75rem 1.5rem;
			
 
				+    background: white;
			
 
				+    border: 2px solid black;
			
 
				+    font-weight: 700;
			
 
				+    text-transform: uppercase;
			
 
				+    transition: transform 0.2s, box-shadow 0.2s;
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-button:hover {
			
 
				+    transform: translate(-2px, -2px);
			
 
				+    box-shadow: 4px 4px 0 black;
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-button:active {
			
 
				+    transform: translate(0, 0);
			
 
				+    box-shadow: none;
			
 
				+  }
			
 
				+
			
 
				+  /* Technical Overlays */
			
 
				+  .technical-grid {
			
 
				+    background-image: 
			
 
				+      linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
			
 
				+      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
			
 
				+    background-size: 24px 24px;
			
 
				+  }
			
 
				+
			
 
				+  .diagonal-lines {
			
 
				+    background-image: repeating-linear-gradient(
			
 
				+      45deg,
			
 
				+      rgba(0, 0, 0, 0.1) 0px,
			
 
				+      rgba(0, 0, 0, 0.1) 1px,
			
 
				+      transparent 1px,
			
 
				+      transparent 8px
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  .crosshatch {
			
 
				+    background-image: 
			
 
				+      repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 8px),
			
 
				+      repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 8px);
			
 
				+  }
			
 
				+
			
 
				+  .technical-diagram {
			
 
				+    @apply relative aspect-square brutalist-border bg-white;
			
 
				+  }
			
 
				+
			
 
				+  .technical-diagram::before {
			
 
				+    content: '';
			
 
				+    position: absolute;
			
 
				+    inset: 0;
			
 
				+    background-image: 
			
 
				+      linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent),
			
 
				+      linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent);
			
 
				+    background-size: 50px 50px;
			
 
				+  }
			
 
				+
			
 
				+  /* Section Dividers */
			
 
				+  .section-divider {
			
 
				+    @apply w-full h-px bg-black my-8;
			
 
				+  }
			
 
				+
			
 
				+  /* Typography Enhancements */
			
 
				+  .brutalist-heading {
			
 
				+    @apply text-4xl md:text-5xl font-black uppercase tracking-tighter leading-none;
			
 
				+  }
			
 
				+
			
 
				+  .brutalist-subheading {
			
 
				+    @apply text-2xl font-black uppercase tracking-tight;
			
 
				+  }
			
 
				+
			
 
				+  /* Geometric Patterns */
			
 
				+  .geometric-pattern {
			
 
				+    @apply opacity-20;
			
 
				+  }
			
 
				+
			
 
				+  .pattern-dots {
			
 
				+    background-image: radial-gradient(black 1px, transparent 1px);
			
 
				+    background-size: 10px 10px;
			
 
				+  }
			
 
				+
			
 
				+  .pattern-diagonal {
			
 
				+    background-image: repeating-linear-gradient(
			
 
				+        45deg,
			
 
				+        black 0,
			
 
				+        black 1px,
			
 
				+        transparent 0,
			
 
				+        transparent 50%
			
 
				+    );
			
 
				+    background-size: 10px 10px;
			
 
				+  }
			
 
				+
			
 
				+  .pattern-grid {
			
 
				+    background-image: 
			
 
				+        linear-gradient(to right, black 1px, transparent 1px),
			
 
				+        linear-gradient(to bottom, black 1px, transparent 1px);
			
 
				+    background-size: 10px 10px;
			
 
				+  }
			
 
				+
			
 
				+  /* Video Overlays */
			
 
				+  .video-container {
			
 
				+    position: relative;
			
 
				+  }
			
 
				+
			
 
				+  .video-overlay {
			
 
				+    @apply absolute inset-0 bg-black opacity-20;
			
 
				+  }
			
 
				+
			
 
				+  .video-overlay::before {
			
 
				+    content: '';
			
 
				+    position: absolute;
			
 
				+    inset: 0;
			
 
				+    background-image: 
			
 
				+      linear-gradient(45deg, transparent 45%, black 45%, black 55%, transparent 55%),
			
 
				+      linear-gradient(-45deg, transparent 45%, black 45%, black 55%, transparent 55%);
			
 
				+    background-size: 8px 8px;
			
 
				+    opacity: 0.1;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@keyframes float {
			
 
				+  0%, 100% {
			
 
				+    transform: translateY(0);
			
 
				+  }
			
 
				+  50% {
			
 
				+    transform: translateY(-10px);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@keyframes scroll {
			
 
				+  0% {
			
 
				+    transform: translateX(0);
			
 
				+  }
			
 
				+  100% {
			
 
				+    transform: translateX(-50%);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.animate-scroll {
			
 
				+  animation: scroll 20s linear infinite;
			
 
				+}
			
 
				+
			
 
				+@keyframes float-random {
			
 
				+  0% {
			
 
				+    transform: translate(0, 0);
			
 
				+  }
			
 
				+  33% {
			
 
				+    transform: translate(100px, 100px);
			
 
				+  }
			
 
				+  66% {
			
 
				+    transform: translate(-50px, 200px);
			
 
				+  }
			
 
				+  100% {
			
 
				+    transform: translate(0, 0);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.animate-float-delayed {
			
 
				+  animation: float 6s ease-in-out infinite;
			
 
				+  animation-delay: -3s;
			
 
				+}
			
 
				+
			
 
				+/* Grid layout */
			
 
				+.grid-layout {
			
 
				+    @apply grid grid-cols-12 gap-8;
			
 
				+}
			
 
				+
			
 
				+/* Brutalist card */
			
 
				+/* .brutalist-card {
			
 
				+    @apply p-6 bg-white brutalist-border;
			
 
				+} */
			
 
				+
			
 
				+/* Brutalist button */
			
 
				+.brutalist-button {
			
 
				+    @apply px-6 py-3 bg-black text-white font-bold uppercase tracking-wider hover:translate-x-1 transition-transform;
			
 
				+}
			
 
				+
			
 
				+/* Monospace text */
			
 
				+.monospace {
			
 
				+    @apply font-mono;
			
 
				+}
		`@@ -0,0 +1 @@`
		`+export const API_HOST = 'https://byom.moooffle.com';`