Add custom styles for brutalist components and scrollbar enhancements

src/index.css

@@ -41,30 +41,53 @@ 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;
+  }
+
+  .brutalist-button {
+    @apply px-6 py-3 bg-white text-black font-medium rounded-lg hover:bg-gray-100 transition-all duration-300;
+  }
+
+  .brutalist-heading {
+    @apply font-bold tracking-tight;
+  }
+
+  .brutalist-subheading {
+    @apply font-semibold tracking-tight;
+  }
+}
+
 /* Webkit browsers (Chrome, Safari, newer versions of Opera) */
 ::-webkit-scrollbar {
     width: 12px;
 }
 
 ::-webkit-scrollbar-track {
-    background: white;
-    border-left: 2px solid black;
+    background: black;
+    border-left: 2px solid #1a1a1a;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: black;
-    border: 2px solid black;
+    background: #333;
+    border: 2px solid #1a1a1a;
     transition: all 0.3s ease;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #333;
+    background: #444;
 }
 
 /* Firefox */
 * {
     scrollbar-width: thin;
-    scrollbar-color: black white;
+    scrollbar-color: #333 black;
 }
 
 /* For Edge and other browsers that support standard scrollbar styling */
@@ -73,12 +96,31 @@ button:hover {
 }
 
 *::-webkit-scrollbar-corner {
-    background: white;
+    background: black;
 }
 
 /* Optional: Style for when the scrollbar corner meets both scrollbars */
 *::-webkit-scrollbar-corner {
-    background: white;
-    border-left: 2px solid black;
-    border-top: 2px solid black;
+    background: black;
+    border-left: 2px solid #1a1a1a;
+    border-top: 2px solid #1a1a1a;
+}
+
+/* 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);
+}
+
+/* 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
+  );
 }

src/pages/Home.jsx

@@ -5,134 +5,131 @@ import Footer from '../components/Footer';
 function Home() {
     const { t } = useLanguage();
 
-    const features = [
-        { id: 'aiTrends', icon: 'ai', pattern: 'pattern-ai' },
-        { id: 'imageGen', icon: 'image', pattern: 'pattern-image' },
-        { id: 'analytics', icon: 'analytics', pattern: 'pattern-analytics' },
-        { id: 'brandGrowth', icon: 'growth', pattern: 'pattern-growth' }
-    ];
-
     return (
-        <div className="relative min-h-screen bg-white">
+        <div className="relative min-h-screen bg-black text-white">
             {/* Technical grid background */}
-            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>
+            <div className="fixed inset-0 technical-grid opacity-20 pointer-events-none"></div>
 
+            {/* Hero Section */}
             <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
-                {/* Header section */}
-                <div className="grid-layout mb-16">
+                <div className="grid-layout mb-24">
                     <div className="col-span-12 md:col-span-8">
-                        <h1 className="brutalist-heading relative">
-                            {t('home.title')}
-                            <div className="absolute -right-8 -top-8 w-16 h-16">
-                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
-                            </div>
+                        <h1 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 font-medium tracking-tight max-w-2xl">
-                            {t('home.description')}
-                        </p>
+                        <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>
 
-                <div className="geometric-divider"></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>
 
-                {/* Feature grid */}
-                {/* <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-32">
-                    <div className="brutalist-card">
-                        <div className="relative">
-                            <div className="icon-ai mb-6"></div>
-                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.aiTrends')}</h3>
-                            <div className="hover-line"></div>
-                        </div>
-                    </div>
-                    <div className="brutalist-card">
-                        <div className="relative">
-                            <div className="icon-image mb-6"></div>
-                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.imageGen')}</h3>
-                            <div className="hover-line"></div>
-                        </div>
-                    </div>
-                    <div className="brutalist-card">
-                        <div className="relative">
-                            <div className="icon-analytics mb-6"></div>
-                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.analytics')}</h3>
-                            <div className="hover-line"></div>
-                        </div>
-                    </div>
-                    <div className="brutalist-card">
-                        <div className="relative">
-                            <div className="icon-growth mb-6"></div>
-                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.brandGrowth')}</h3>
-                            <div className="hover-line"></div>
+                {/* 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>
                         </div>
                     </div>
-                </div> */}
+                </div>
 
-                {/* Main content grid */}
-                <div className="grid-layout gap-8">
-                    {/* Left column - Single video */}
-                    <div className="col-span-12 md:col-span-7 brutalist-card p-0 overflow-hidden">
-                        <div className="relative aspect-[4/3] overflow-hidden">
-                            <video
-                                className="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="video-overlay"></div>
-                            <div className="absolute inset-0 diagonal-lines"></div>
-                        </div>
-                        <div className="p-6">
-                            <div className="section-divider"></div>
-                            <h2 className="brutalist-subheading mb-4">Build Your Own Model</h2>
-                            <Link to="/about" className="brutalist-button inline-block">
-                                About Us →
-                            </Link>
+                {/* 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>
+                                </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>
 
-                    {/* Right column - Feature grid */}
-                    <div className="col-span-12 md:col-span-5">
-                        <div className="grid grid-cols-2 gap-3 h-full">
-                            <Link to="/ai-trends" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
-                                <div className="relative h-full flex flex-col justify-between">
-                                    <div className="icon-ai mb-4"></div>
-                                    <h3 className="text-sm font-black uppercase">{t('home.features.aiTrends')}</h3>
-                                    <div className="hover-line mt-2"></div>
-                                </div>
-                            </Link>
-                            <Link to="/image-generation" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
-                                <div className="relative h-full flex flex-col justify-between">
-                                    <div className="icon-image mb-4"></div>
-                                    <h3 className="text-sm font-black uppercase">{t('home.features.imageGen')}</h3>
-                                    <div className="hover-line mt-2"></div>
-                                </div>
-                            </Link>
-                            <Link to="/analytics" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
-                                <div className="relative h-full flex flex-col justify-between">
-                                    <div className="icon-analytics mb-4"></div>
-                                    <h3 className="text-sm font-black uppercase">{t('home.features.analytics')}</h3>
-                                    <div className="hover-line mt-2"></div>
-                                </div>
-                            </Link>
-                            <Link to="/brand-growth" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
-                                <div className="relative h-full flex flex-col justify-between">
-                                    <div className="icon-growth mb-4"></div>
-                                    <h3 className="text-sm font-black uppercase">{t('home.features.brandGrowth')}</h3>
-                                    <div className="hover-line mt-2"></div>
-                                </div>
-                            </Link>
+                {/* 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;