Refactor API host configuration, enhance Docker setup, and improve PaymentCancel page styling

Dockerfile

@@ -12,7 +12,9 @@ RUN npm ci
 # Copy source code
 COPY . .
 
-# Build the application
+# Build the application with environment variable
+ARG VITE_API_HOST
+ENV VITE_API_HOST=${VITE_API_HOST}
 RUN npm run build
 
 # Runtime stage
@@ -29,4 +31,4 @@ COPY --from=builder /app/dist ./dist
 EXPOSE 5173
 
 # Run the application
-CMD ["serve", "-s", "dist", "-l", "5173"] 
+CMD ["serve", "-s", "dist", "-l", "5173"]

docker-compose.yml

@@ -0,0 +1,30 @@
+version: '3'
+
+services:
+  traefik:
+    image: traefik:v2.10
+    command:
+      - "--api.insecure=true"
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--entrypoints.web.address=:80"
+    ports:
+      - "80:80"
+      - "8080:8080"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+
+  app:
+    build:
+      context: .
+      args:
+        - VITE_API_HOST=http://${HOSTNAME}
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.app.rule=Host(`${HOSTNAME}`) && !PathPrefix(`/api`)"
+      - "traefik.http.routers.app.entrypoints=web"
+      - "traefik.http.services.app.loadbalancer.server.port=5173"
+
+networks:
+  default:
+    name: traefik_network

src/components/Footer.jsx

@@ -1,33 +1,38 @@
 import { Link } from 'react-router-dom';
-import { useLanguage } from '../context/LanguageContext';
 
 function Footer() {
-    const { t } = useLanguage();
-
     return (
-        <footer className="border-t-2 border-black mt-32">
-            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 py-16">
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+        <footer className="mt-32 bg-white/80 backdrop-blur-sm relative">
+            {/* Gradient border top */}
+            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
+            
+            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-16">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
                     {/* Company Info */}
                     <div>
-                        <h4 className="text-xl font-black uppercase mb-6">BYOM</h4>
-                        <p className="monospace text-sm">
+                        <h4 className="font-light text-2xl tracking-tight relative group mb-4">
+                            byom
+                            <div className="absolute -right-2 -top-2 w-1.5 h-1.5 bg-brand-purple rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
+                        </h4>
+                        <p className="text-sm text-gray-500">
                             AI-powered platform helping influencers grow their brand through advanced analytics and creative tools.
                         </p>
                     </div>
 
                     {/* Legal Links */}
                     <div>
-                        <h4 className="text-lg font-black uppercase mb-6">Legal</h4>
+                        <h4 className="text-sm font-medium text-gray-900 mb-4">Legal</h4>
                         <ul className="space-y-3">
                             <li>
-                                <Link to="/terms" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                <Link to="/terms" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                     Terms of Service
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </Link>
                             </li>
                             <li>
-                                <Link to="/privacy" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                <Link to="/privacy" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                     Privacy Policy
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </Link>
                             </li>
                         </ul>
@@ -35,21 +40,24 @@ function Footer() {
 
                     {/* Company Links */}
                     <div>
-                        <h4 className="text-lg font-black uppercase mb-6">Company</h4>
+                        <h4 className="text-sm font-medium text-gray-900 mb-4">Company</h4>
                         <ul className="space-y-3">
                             <li>
-                                <Link to="/about" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                <Link to="/about" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                     About Us
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </Link>
                             </li>
                             <li>
-                                <Link to="/careers" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                <Link to="/careers" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                     Careers
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </Link>
                             </li>
                             <li>
-                                <Link to="/contact" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                <Link to="/contact" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                     Contact
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </Link>
                             </li>
                         </ul>
@@ -57,24 +65,30 @@ function Footer() {
 
                     {/* Social Links */}
                     <div>
-                        <h4 className="text-lg font-black uppercase mb-6">Follow Us</h4>
+                        <h4 className="text-sm font-medium text-gray-900 mb-4">Follow Us</h4>
                         <ul className="space-y-3">
                             <li>
                                 <a href="https://twitter.com/byom" target="_blank" rel="noopener noreferrer" 
-                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
                                     Twitter
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </a>
                             </li>
                             <li>
                                 <a href="https://linkedin.com/company/byom" target="_blank" rel="noopener noreferrer"
-                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
                                     LinkedIn
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </a>
                             </li>
                             <li>
                                 <a href="https://instagram.com/byom" target="_blank" rel="noopener noreferrer"
-                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
+                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
+                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
                                     Instagram
+                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                 </a>
                             </li>
                         </ul>
@@ -82,12 +96,17 @@ function Footer() {
                 </div>
 
                 {/* Bottom Bar */}
-                <div className="border-t-2 border-black mt-12 pt-8 flex justify-between items-center">
-                    <p className="monospace text-sm">
+                <div className="mt-16 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 relative">
+                    {/* Gradient border top */}
+                    <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
+                    
+                    <p className="text-sm text-gray-500">
                         © {new Date().getFullYear()} BYOM. All rights reserved.
                     </p>
-                    <div className="flex items-center gap-4">
-                        <span className="monospace text-sm">Made with ♥ in Paris</span>
+                    <div className="flex items-center gap-2">
+                        <span className="text-sm text-gray-500">Made with</span>
+                        <span className="text-brand-pink animate-pulse">♥</span>
+                        <span className="text-sm text-gray-500">in Paris</span>
                     </div>
                 </div>
             </div>
@@ -95,4 +114,4 @@ function Footer() {
     );
 }
 
-export default Footer; 
+export default Footer;

src/config.js

@@ -1 +1,2 @@
-export const API_HOST = 'http://172.27.28.86:8080'; 
+export const API_HOST = import.meta.env.VITE_API_HOST || 'http://localhost';
+//export const API_HOST = `${baseHost}/api`;

src/index.css

@@ -45,6 +45,53 @@ button:hover {
   }
 }
 
+/* Footer-inspired global styles */
+@layer components {
+  .monospace {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .heading-style {
+    @apply font-black uppercase mb-6;
+  }
+
+  .heading-xl {
+    @apply heading-style text-xl;
+  }
+
+  .heading-lg {
+    @apply heading-style text-lg;
+  }
+
+  .link-hover {
+    @apply hover:translate-x-2 transition-transform inline-block;
+  }
+
+  .content-wrapper {
+    @apply max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 py-16;
+  }
+
+  .border-style {
+    @apply border-2 border-black;
+  }
+
+  .border-top {
+    @apply border-t-2 border-black;
+  }
+
+  .grid-layout {
+    @apply grid grid-cols-1 md:grid-cols-4 gap-12;
+  }
+
+  .link-list {
+    @apply space-y-3;
+  }
+
+  .link-item {
+    @apply monospace text-sm link-hover;
+  }
+}
+
 /* Brand Colors */
 .text-brand-purple {
   color: var(--brand-purple);

src/pages/PaymentCancel.jsx

@@ -1,75 +1,70 @@
 import { useNavigate, Link } from 'react-router-dom';
-import { useLanguage } from '../context/LanguageContext';
 import Footer from '../components/Footer';
 
 function PaymentCancel() {
     const navigate = useNavigate();
-    const { t } = useLanguage();
 
     return (
         <div className="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">
+                <div className="mb-16">
+                    <h1 className="text-[60px] leading-tight font-light tracking-tight text-gray-900 lg:text-[80px] relative mb-6">
+                        <span className="relative inline-block">
                             Payment Cancelled
-                            <div className="absolute -right-8 -top-8 w-16 h-16">
-                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
-                            </div>
-                        </h1>
-                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
-                            Your payment was cancelled. No charges were made.
-                        </p>
-                    </div>
+                            <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                        </span>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl">
+                        Your payment was cancelled. No charges were made.
+                    </p>
                 </div>
 
-                <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">
-                                    <div className="geometric-shape circle w-full h-full border-4 border-black">
-                                        <div className="absolute inset-0 flex items-center justify-center">
-                                            <span className="text-2xl">×</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="text-center space-y-4">
-                                <p className="monospace">
-                                    Would you like to try again or go back to the pricing page?
-                                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 space-y-8 border border-gray-100 relative group">
+                        {/* Gradient border */}
+                        <div className="absolute inset-0 rounded-3xl border border-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20 pointer-events-none"></div>
+                        <div className="flex items-center justify-center">
+                            <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center">
+                                <span className="text-2xl text-brand-purple">×</span>
                             </div>
+                        </div>
 
-                            <div className="section-divider"></div>
+                        <div className="text-center space-y-4">
+                            <p className="text-gray-500">
+                                Would you like to try again or go back to the pricing page?
+                            </p>
+                        </div>
 
-                            <div className="space-y-4">
-                                <button
-                                    onClick={() => navigate('/payment')}
-                                    className="brutalist-button w-full"
-                                >
-                                    Try again →
-                                </button>
-                                <Link to="/pricing" className="brutalist-button w-full text-center">
-                                    View pricing →
-                                </Link>
-                            </div>
+                        <div className="space-y-4">
+                            <button
+                                onClick={() => navigate('/payment')}
+                                className="w-full bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
+                            >
+                                <span>Try again</span>
+                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                            </button>
+                            <Link 
+                                to="/pricing" 
+                                className="w-full bg-gray-100 text-gray-900 rounded-full px-6 py-3 text-sm group hover:bg-brand-purple hover:text-white transition-colors duration-300 flex items-center justify-center gap-2"
+                            >
+                                <span>View pricing</span>
+                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                            </Link>
                         </div>
                     </div>
                 </div>
             </div>
-
             <Footer />
         </div>
     );
 }
 
-export default PaymentCancel; 
+export default PaymentCancel;

src/pages/RegistrationSuccess.jsx

@@ -1,74 +1,70 @@
 import { Link } from 'react-router-dom';
-import { useLanguage } from '../context/LanguageContext';
 import Footer from '../components/Footer';
 
 function RegistrationSuccess() {
-    const { t } = useLanguage();
 
     return (
         <div className="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">
+                <div className="mb-16">
+                    <h1 className="text-[60px] leading-tight font-light tracking-tight text-gray-900 lg:text-[80px] relative mb-6">
+                        <span className="relative inline-block">
                             Check Your Email
-                            <div className="absolute -right-8 -top-8 w-16 h-16">
-                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
-                            </div>
-                        </h1>
-                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
-                            We've sent you a verification link. Please check your inbox to continue.
-                        </p>
-                    </div>
+                            <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
+                        </span>
+                    </h1>
+                    <p className="text-xl text-gray-500 max-w-2xl">
+                        We&apos;ve sent you a verification link. Please check your inbox to continue.
+                    </p>
                 </div>
 
-                <div className="geometric-divider mb-16"></div>
-
                 {/* Content */}
-                <div className="grid-layout">
-                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
-                        <div className="brutalist-card p-6 space-y-6">
-                            <div className="flex items-center justify-center">
-                                <div className="w-16 h-16 relative">
-                                    <div className="geometric-shape square w-full h-full border-4 border-black"></div>
-                                    <div className="absolute inset-0 flex items-center justify-center">
-                                        <span className="text-2xl">✉</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="text-center space-y-4">
-                                <p className="monospace">
-                                    Click the link in the email we just sent you to verify your account.
-                                </p>
-                                <p className="monospace text-sm">
-                                    Didn't receive the email? Check your spam folder or{' '}
-                                    <button 
-                                        onClick={() => window.location.reload()}
-                                        className="underline font-bold hover:text-gray-600 transition-colors"
-                                    >
-                                        click here to try again
-                                    </button>
-                                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 space-y-8 border border-gray-100 relative group">
+                        {/* Gradient border */}
+                        <div className="absolute inset-0 rounded-3xl border border-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20 pointer-events-none"></div>
+                        
+                        <div className="flex items-center justify-center">
+                            <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center">
+                                <span className="text-2xl text-brand-purple">✉</span>
                             </div>
+                        </div>
 
-                            <div className="section-divider"></div>
-
-                            <Link to="/login" className="brutalist-button w-full text-center">
-                                Back to Login →
-                            </Link>
+                        <div className="text-center space-y-4">
+                            <p className="text-gray-500">
+                                Click the link in the email we just sent you to verify your account.
+                            </p>
+                            <p className="text-sm text-gray-400">
+                                Didn&apos;t receive the email? Check your spam folder or{" "}
+                                <button 
+                                    onClick={() => window.location.reload()}
+                                    className="text-brand-purple hover:text-brand-purple/80 transition-colors font-medium"
+                                >
+                                    click here to try again
+                                </button>
+                            </p>
                         </div>
+
+                        <Link 
+                            to="/login" 
+                            className="w-full bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
+                        >
+                            <span>Back to Login</span>
+                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
+                        </Link>
                     </div>
                 </div>
             </div>
-
             <Footer />
         </div>
     );
 }
 
-export default RegistrationSuccess; 
+export default RegistrationSuccess;