Update API host and enhance UI components with new styles and translations

src/components/Navbar.jsx

@@ -7,13 +7,6 @@ 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) {
@@ -29,66 +22,66 @@ function Navbar() {
     }, []);
 
     return (
-        <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>
+        <nav className="fixed w-full bg-white/80 backdrop-blur-sm z-50 top-0">
+            {/* Gradient border bottom */}
+            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16">
-                <div className="flex justify-between items-center h-24">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="flex justify-between items-center h-20">
                     {/* Logo */}
-                    <Link to="/" className="monospace text-2xl font-black uppercase tracking-tighter relative group">
+                    <Link to="/" className="font-light text-2xl tracking-tight 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>
+                        <div className="absolute -right-2 -top-2 w-1.5 h-1.5 bg-brand-purple rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
                     </Link>
 
                     {/* Center menu */}
-                    <div className="flex items-center gap-12" ref={dropdownRef}>
+                    <div className="flex items-center gap-8" ref={dropdownRef}>
                         {/* Contact button */}
                         <button
                             onClick={() => setIsOpen(!isOpen)}
-                            className="brutalist-button !py-2 !px-4 text-sm relative"
+                            className="text-sm relative group"
                         >
                             {t('nav.contact')}
+                            <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-blue group-hover:w-full transition-all duration-300"></div>
                         </button>
 
                         {/* Dropdown menu */}
                         {isOpen && (
-                            <div className="absolute top-full 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-3 text-base monospace hover:translate-x-2 transition-transform"
-                                    >
-                                        <div className="w-2 h-2 bg-black geometric-shape diamond"></div>
-                                        hello@byom.fr
-                                    </a>
+                            <div className="absolute top-full mt-2 left-1/2 -translate-x-1/2 bg-white/80 backdrop-blur-sm rounded-lg shadow-lg border border-gray-100 p-4 min-w-[240px]">
+                                <div className="text-sm font-medium text-gray-500 mb-3">
+                                    {t('nav.getInTouch')}
                                 </div>
+                                <a
+                                    href="mailto:hello@byom.fr"
+                                    className="flex items-center gap-2 text-sm hover:text-brand-purple transition-colors"
+                                >
+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
+                                    hello@byom.fr
+                                </a>
                             </div>
                         )}
                     </div>
 
                     {/* Right menu */}
-                    <div className="flex items-center gap-12">
+                    <div className="flex items-center gap-8">
                         {/* Language switcher */}
                         <button
                             onClick={() => setLanguage(language === 'en' ? 'fr' : 'en')}
-                            className="monospace text-sm font-bold hover:translate-x-1 transition-transform"
+                            className="text-sm font-medium text-gray-500 hover:text-black transition-colors"
                         >
                             {language.toUpperCase()}
                         </button>
 
-                        <Link to="/pricing" className="monospace text-sm font-bold hover:translate-x-1 transition-transform">
+                        <Link to="/pricing" className="text-sm font-medium text-gray-500 hover:text-black transition-colors">
                             {t('nav.pricing')}
                         </Link>
 
-                        <Link to="/login" className="brutalist-button !py-2 !px-4 text-sm">
-                            {t('nav.login')} →
+                        <Link 
+                            to="/login" 
+                            className="bg-black text-white rounded-full px-5 py-2 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center gap-2"
+                        >
+                            <span>{t('nav.login')}</span>
+                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                         </Link>
                     </div>
                 </div>
@@ -97,4 +90,4 @@ function Navbar() {
     );
 }
 
-export default Navbar; 
+export default Navbar;

src/config.js

@@ -1 +1 @@
-export const API_HOST = 'https://byom.moooffle.com'; 
+export const API_HOST = 'http://172.27.28.86:8080'; 

src/context/LanguageContext.jsx

@@ -32,6 +32,16 @@ export const translations = {
             getStarted: 'Get started with',
             trial: 'All plans include 14-day free trial. No credit card required'
         },
+        register: {
+            title: 'Create an Account',
+            selectedPlan: 'Selected Plan',
+            firstName: 'First Name',
+            firstNamePlaceholder: 'Enter your first name',
+            lastName: 'Last Name',
+            lastNamePlaceholder: 'Enter your last name',
+            email: 'Email Address',
+            emailPlaceholder: 'Enter your email',
+        },
         login: {
             title: 'Welcome back',
             subtitle: 'Enter your email to continue',
@@ -272,6 +282,16 @@ export const translations = {
             getStarted: 'Commencer avec',
             trial: 'Tous les forfaits incluent un essai gratuit de 14 jours. Pas de carte bancaire requise'
         },
+        register: {
+            title: 'Créer un Compte',
+            selectedPlan: 'Forfait Sélectionné',
+            firstName: 'Prénom',
+            firstNamePlaceholder: 'Entrez votre prénom',
+            lastName: 'Nom de Famille',
+            lastNamePlaceholder: 'Entrez votre nom de famille',
+            email: 'Adresse Email',
+            emailPlaceholder: 'Entrez votre email',
+        },
         login: {
             title: 'Bon retour',
             subtitle: 'Entrez votre email pour continuer',

src/index.css

@@ -1,11 +1,15 @@
+@import url('https://rsms.me/inter/inter.css');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://rsms.me/inter/inter.css');
-
 :root {
   font-family: 'Inter', system-ui, sans-serif;
+  --brand-purple: #7C3AED;
+  --brand-pink: #EC4899;
+  --brand-blue: #3B82F6;
+  --brand-teal: #14B8A6;
 }
 
 @supports (font-variation-settings: normal) {
@@ -41,86 +45,71 @@ button:hover {
   }
 }
 
-/* Custom components */
-@layer components {
-  .brutalist-card {
-    @apply bg-gray-900 border border-gray-800 rounded-lg overflow-hidden transition-all duration-300;
-  }
-
-  .brutalist-card:hover {
-    @apply border-gray-700;
-  }
+/* Brand Colors */
+.text-brand-purple {
+  color: var(--brand-purple);
+}
 
-  .brutalist-button {
-    @apply px-6 py-3 bg-white text-black font-medium rounded-lg hover:bg-gray-100 transition-all duration-300;
-  }
+.text-brand-pink {
+  color: var(--brand-pink);
+}
 
-  .brutalist-heading {
-    @apply font-bold tracking-tight;
-  }
+.text-brand-blue {
+  color: var(--brand-blue);
+}
 
-  .brutalist-subheading {
-    @apply font-semibold tracking-tight;
-  }
+.text-brand-teal {
+  color: var(--brand-teal);
 }
 
-/* Webkit browsers (Chrome, Safari, newer versions of Opera) */
-::-webkit-scrollbar {
-    width: 12px;
+.bg-brand-purple {
+  background-color: var(--brand-purple);
 }
 
-::-webkit-scrollbar-track {
-    background: black;
-    border-left: 2px solid #1a1a1a;
+.hover\:bg-brand-purple:hover {
+  background-color: var(--brand-purple);
 }
 
-::-webkit-scrollbar-thumb {
-    background: #333;
-    border: 2px solid #1a1a1a;
-    transition: all 0.3s ease;
+.bg-brand-purple\/10 {
+  background-color: color-mix(in srgb, var(--brand-purple) 10%, transparent);
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #444;
+.bg-brand-pink\/10 {
+  background-color: color-mix(in srgb, var(--brand-pink) 10%, transparent);
 }
 
-/* Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: #333 black;
+.bg-brand-blue {
+  background-color: var(--brand-blue);
 }
 
-/* For Edge and other browsers that support standard scrollbar styling */
-* {
-    scrollbar-width: thin;
+/* Animations */
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-*::-webkit-scrollbar-corner {
-    background: black;
+.animate-spin-slow {
+  animation: spin-slow 3s linear infinite;
 }
 
-/* Optional: Style for when the scrollbar corner meets both scrollbars */
-*::-webkit-scrollbar-corner {
-    background: black;
-    border-left: 2px solid #1a1a1a;
-    border-top: 2px solid #1a1a1a;
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
 }
 
-/* Technical grid background */
-.technical-grid {
-  background-size: 40px 40px;
-  background-image: 
-    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+.animate-scroll {
+  animation: scroll 20s linear infinite;
 }
 
-/* Diagonal lines pattern */
-.diagonal-lines {
-  background-image: repeating-linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.1),
-    rgba(255, 255, 255, 0.1) 1px,
-    transparent 1px,
-    transparent 10px
-  );
-}
+/* Delay utilities */
+.delay-1000 {
+  animation-delay: 1000ms;
+}

src/main.jsx

@@ -2,7 +2,6 @@ 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>

src/pages/About.jsx

@@ -46,44 +46,45 @@ function About() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('about.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('about.description')}
+                    </p>
                 </div>
 
                 {/* Mission Section */}
-                <div className="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">
+                <div className="bg-white rounded-2xl shadow-lg p-8 mb-16">
+                    <h2 className="text-2xl font-medium text-gray-900 mb-6">{t('about.mission.title')}</h2>
+                    <p className="text-lg text-gray-600">
                         {t('about.mission.description')}
                     </p>
                 </div>
 
                 {/* Timeline Section */}
                 <div className="mb-16">
-                    <h2 className="text-2xl font-black uppercase mb-8">{t('about.timeline')}</h2>
+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('about.timeline')}</h2>
                     <div className="space-y-8">
-                        {milestones.map((milestone, 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>
+                        {milestones.map((milestone) => (
+                            <div key={milestone.year} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-shadow">
+                                <div className="absolute -left-3 top-1/2 -translate-y-1/2 w-6 h-6 bg-brand-purple rounded-full flex items-center justify-center text-white text-sm">
+                                    <span className="font-medium">{milestone.year}</span>
+                                </div>
+                                <div className="ml-6">
+                                    <h3 className="text-xl font-medium text-gray-900 mb-2">{milestone.title}</h3>
+                                    <p className="text-gray-600">{milestone.description}</p>
                                 </div>
-                                <h3 className="text-xl font-bold mb-2 mt-2">{milestone.title}</h3>
-                                <p className="monospace">{milestone.description}</p>
                             </div>
                         ))}
                     </div>
@@ -91,34 +92,36 @@ function About() {
 
                 {/* Team Section */}
                 <div className="mb-16">
-                    <h2 className="text-2xl font-black uppercase mb-8">{t('about.team.title')}</h2>
+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('about.team.title')}</h2>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                         {teamMembers.map((member) => (
-                            <div key={member.name} className="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 key={member.name} className="bg-white rounded-2xl shadow-lg p-6 group hover:shadow-xl transition-shadow">
+                                <div className="w-full aspect-square mb-4 overflow-hidden rounded-xl bg-gray-100 relative">
+                                    <div className="absolute inset-0 bg-gradient-to-br from-brand-purple/5 to-brand-pink/5"></div>
+                                    <div className="w-full h-full flex items-center justify-center">
+                                        <span className="text-4xl">👤</span>
                                     </div>
                                 </div>
-                                <h3 className="text-xl font-bold mb-1">{member.name}</h3>
-                                <p className="monospace text-sm mb-3">{member.role}</p>
-                                <p className="monospace">{member.description}</p>
+                                <h3 className="text-xl font-medium text-gray-900 mb-1">{member.name}</h3>
+                                <p className="text-sm text-brand-purple mb-3">{member.role}</p>
+                                <p className="text-gray-600">{member.description}</p>
                             </div>
                         ))}
                     </div>
                 </div>
 
                 {/* Contact Section */}
-                <div className="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">
+                <div className="bg-white rounded-2xl shadow-lg p-8 mb-16 text-center">
+                    <h2 className="text-2xl font-medium text-gray-900 mb-6">{t('about.contact.title')}</h2>
+                    <p className="text-lg text-gray-600 mb-8">
                         {t('about.contact.description')}
                     </p>
-                    <Link to="/contact" className="brutalist-button inline-block">
-                        {t('about.contact.cta')} →
+                    <Link 
+                        to="/contact" 
+                        className="inline-flex items-center gap-2 bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300"
+                    >
+                        <span>{t('about.contact.cta')}</span>
+                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                     </Link>
                 </div>
             </div>
@@ -127,4 +130,4 @@ function About() {
     );
 }
 
-export default About; 
+export default About;

src/pages/AiTrends.jsx

@@ -43,66 +43,62 @@ function AiTrends() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('aiTrends.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('aiTrends.description')}
+                    </p>
                 </div>
 
-                {/* 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>
+                {/* Trends Overview */}
+                <div className="mb-16">
+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('aiTrends.overview.title')}</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {trends.map((trend) => (
+                            <div key={trend.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                                <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
+                                    <span className="text-xl">{trend.icon}</span>
+                                </div>
+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{trend.title}</h3>
+                                <p className="text-gray-600 mb-6">{trend.description}</p>
+                                <div className="h-px bg-gray-100 mb-6"></div>
+                                <div className="grid grid-cols-3 gap-4">
+                                    <div>
+                                        <span className="text-sm text-gray-500 block">Growth</span>
+                                        <span className="font-medium text-brand-purple">{trend.stats.growth}</span>
+                                    </div>
+                                    <div>
+                                        <span className="text-sm text-gray-500 block">Adoption</span>
+                                        <span className="font-medium text-brand-purple">{trend.stats.adoption}</span>
                                     </div>
-                                ))}
+                                    <div>
+                                        <span className="text-sm text-gray-500 block">Impact</span>
+                                        <span className="font-medium text-brand-purple">{trend.stats.impact}</span>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
+                        ))}
                     </div>
+                </div>
 
-                    {/* Interactive Demo Section */}
-                    <div className="col-span-12 md:col-span-8">
-                        <div className="brutalist-card p-0 overflow-hidden">
+                {/* Interactive Demo Section */}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
+                    <div className="lg:col-span-2">
+                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
                             <div className="relative aspect-video">
                                 <video
-                                    className="w-full h-full object-cover grayscale contrast-125 brightness-125"
+                                    className="w-full h-full object-cover"
                                     autoPlay
                                     loop
                                     muted
@@ -110,49 +106,52 @@ function AiTrends() {
                                 >
                                     <source src="/ai-demo.mp4" type="video/mp4" />
                                 </video>
-                                <div className="video-overlay"></div>
-                                <div className="absolute inset-0 diagonal-lines"></div>
+                                <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></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')} →
+                            <div className="p-8">
+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{t('aiTrends.demo.title')}</h3>
+                                <p className="text-gray-600 mb-6">{t('aiTrends.demo.description')}</p>
+                                <Link 
+                                    to="/register" 
+                                    className="inline-flex items-center gap-2 bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300"
+                                >
+                                    <span>{t('aiTrends.demo.cta')}</span>
+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                                 </Link>
                             </div>
                         </div>
                     </div>
 
                     {/* Stats Section */}
-                    <div className="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 className="lg:col-span-1">
+                        <div className="bg-white rounded-2xl shadow-lg p-8">
+                            <h3 className="text-xl font-medium text-gray-900 mb-8">{t('aiTrends.stats.title')}</h3>
+                            <div className="space-y-8">
                                 <div>
                                     <div className="flex justify-between mb-2">
-                                        <span className="monospace">Market Growth</span>
-                                        <span className="font-bold">+156%</span>
+                                        <span className="text-sm text-gray-600">Market Growth</span>
+                                        <span className="font-medium text-brand-purple">+156%</span>
                                     </div>
-                                    <div className="w-full h-2 bg-gray-200">
-                                        <div className="h-full bg-black" style={{ width: '75%' }}></div>
+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: '75%' }}></div>
                                     </div>
                                 </div>
                                 <div>
                                     <div className="flex justify-between mb-2">
-                                        <span className="monospace">AI Adoption</span>
-                                        <span className="font-bold">68%</span>
+                                        <span className="text-sm text-gray-600">AI Adoption</span>
+                                        <span className="font-medium text-brand-purple">68%</span>
                                     </div>
-                                    <div className="w-full h-2 bg-gray-200">
-                                        <div className="h-full bg-black" style={{ width: '68%' }}></div>
+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: '68%' }}></div>
                                     </div>
                                 </div>
                                 <div>
                                     <div className="flex justify-between mb-2">
-                                        <span className="monospace">ROI Impact</span>
-                                        <span className="font-bold">+234%</span>
+                                        <span className="text-sm text-gray-600">ROI Impact</span>
+                                        <span className="font-medium text-brand-purple">+234%</span>
                                     </div>
-                                    <div className="w-full h-2 bg-gray-200">
-                                        <div className="h-full bg-black" style={{ width: '85%' }}></div>
+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: '85%' }}></div>
                                     </div>
                                 </div>
                             </div>
@@ -166,4 +165,4 @@ function AiTrends() {
     );
 }
 
-export default AiTrends; 
+export default AiTrends;

src/pages/Analytics.jsx

@@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
 import { useLanguage } from '../context/LanguageContext';
 import Footer from '../components/Footer';
 
@@ -61,82 +60,76 @@ function Analytics() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('analytics.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('analytics.description')}
+                    </p>
                 </div>
 
-                {/* 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>
+                {/* Dashboard Preview */}
+                <div className="mb-16">
+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('analytics.dashboard.title')}</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {dashboardSections.map((section) => (
+                            <div key={section.title} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{section.title}</h3>
+                                <div className="flex items-center gap-4">
+                                    <span className="text-4xl font-light text-brand-purple">{section.percentage}</span>
+                                    <div className={`w-8 h-8 text-brand-purple transform transition-transform ${section.trend === 'up' ? 'rotate-0' : 'rotate-180'}`}>
+                                        ↑
                                     </div>
-                                ))}
+                                </div>
+                                <div className="mt-4 w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+                                    <div className="h-full bg-brand-purple rounded-full" style={{ width: section.percentage }}></div>
+                                </div>
                             </div>
-                        </div>
+                        ))}
                     </div>
+                </div>
 
+                {/* Metrics and Actions */}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
                     {/* 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 className="lg:col-span-2">
+                        <div className="space-y-8">
+                            {metrics.map((metric) => (
+                                <div key={metric.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                                    <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
+                                        <span className="text-xl">{metric.icon}</span>
                                     </div>
-                                ))}
-                            </div>
+                                    <h3 className="text-xl font-medium text-gray-900 mb-4">{metric.title}</h3>
+                                    <p className="text-gray-600 mb-6">{metric.description}</p>
+                                    <div className="h-px bg-gray-100 mb-6"></div>
+                                    <div className="grid grid-cols-3 gap-4">
+                                        {Object.entries(metric.stats).map(([key, value]) => (
+                                            <div key={key}>
+                                                <span className="text-sm text-gray-500 block capitalize">{key}</span>
+                                                <span className="font-medium text-brand-purple">{value}</span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            ))}
                         </div>
                     </div>
 
                     {/* Quick Actions */}
-                    <div className="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">
+                    <div className="lg:col-span-1">
+                        <div className="bg-white rounded-2xl shadow-lg p-8">
+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('analytics.actions.title')}</h3>
+                            <div className="space-y-3">
                                 {[
                                     'Generate Report',
                                     'Export Data',
@@ -144,8 +137,11 @@ function Analytics() {
                                     '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 
+                                        key={action} 
+                                        className="p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300 cursor-pointer group"
+                                    >
+                                        <span className="text-gray-600 group-hover:text-brand-purple transition-colors">{action}</span>
                                     </div>
                                 ))}
                             </div>
@@ -158,4 +154,4 @@ function Analytics() {
     );
 }
 
-export default Analytics; 
+export default Analytics;

src/pages/BrandGrowth.jsx

@@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
 import { useLanguage } from '../context/LanguageContext';
 import Footer from '../components/Footer';
 
@@ -64,92 +63,86 @@ function BrandGrowth() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('brandGrowth.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('brandGrowth.description')}
+                    </p>
                 </div>
 
-                {/* 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>
+                {/* Growth Strategies */}
+                <div className="mb-16">
+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('brandGrowth.strategies.title')}</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {strategies.map((strategy) => (
+                            <div key={strategy.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                                <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
+                                    <span className="text-xl">{strategy.icon}</span>
+                                </div>
+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{strategy.title}</h3>
+                                <p className="text-gray-600 mb-6">{strategy.description}</p>
+                                <div className="h-px bg-gray-100 mb-6"></div>
+                                <div className="grid grid-cols-3 gap-4">
+                                    {Object.entries(strategy.stats).map(([key, value]) => (
+                                        <div key={key}>
+                                            <span className="text-sm text-gray-500 block capitalize">{key}</span>
+                                            <span className="font-medium text-brand-purple">{value}</span>
                                         </div>
-                                        <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>
+                        ))}
                     </div>
+                </div>
 
+                {/* AI Recommendations and Tools */}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
                     {/* 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 className="lg:col-span-2">
+                        <div className="space-y-6">
+                            {recommendations.map((rec) => (
+                                <div key={rec.title} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                                    <div className="flex justify-between items-center mb-4">
+                                        <h3 className="text-xl font-medium text-gray-900">{rec.title}</h3>
+                                        <div className="flex items-center gap-2">
+                                            <span className="text-sm text-gray-500">Score:</span>
+                                            <span className="font-medium text-brand-purple text-xl">{rec.score}</span>
                                         </div>
-                                        <div 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="grid grid-cols-2 gap-4 mb-4">
+                                        <div>
+                                            <span className="text-sm text-gray-500 block">Priority</span>
+                                            <span className="font-medium text-brand-purple">{rec.priority}</span>
                                         </div>
-                                        <div className="mt-4 w-full h-2 bg-gray-200">
-                                            <div className="h-full bg-black" style={{ width: `${rec.score}%` }}></div>
+                                        <div>
+                                            <span className="text-sm text-gray-500 block">Potential Impact</span>
+                                            <span className="font-medium text-brand-purple">{rec.impact}</span>
                                         </div>
                                     </div>
-                                ))}
-                            </div>
+                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+                                        <div className="h-full bg-brand-purple rounded-full" style={{ width: `${rec.score}%` }}></div>
+                                    </div>
+                                </div>
+                            ))}
                         </div>
                     </div>
 
                     {/* Growth Tools */}
-                    <div className="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">
+                    <div className="lg:col-span-1">
+                        <div className="bg-white rounded-2xl shadow-lg p-8">
+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('brandGrowth.tools.title')}</h3>
+                            <div className="space-y-3">
                                 {[
                                     'Content Calendar',
                                     'Audience Insights',
@@ -157,8 +150,11 @@ function BrandGrowth() {
                                     '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 
+                                        key={tool} 
+                                        className="p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300 cursor-pointer group"
+                                    >
+                                        <span className="text-gray-600 group-hover:text-brand-purple transition-colors">{tool}</span>
                                     </div>
                                 ))}
                             </div>
@@ -171,4 +167,4 @@ function BrandGrowth() {
     );
 }
 
-export default BrandGrowth; 
+export default BrandGrowth;

src/pages/Contact.jsx

@@ -42,6 +42,7 @@ function Contact() {
             }
         } catch (error) {
             setSubmitStatus('error');
+            console.error('Contact form submission error:', error);
         } finally {
             setIsSubmitting(false);
         }
@@ -70,35 +71,34 @@ function Contact() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('contact.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('contact.description')}
+                    </p>
                 </div>
 
                 {/* Main content */}
-                <div className="grid-layout gap-8">
+                <div className="grid grid-cols-1 lg:grid-cols-3 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>
+                    <div className="lg:col-span-2">
+                        <div className="bg-white rounded-2xl shadow-lg p-8">
+                            <h2 className="text-2xl font-medium text-gray-900 mb-8">{t('contact.form.title')}</h2>
                             <form onSubmit={handleSubmit} className="space-y-6">
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                     <div>
-                                        <label className="monospace block mb-2" htmlFor="name">
+                                        <label className="block text-sm text-gray-700 mb-2" htmlFor="name">
                                             {t('contact.form.name')}
                                         </label>
                                         <input
@@ -108,11 +108,11 @@ function Contact() {
                                             value={formData.name}
                                             onChange={handleChange}
                                             required
-                                            className="brutalist-input w-full"
+                                            className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                                         />
                                     </div>
                                     <div>
-                                        <label className="monospace block mb-2" htmlFor="email">
+                                        <label className="block text-sm text-gray-700 mb-2" htmlFor="email">
                                             {t('contact.form.email')}
                                         </label>
                                         <input
@@ -122,12 +122,12 @@ function Contact() {
                                             value={formData.email}
                                             onChange={handleChange}
                                             required
-                                            className="brutalist-input w-full"
+                                            className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                                         />
                                     </div>
                                 </div>
                                 <div>
-                                    <label className="monospace block mb-2" htmlFor="subject">
+                                    <label className="block text-sm text-gray-700 mb-2" htmlFor="subject">
                                         {t('contact.form.subject')}
                                     </label>
                                     <input
@@ -137,11 +137,11 @@ function Contact() {
                                         value={formData.subject}
                                         onChange={handleChange}
                                         required
-                                        className="brutalist-input w-full"
+                                        className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                                     />
                                 </div>
                                 <div>
-                                    <label className="monospace block mb-2" htmlFor="message">
+                                    <label className="block text-sm text-gray-700 mb-2" htmlFor="message">
                                         {t('contact.form.message')}
                                     </label>
                                     <textarea
@@ -151,30 +151,33 @@ function Contact() {
                                         onChange={handleChange}
                                         required
                                         rows="6"
-                                        className="brutalist-input w-full"
+                                        className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent resize-none"
                                     ></textarea>
                                 </div>
                                 <button
                                     type="submit"
                                     disabled={isSubmitting}
-                                    className="brutalist-button"
+                                    className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
                                 >
-                                    {isSubmitting ? t('contact.form.sending') : t('contact.form.send')} →
+                                    <span className="flex items-center gap-2">
+                                        {isSubmitting ? t('contact.form.sending') : t('contact.form.send')}
+                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                                    </span>
                                 </button>
                                 {submitStatus === 'success' && (
-                                    <p className="monospace text-green-600">{t('contact.form.success')}</p>
+                                    <p className="text-green-600 text-sm mt-4">{t('contact.form.success')}</p>
                                 )}
                                 {submitStatus === 'error' && (
-                                    <p className="monospace text-red-600">{t('contact.form.error')}</p>
+                                    <p className="text-red-600 text-sm mt-4">{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="lg:col-span-1">
+                        <div className="bg-white rounded-2xl shadow-lg p-6">
+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('contact.methods.title')}</h3>
                             <div className="space-y-6">
                                 {contactMethods.map((method) => (
                                     <a
@@ -182,13 +185,13 @@ function Contact() {
                                         href={method.link}
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        className="brutalist-card p-4 block hover:-translate-x-2 transition-transform"
+                                        className="block p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300"
                                     >
                                         <div className="flex items-center gap-4">
                                             <span className="text-2xl">{method.icon}</span>
                                             <div>
-                                                <h4 className="font-bold">{method.title}</h4>
-                                                <p className="monospace">{method.value}</p>
+                                                <h4 className="text-sm font-medium text-gray-900">{method.title}</h4>
+                                                <p className="text-sm text-gray-600">{method.value}</p>
                                             </div>
                                         </div>
                                     </a>
@@ -197,8 +200,8 @@ function Contact() {
                         </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="bg-white rounded-2xl shadow-lg p-6 mt-6">
+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('contact.social.title')}</h3>
                             <div className="space-y-4">
                                 {[
                                     { name: 'Twitter', url: 'https://twitter.com/byom' },
@@ -210,9 +213,9 @@ function Contact() {
                                         href={social.url}
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        className="brutalist-card p-3 block hover:-translate-x-2 transition-transform"
+                                        className="block p-3 rounded-xl hover:bg-gray-50 transition-colors duration-300 text-sm text-gray-600 hover:text-brand-purple"
                                     >
-                                        <span className="monospace">{social.name}</span>
+                                        {social.name}
                                     </a>
                                 ))}
                             </div>
@@ -225,4 +228,4 @@ function Contact() {
     );
 }
 
-export default Contact; 
+export default Contact;

src/pages/Home.jsx

@@ -1,135 +1,87 @@
-import { useLanguage } from '../context/LanguageContext';
-import { Link } from 'react-router-dom';
 import Footer from '../components/Footer';
+import { useLanguage } from '../context/LanguageContext';
 
 function Home() {
     const { t } = useLanguage();
 
     return (
-        <div className="relative min-h-screen bg-black text-white">
-            {/* Technical grid background */}
-            <div className="fixed inset-0 technical-grid opacity-20 pointer-events-none"></div>
+        <div className="relative min-h-screen bg-white">
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            {/* Hero Section */}
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
-                <div className="grid-layout mb-24">
-                    <div className="col-span-12 md:col-span-8">
-                        <h1 className="brutalist-heading text-6xl md:text-7xl lg:text-8xl font-bold mb-6">
-                            Build Your Own Model.
-                        </h1>
-                        <p className="monospace text-xl md:text-2xl text-gray-400 max-w-2xl mb-12">
-                            BYOM is an AI-powered platform focusing on helping influencers grow their brand through advanced analytics and creative tools.
-                            </p>
-                        <div className="flex gap-4">
-                            <Link to="/register" className="brutalist-button">
-                                Start building →
-                            </Link>
-                        </div>
-                    </div>
-                                    </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>
 
-                {/* Feature Grid */}
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-24">
-                    <div className="brutalist-card p-6">
-                        <div className="icon-ai mb-6"></div>
-                        <h3 className="text-xl font-bold mb-4">AI Trends</h3>
-                        <p className="text-gray-400">Stay ahead with AI-powered trend analysis and insights for brand growth.</p>
-                                    </div>
-                    <div className="brutalist-card p-6">
-                        <div className="icon-image mb-6"></div>
-                        <h3 className="text-xl font-bold mb-4">Image Generation</h3>
-                        <p className="text-gray-400">Create stunning visuals with our AI image generation tools.</p>
-                                    </div>
-                    <div className="brutalist-card p-6">
-                        <div className="icon-analytics mb-6"></div>
-                        <h3 className="text-xl font-bold mb-4">Analytics</h3>
-                        <p className="text-gray-400">Deep insights into your brand's performance and audience engagement.</p>
-                                    </div>
-                    <div className="brutalist-card p-6">
-                        <div className="icon-growth mb-6"></div>
-                        <h3 className="text-xl font-bold mb-4">Brand Growth</h3>
-                        <p className="text-gray-400">Strategic tools to accelerate your brand's growth and reach.</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>
 
-                {/* Platform Overview */}
-                <div className="grid-layout gap-12 mb-24">
-                    <div className="col-span-12 md:col-span-6">
-                        <h2 className="brutalist-subheading text-4xl mb-6">Your AI Brand Partner</h2>
-                        <p className="text-gray-400 mb-6">
-                            BYOM empowers creators with AI-driven solutions that transform how you build and grow your brand. 
-                            Our platform combines advanced analytics, trend analysis, and creative tools to give you a competitive edge.
-                        </p>
-                                </div>
-                    <div className="col-span-12 md:col-span-6">
-                        <div className="brutalist-card p-6">
-                            <div className="relative aspect-[4/3] overflow-hidden mb-4">
-                                <video
-                                    className="w-full h-full object-cover grayscale contrast-125 brightness-125"
-                                    autoPlay
-                                    loop
-                                    muted
-                                    playsInline
-                                >
-                                    <source src="/video.mp4" type="video/mp4" />
-                                </video>
-                                <div className="absolute inset-0 diagonal-lines"></div>
-                            </div>
-                            <h3 className="text-xl font-bold mb-2">Advanced Analytics Dashboard</h3>
-                            <p className="text-gray-200">Real-time insights and performance metrics for data-driven decisions</p>
+                    {/* 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>
                         </div>
                     </div>
-                </div>
 
-                {/* Enterprise Features */}
-                        <div className="mb-24">
-                    <h2 className="brutalist-subheading text-4xl mb-12">Built for Growth</h2>
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                        <div className="brutalist-card p-6">
-                            <div className="mb-4">
-                                <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                                </svg>
-                                    </div>
-                            <h3 className="text-xl font-bold mb-4">AI-Powered Insights</h3>
-                            <p className="text-gray-400">Advanced algorithms analyze trends and provide actionable recommendations for your brand.</p>
-                                </div>
-                        <div className="brutalist-card p-6">
-                            <div className="mb-4">
-                                <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
-                                </svg>
-                                    </div>
-                            <h3 className="text-xl font-bold mb-4">Creative Tools</h3>
-                            <p className="text-gray-400">Generate and optimize content with our suite of AI-powered creative tools.</p>
+                    {/* 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 */}
+                            <video
+                                className="absolute inset-0 w-full h-full object-cover rounded-2xl opacity-90"
+                                autoPlay
+                                loop
+                                muted
+                                playsInline
+                            >
+                                <source src="/video.mp4" type="video/mp4" />
+                            </video>
+
+                            {/* Gradient Overlay */}
+                            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl"></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>
                                 </div>
-                        <div className="brutalist-card p-6">
-                            <div className="mb-4">
-                                <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                                </svg>
                             </div>
-                            <h3 className="text-xl font-bold mb-4">Performance Tracking</h3>
-                            <p className="text-gray-400">Monitor your brand's growth with comprehensive analytics and reporting.</p>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Newsletter Section */}
-                <div className="mb-24">
-                    <h2 className="brutalist-heading text-4xl mb-12">Join the future of brand building.</h2>
-                    <div className="max-w-xl">
-                        <div className="flex gap-4">
-                            <input type="email" placeholder="Email address" className="brutalist-card bg-gray-900 p-4 flex-grow" />
-                            <button className="brutalist-button">Get early access</button>
                         </div>
                     </div>
                 </div>
             </div>
-
             <Footer />
         </div>
     );
 }
 
-export default Home; export default Home; 
+export default Home;

src/pages/ImageGeneration.jsx

@@ -43,84 +43,87 @@ function ImageGeneration() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('imageGen.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('imageGen.description')}
+                    </p>
                 </div>
 
-                {/* 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>
-                                            ))}
+                {/* Features Overview */}
+                <div className="mb-16">
+                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('imageGen.features.title')}</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {features.map((feature) => (
+                            <div key={feature.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                                <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
+                                    <span className="text-xl">{feature.icon}</span>
+                                </div>
+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{feature.title}</h3>
+                                <p className="text-gray-600 mb-6">{feature.description}</p>
+                                <div className="h-px bg-gray-100 mb-6"></div>
+                                <div className="grid grid-cols-3 gap-4">
+                                    {Object.entries(feature.stats).map(([key, value]) => (
+                                        <div key={key}>
+                                            <span className="text-sm text-gray-500 block capitalize">{key}</span>
+                                            <span className="font-medium text-brand-purple">{value}</span>
                                         </div>
-                                    </div>
-                                ))}
+                                    ))}
+                                </div>
                             </div>
-                        </div>
+                        ))}
                     </div>
+                </div>
 
-                    {/* Image Generator Demo */}
-                    <div className="col-span-12 md:col-span-8">
-                        <div className="brutalist-card p-0 overflow-hidden">
+                {/* Image Generator Demo and Style Presets */}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
+                    <div className="lg:col-span-2">
+                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
                             <div className="relative aspect-video">
-                                <div className="absolute inset-0 grid grid-cols-2 gap-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 className="absolute inset-0 grid grid-cols-2 gap-4 p-6">
+                                    <div className="bg-gray-100 rounded-xl"></div>
+                                    <div className="bg-gray-100 rounded-xl"></div>
+                                    <div className="bg-gray-100 rounded-xl"></div>
+                                    <div className="bg-gray-100 rounded-xl"></div>
                                 </div>
-                                <div className="absolute inset-0 diagonal-lines"></div>
+                                <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent"></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')} →
+                            <div className="p-8">
+                                <h3 className="text-xl font-medium text-gray-900 mb-4">{t('imageGen.demo.title')}</h3>
+                                <p className="text-gray-600 mb-6">{t('imageGen.demo.description')}</p>
+                                <Link 
+                                    to="/register" 
+                                    className="inline-flex items-center gap-2 bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300"
+                                >
+                                    <span>{t('imageGen.demo.cta')}</span>
+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                                 </Link>
                             </div>
                         </div>
                     </div>
 
                     {/* Style Presets */}
-                    <div className="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">
+                    <div className="lg:col-span-1">
+                        <div className="bg-white rounded-2xl shadow-lg p-8">
+                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('imageGen.styles.title')}</h3>
+                            <div className="space-y-3">
                                 {['Minimalist', 'Brutalist', 'Retro', 'Modern', 'Abstract'].map((style) => (
-                                    <div key={style} className="brutalist-card p-3 hover:-translate-x-2 transition-transform cursor-pointer">
-                                        <span className="monospace">{style}</span>
+                                    <div 
+                                        key={style} 
+                                        className="p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300 cursor-pointer group"
+                                    >
+                                        <span className="text-gray-600 group-hover:text-brand-purple transition-colors">{style}</span>
                                     </div>
                                 ))}
                             </div>
@@ -133,4 +136,4 @@ function ImageGeneration() {
     );
 }
 
-export default ImageGeneration; 
+export default ImageGeneration;

src/pages/Login.jsx

@@ -35,86 +35,82 @@ function Login() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('login.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('login.subtitle')}
+                    </p>
                 </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>
+                <div className="max-w-md mx-auto">
+                    <div className="bg-white rounded-2xl shadow-lg p-8">
+                        {error && (
+                            <div className="p-4 rounded-lg bg-red-50 text-red-600 text-sm mb-6">
+                                {error}
+                            </div>
+                        )}
 
-                                <button
-                                    type="submit"
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div>
+                                <label htmlFor="email" className="block text-sm text-gray-700 mb-2">
+                                    Email address
+                                </label>
+                                <input
+                                    id="email"
+                                    name="email"
+                                    type="email"
+                                    required
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    placeholder="Enter your email"
+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                                     disabled={isLoading}
-                                    className="brutalist-button w-full disabled:opacity-50"
-                                >
-                                    {isLoading ? (
-                                        <span className="monospace">Processing...</span>
-                                    ) : (
-                                        <span>{t('login.continue')} →</span>
-                                    )}
-                                </button>
-                            </form>
-                        </div>
+                                />
+                            </div>
+
+                            <button
+                                type="submit"
+                                disabled={isLoading}
+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
+                            >
+                            {isLoading ? (
+                                <span>Processing...</span>
+                            ) : (
+                                <span className="flex items-center gap-2">
+                                    {t('login.continue')}
+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                                </span>
+                            )}
+                        </button>
+                    </form>
+                </div>
 
-                        <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>
+                <div className="mt-6 text-center">
+                    <p className="text-sm text-gray-500">
+                        {t('login.noAccount')}{' '}
+                        <Link to="/pricing" className="text-brand-purple hover:text-brand-purple/80 transition-colors">
+                            {t('login.viewPricing')}
+                        </Link>
+                    </p>
                 </div>
             </div>
 
             <Footer />
         </div>
+        </div>
     );
 }
 
-export default Login; 
+export default Login;

src/pages/Payment.jsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
-import { useSearchParams, Link } from 'react-router-dom';
-import { useLanguage } from '../context/LanguageContext';
+import { useSearchParams } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import Footer from '../components/Footer';
 import { API_HOST } from '../config';
 
 function Payment({ pricingData }) {
     const [searchParams] = useSearchParams();
-    const { t } = useLanguage();
     const [message, setMessage] = useState('');
     const [isLoading, setIsLoading] = useState(false);
 
@@ -58,76 +57,74 @@ function Payment({ pricingData }) {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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
-                            <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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        Complete Setup
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        Selected plan: <span className="text-brand-purple font-medium uppercase">{selectedPlan}</span>
+                    </p>
                 </div>
 
-                <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 className="max-w-md mx-auto">
+                    <div className="bg-white rounded-2xl shadow-lg p-8">
+                        {message && (
+                            <div className="p-4 rounded-lg bg-yellow-50 text-yellow-800 text-sm mb-6">
+                                {message}
+                            </div>
+                        )}
+                        <div className="space-y-6">
+                            <div className="space-y-4">
+                                <div className="flex justify-between items-center">
+                                    <span className="text-sm text-gray-600">Plan</span>
+                                    <span className="font-medium text-gray-900 uppercase">{selectedPlan}</span>
                                 </div>
-                            )}
-                            <div className="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 className="h-px bg-gray-100"></div>
+                                <div className="flex justify-between items-center">
+                                    <span className="text-sm text-gray-600">Amount</span>
+                                    <span className="font-medium text-gray-900">
+                                        ${amount}.00 / {billingCycle === 'yearly' ? 'year' : 'month'}
+                                    </span>
                                 </div>
-
-                                <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 className="h-px bg-gray-100"></div>
+                                <div className="flex justify-between items-center">
+                                    <span className="text-sm text-gray-600">Trial Period</span>
+                                    <span className="font-medium text-gray-900">14 days free</span>
                                 </div>
                             </div>
+
+                            <form onSubmit={handleCheckout}>
+                                <button
+                                    type="submit"
+                                    disabled={isLoading}
+                                    className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
+                                >
+                                    {isLoading ? (
+                                        <span>Processing...</span>
+                                    ) : (
+                                        <span className="flex items-center gap-2">
+                                            Proceed to checkout
+                                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                                        </span>
+                                    )}
+                                </button>
+                            </form>
+
+                            <div className="text-center">
+                                <p className="text-sm text-gray-500">
+                                    Secure payment powered by Stripe
+                                </p>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -138,4 +135,22 @@ function Payment({ pricingData }) {
     );
 }
 
-export default Payment; 
+Payment.propTypes = {
+    pricingData: PropTypes.arrayOf(
+        PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            prices: PropTypes.shape({
+                monthly: PropTypes.number.isRequired,
+                yearly: PropTypes.number.isRequired,
+                monthlyPriceId: PropTypes.string.isRequired,
+                yearlyPriceId: PropTypes.string.isRequired
+            }).isRequired
+        })
+    )
+};
+
+Payment.defaultProps = {
+    pricingData: []
+};
+
+export default Payment;

src/pages/PaymentSuccess.jsx

@@ -1,81 +1,69 @@
-import { useEffect, useState } from 'react';
-import { useSearchParams, useNavigate, Link } from 'react-router-dom';
-import { useLanguage } from '../context/LanguageContext';
+import { useSearchParams } from 'react-router-dom';
 import Footer from '../components/Footer';
 import { API_HOST } from '../config';
 
 function PaymentSuccess() {
     const [searchParams] = useSearchParams();
-    const { t } = useLanguage();
-    const [isLoading, setIsLoading] = useState(false);
     const sessionId = searchParams.get('session_id');
 
     return (
         <div className="relative min-h-screen bg-white">
-            {/* Technical grid background */}
-            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        Payment Successful
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        Thank you for subscribing to our service.
+                    </p>
                 </div>
 
-                <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 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 className="max-w-md mx-auto">
+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-8">
+                        <div className="flex items-center justify-center">
+                            <div className="w-16 h-16 relative">
+                                <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
+                                <div className="absolute inset-0 flex items-center justify-center">
+                                    <span className="text-3xl text-brand-purple">✓</span>
                                 </div>
                             </div>
+                        </div>
 
-                            <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="text-center">
+                            <p className="text-gray-600">
+                                Your subscription is now active. You can start using our services right away.
+                            </p>
+                        </div>
 
-                            <div className="section-divider"></div>
+                        <div className="h-px bg-gray-100"></div>
 
-                            <form action={`${API_HOST}/api/v1/onboard/create-portal-session`} method="POST">
-                                <input type="hidden" id="session-id" name="session_id" value={sessionId} />
-                                <button
-                                    type="submit"
-                                    disabled={isLoading}
-                                    className="brutalist-button w-full disabled:opacity-50"
-                                >
-                                    {isLoading ? (
-                                        <span className="monospace">Processing...</span>
-                                    ) : (
-                                        <span>Manage billing information →</span>
-                                    )}
-                                </button>
-                            </form>
-                        </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"
+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
+                            >
+                                <span className="flex items-center gap-2">
+                                    Manage billing information
+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                                </span>
+                            </button>
+                        </form>
                     </div>
                 </div>
             </div>
-
             <Footer />
         </div>
     );
 }
 
-export default PaymentSuccess; 
+export default PaymentSuccess;

src/pages/Pricing.jsx

@@ -1,129 +1,108 @@
-import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useLanguage } from '../context/LanguageContext';
 import Footer from '../components/Footer';
-import { API_HOST } from '../config';
 
 function Pricing({ pricingData, isLoading }) {
     const [hoveredPlan, setHoveredPlan] = useState(null);
     const [isYearly, setIsYearly] = useState(false);
     const { t } = useLanguage();
 
-    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="relative min-h-screen bg-white">
-            {/* Technical grid background */}
-            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('pricing.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('pricing.description')}
+                    </p>
                 </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 
+                <div className="flex justify-center items-center mb-16">
+                    <span className={`text-sm mr-4 transition-colors ${!isYearly ? 'text-black' : 'text-gray-500'}`}>Monthly</span>
+                    <button 
                         onClick={() => setIsYearly(!isYearly)}
-                        className="brutalist-card inline-flex p-2 relative cursor-pointer w-16"
+                        className="relative w-14 h-7 bg-gray-100 rounded-full p-1 transition-colors hover:bg-gray-200"
                     >
                         <div 
-                            className="absolute top-2 left-2 h-[calc(100%-16px)] w-[calc(50%-8px)] bg-black transition-transform duration-300"
+                            className="absolute top-1 left-1 w-5 h-5 bg-brand-purple rounded-full transition-transform duration-300"
                             style={{
                                 transform: isYearly ? 'translateX(100%)' : 'translateX(0)',
                             }}
                         />
-                        <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>
+                    </button>
+                    <span className={`text-sm ml-4 transition-colors ${isYearly ? 'text-black' : 'text-gray-500'}`}>
+                        Yearly <span className="text-brand-purple">-20%</span>
                     </span>
                 </div>
 
-                <div className="geometric-divider mb-16"></div>
-
                 {/* Pricing Grid */}
                 {isLoading ? (
-                    <div className="text-center monospace">Loading plans...</div>
+                    <div className="text-center text-gray-500">Loading plans...</div>
                 ) : (
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
                         {[...pricingData].reverse().map((plan) => (
-                        <div
-                            key={plan.name}
-                            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 && (
-                                <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
+                                key={plan.name}
+                                className={`relative bg-white rounded-2xl transition-all duration-300 ${
+                                    hoveredPlan === plan.name ? 'transform -translate-y-2 shadow-xl' : 'shadow-lg'
+                                } ${
+                                    plan.popular ? 'ring-2 ring-brand-purple' : ''
+                                }`}
+                                onMouseEnter={() => setHoveredPlan(plan.name)}
+                                onMouseLeave={() => setHoveredPlan(null)}
+                            >
+                                {plan.popular && (
+                                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-brand-purple text-white px-4 py-1 rounded-full">
+                                        <span className="text-sm">{t('pricing.mostPopular')}</span>
+                                    </div>
+                                )}
+                                <div className="p-8">
+                                    <h3 className="text-xl font-medium mb-4">{plan.name}</h3>
+                                    <p className="text-sm text-gray-500 mb-4">{plan.description}</p>
+                                    <div className="flex items-baseline mb-8">
+                                        <span className="text-4xl font-light">
+                                            ${isYearly ? plan.prices.yearly : plan.prices.monthly}
+                                        </span>
+                                        <span className="ml-2 text-gray-500">
+                                            {isYearly ? t('pricing.perYear') : t('pricing.perMonth')}
+                                        </span>
+                                    </div>
+                                    <div className="h-px bg-gray-100 mb-8"></div>
+                                    <ul className="space-y-4 mb-8">
+                                        {plan.features.map((feature) => (
+                                            <li key={feature} className="flex items-start gap-3 text-sm text-gray-600">
+                                                <span className="text-brand-purple">→</span>
+                                                {feature}
+                                            </li>
+                                        ))}
+                                    </ul>
+                                    <button
+                                        onClick={() => {window.location =`/register?plan=${plan.name.toLowerCase()}&billing=${isYearly ? 'yearly' : 'monthly'}`}}
+                                        className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
+                                    >
+                                        <span>{t('pricing.getStarted')}</span>
+                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                                    </button>
                                 </div>
-                            )}
-                            <div 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>
                 )}
 
-                <div className="geometric-divider my-16"></div>
-
-                <div className="text-center monospace">
-                    <p className="text-lg">
+                <div className="text-center">
+                    <p className="text-gray-500">
                         {t('pricing.trial')}
                     </p>
                 </div>
@@ -134,4 +113,25 @@ function Pricing({ pricingData, isLoading }) {
     );
 }
 
-export default Pricing; 
+Pricing.propTypes = {
+    pricingData: PropTypes.arrayOf(
+        PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            description: PropTypes.string.isRequired,
+            popular: PropTypes.bool,
+            prices: PropTypes.shape({
+                monthly: PropTypes.number.isRequired,
+                yearly: PropTypes.number.isRequired
+            }).isRequired,
+            features: PropTypes.arrayOf(PropTypes.string).isRequired
+        })
+    ),
+    isLoading: PropTypes.bool
+};
+
+Pricing.defaultProps = {
+    pricingData: [],
+    isLoading: false
+};
+
+export default Pricing;

src/pages/Privacy.jsx

@@ -25,32 +25,31 @@ function Privacy() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('privacy.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('privacy.description')}
+                    </p>
                 </div>
 
                 {/* Privacy Content */}
-                <div className="brutalist-card p-8">
+                <div className="bg-white rounded-2xl shadow-lg p-8">
                     <div className="space-y-12">
                         {sections.map((section) => (
                             <div key={section.title}>
-                                <h2 className="text-2xl font-black uppercase mb-4">{section.title}</h2>
-                                <p className="monospace whitespace-pre-line">{section.content}</p>
+                                <h2 className="text-2xl font-medium text-gray-900 mb-4">{section.title}</h2>
+                                <p className="text-gray-600 whitespace-pre-line leading-relaxed">{section.content}</p>
                             </div>
                         ))}
                     </div>
@@ -61,4 +60,4 @@ function Privacy() {
     );
 }
 
-export default Privacy; 
+export default Privacy;

src/pages/Register.jsx

@@ -56,112 +56,106 @@ function Register() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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
-                            <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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('register.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('register.selectedPlan')}: <span className="text-brand-purple font-medium">{selectedPlan}</span>
+                    </p>
                 </div>
 
-                <div className="geometric-divider mb-16"></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>
-                            )}
-
-                            <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 className="max-w-md mx-auto">
+                    <div className="bg-white rounded-2xl shadow-lg p-8">
+                        {error && (
+                            <div className="p-4 rounded-lg bg-red-50 text-red-600 text-sm mb-6">
+                                {error}
+                            </div>
+                        )}
+
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div>
+                                <label htmlFor="name" className="block text-sm text-gray-700 mb-2">
+                                    {t('register.firstName')}
+                                </label>
+                                <input
+                                    id="name"
+                                    name="name"
+                                    type="text"
+                                    required
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    placeholder={t('register.firstNamePlaceholder')}
+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
+                                />
+                            </div>
 
-                                    <div>
-                                        <label htmlFor="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>
+                                <label htmlFor="surname" className="block text-sm text-gray-700 mb-2">
+                                    {t('register.lastName')}
+                                </label>
+                                <input
+                                    id="surname"
+                                    name="surname"
+                                    type="text"
+                                    required
+                                    value={surname}
+                                    onChange={(e) => setSurname(e.target.value)}
+                                    placeholder={t('register.lastNamePlaceholder')}
+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
+                                />
+                            </div>
 
-                                <div className="section-divider"></div>
+                            <div>
+                                <label htmlFor="email" className="block text-sm text-gray-700 mb-2">
+                                    {t('register.email')}
+                                </label>
+                                <input
+                                    id="email"
+                                    name="email"
+                                    type="email"
+                                    required
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    placeholder={t('register.emailPlaceholder')}
+                                    className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
+                                />
+                            </div>
 
-                                <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>
+                            <button
+                                type="submit"
+                                disabled={isLoading}
+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
+                            >
+                            {isLoading ? (
+                                <span>{t('register.creating')}</span>
+                            ) : (
+                                <span className="flex items-center gap-2">
+                                    {t('register.create')}
+                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                                </span>
+                            )}
+                            </button>
+                        </form>
+                    </div>
 
-                        <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 className="mt-6 text-center">
+                        <p className="text-sm text-gray-500">
+                            {t('register.haveAccount')}{' '}
+                            <Link to="/login" className="text-brand-purple hover:text-brand-purple/80 transition-colors">
+                                {t('register.signIn')}
+                            </Link>
+                        </p>
                     </div>
                 </div>
             </div>
@@ -170,4 +164,4 @@ function Register() {
     );
 }
 
-export default Register; 
+export default Register;

src/pages/Terms.jsx

@@ -25,32 +25,31 @@ function Terms() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('terms.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('terms.description')}
+                    </p>
                 </div>
 
                 {/* Terms Content */}
-                <div className="brutalist-card p-8">
+                <div className="bg-white rounded-2xl shadow-lg p-8">
                     <div className="space-y-12">
                         {sections.map((section) => (
                             <div key={section.title}>
-                                <h2 className="text-2xl font-black uppercase mb-4">{section.title}</h2>
-                                <p className="monospace whitespace-pre-line">{section.content}</p>
+                                <h2 className="text-2xl font-medium text-gray-900 mb-4">{section.title}</h2>
+                                <p className="text-gray-600 whitespace-pre-line leading-relaxed">{section.content}</p>
                             </div>
                         ))}
                     </div>
@@ -61,4 +60,4 @@ function Terms() {
     );
 }
 
-export default Terms; 
+export default Terms;

src/pages/VerifyEmail.jsx

@@ -52,51 +52,54 @@ function VerifyEmail() {
         switch (verificationStatus) {
             case 'verifying':
                 return (
-                    <div className="brutalist-card p-6 space-y-6">
+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
                         <div className="flex items-center justify-center">
                             <div className="w-16 h-16">
-                                <div className="geometric-shape circle w-full h-full border-4 border-black animate-spin"></div>
+                                <div className="w-full h-full border-4 border-brand-purple rounded-full animate-spin"></div>
                             </div>
                         </div>
-                        <p className="monospace text-center">Verifying your email...</p>
+                        <p className="text-gray-600 text-center">{t('verify.verifying')}</p>
                     </div>
                 );
             case 'success':
                 return (
-                    <div className="brutalist-card p-6 space-y-6">
+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
                         <div className="flex items-center justify-center">
                             <div className="w-16 h-16 relative">
-                                <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
+                                <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
                                 <div className="absolute inset-0 flex items-center justify-center">
-                                    <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>✓</span>
+                                    <span className="text-3xl text-brand-purple">✓</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>
+                            <h2 className="text-2xl font-medium text-gray-900">{t('verify.success.title')}</h2>
+                            <p className="text-gray-600">{t('verify.success.message')}</p>
+                            <p className="text-sm text-gray-500">{t('verify.success.redirecting')}</p>
                         </div>
                     </div>
                 );
             case 'error':
                 return (
-                    <div className="brutalist-card p-6 space-y-6">
+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
                         <div className="flex items-center justify-center">
                             <div className="w-16 h-16 relative">
-                                <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
+                                <div className="w-full h-full border-4 border-red-500 rounded-full"></div>
                                 <div className="absolute inset-0 flex items-center justify-center">
-                                    <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>×</span>
+                                    <span className="text-3xl text-red-500">×</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>
+                            <h2 className="text-2xl font-medium text-gray-900">{t('verify.error.title')}</h2>
+                            <p className="text-gray-600">{error}</p>
                         </div>
-                        <div className="section-divider"></div>
-                        <Link to="/login" className="brutalist-button w-full text-center">
-                            Back to Login →
+                        <Link 
+                            to="/login" 
+                            className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
+                        >
+                            <span>{t('verify.error.backToLogin')}</span>
+                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                         </Link>
                     </div>
                 );
@@ -107,32 +110,27 @@ function VerifyEmail() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {t('verify.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {t('verify.description')}
+                    </p>
                 </div>
 
-                <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">
-                        {renderContent()}
-                    </div>
+                <div className="max-w-md mx-auto">
+                    {renderContent()}
                 </div>
             </div>
 
@@ -141,4 +139,4 @@ function VerifyEmail() {
     );
 }
 
-export default VerifyEmail; 
+export default VerifyEmail;

src/pages/VerifyEmailConfirm.jsx

@@ -50,100 +50,93 @@ function VerifyEmailConfirm() {
 
     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>
+            {/* Floating elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
+                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            </div>
 
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 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 className="text-center mb-16">
+                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
+                        {verificationStatus === 'verifying' && t('verify.title')}
+                        {verificationStatus === 'success' && t('verify.success.title')}
+                        {verificationStatus === 'error' && t('verify.error.title')}
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
+                        {verificationStatus === 'verifying' && t('verify.description')}
+                        {verificationStatus === 'success' && t('verify.success.message')}
+                        {verificationStatus === 'error' && t('verify.error.message')}
+                    </p>
                 </div>
 
-                <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 className="max-w-md mx-auto">
+                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
+                        <div className="flex items-center justify-center">
+                            {verificationStatus === 'verifying' && (
+                                <div className="w-16 h-16">
+                                    <div className="w-full h-full border-4 border-brand-purple rounded-full animate-spin"></div>
+                                </div>
+                            )}
+                            {verificationStatus === 'success' && (
+                                <div className="w-16 h-16 relative">
+                                    <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
+                                    <div className="absolute inset-0 flex items-center justify-center">
+                                        <span className="text-3xl text-brand-purple">✓</span>
                                     </div>
-                                )}
-                                {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>
+                            )}
+                            {verificationStatus === 'error' && (
+                                <div className="w-16 h-16 relative">
+                                    <div className="w-full h-full border-4 border-red-500 rounded-full"></div>
+                                    <div className="absolute inset-0 flex items-center justify-center">
+                                        <span className="text-3xl text-red-500">×</span>
                                     </div>
-                                )}
-                            </div>
-
-                            <div 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>
+                                </div>
+                            )}
+                        </div>
 
+                        <div className="text-center space-y-4">
+                            {verificationStatus === 'verifying' && (
+                                <p className="text-gray-600">
+                                    {t('verify.verifying')}
+                                </p>
+                            )}
+                            {verificationStatus === 'success' && (
+                                <p className="text-gray-600">
+                                    {t('verify.success.redirecting')}
+                                </p>
+                            )}
                             {verificationStatus === 'error' && (
                                 <>
-                                    <div className="section-divider"></div>
-                                    <Link to="/login" className="brutalist-button w-full text-center">
-                                        Back to Login →
-                                    </Link>
+                                    <p className="text-red-600">
+                                        {error}
+                                    </p>
+                                    <p className="text-sm text-gray-500">
+                                        {t('verify.error.tryAgain')}
+                                    </p>
                                 </>
                             )}
                         </div>
+
+                        {verificationStatus === 'error' && (
+                            <Link 
+                                to="/login" 
+                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
+                            >
+                                <span>{t('verify.error.backToLogin')}</span>
+                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                            </Link>
+                        )}
                     </div>
                 </div>
             </div>
-
-            
+            <Footer />
         </div>
     );
 }
 
-export default VerifyEmailConfirm; 
+export default VerifyEmailConfirm;

src/styles.css

@@ -1,568 +0,0 @@
-@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;
-}