rm30-dev · rafamiziara · Oct 10, 2025 · Oct 3, 2025 · Oct 10, 2025 · Oct 10, 2025
diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
@@ -373,4 +373,4 @@ If you encounter any issues during setup:
 4. Try running `pnpm install` again from the root directory
 5. Review the error messages carefully - they often contain helpful debugging information
 
-For project-specific questions, refer to [CLAUDE.md](CLAUDE.md) or open an issue on GitHub.
+For project-specific questions, refer to [CLAUDE.md](CLAUDE.md) or open an issue on GitHub.
diff --git a/apps/landing/next.config.ts b/apps/landing/next.config.ts
@@ -1,7 +1,44 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'X-DNS-Prefetch-Control',
+            value: 'on',
+          },
+          {
+            key: 'Strict-Transport-Security',
+            value: 'max-age=63072000; includeSubDomains; preload',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'X-Frame-Options',
+            value: 'DENY',
+          },
+          {
+            key: 'Content-Security-Policy',
+            value:
+              "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src 'self' fonts.gstatic.com data:; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';",
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'strict-origin-when-cross-origin',
+          },
+          {
+            key: 'Permissions-Policy',
+            value: 'camera=(), microphone=(), geolocation=()',
+          },
+        ],
+      },
+    ]
+  },
 }
 
 export default nextConfig
diff --git a/apps/landing/src/app/globals.css b/apps/landing/src/app/globals.css
@@ -1,21 +1,22 @@
 @import 'tailwindcss';
-@import '@superpool/design/tokens.css';
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Geist:wght@300;400;500;600;700&display=swap');
 
-@theme inline {
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
   /* SuperPool Design System Colors */
   --color-primary: #2563eb;
-  --color-secondary: #0f172a;
   --color-accent: #06b6d4;
   --color-success: #10b981;
   --color-warning: #f59e0b;
   --color-error: #ef4444;
 
-  /* Background Colors */
+  /* Background/Foreground colors */
   --color-background: #ffffff;
-  --color-background-dark: #0f172a;
+  --color-secondary: #f8f9fa;
   --color-foreground: #0f172a;
   --color-foreground-muted: #64748b;
+  --color-inverted: #0f172a;
 
   /* Typography - SuperPool Contemporary Tech */
   --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
@@ -34,12 +35,17 @@
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
-@media (prefers-color-scheme: dark) {
-  @theme inline {
-    --color-background: var(--color-background-dark);
-    --color-foreground: #ffffff;
-    --color-foreground-muted: #94a3b8;
-  }
+/* Dark theme */
+.dark {
+  --color-background: #0f172a;
+  --color-secondary: #1e293b;
+  --color-foreground: #ffffff;
+  --color-foreground-muted: #94a3b8;
+  --color-inverted: #ffffff;
+}
+
+html {
+  scroll-behavior: smooth;
 }
 
 body {

diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
 import './globals.css'
+import { ThemeProvider } from '@/contexts/ThemeContext'
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -24,7 +25,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
     </html>
   )
 }
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
@@ -1,189 +1,19 @@
-import { Button } from '@superpool/ui'
-import Image from 'next/image'
+'use client'
 
-const features = [
-  {
-    icon: '🔐',
-    title: 'Secure Wallet Authentication',
-    description:
-      'Connect with 100+ wallets including MetaMask, WalletConnect, and Coinbase. Secure signature-based login with no passwords required.',
-    image: '/images/illustrations/feature_1.png',
-  },
-  {
-    icon: '🏊',
-    title: 'Create & Join Lending Pools',
-    description:
-      'Start your own micro-lending community or join existing pools. Each pool has its own members and lending parameters managed by administrators.',
-    image: '/images/illustrations/feature_2.png',
-  },
-  {
-    icon: '💰',
-    title: 'Contribute & Borrow Funds',
-    description:
-      'Pool members can contribute POL to provide liquidity and request loans from their trusted community with AI-assisted approval.',
-    image: '/images/illustrations/feature_3.png',
-  },
-  {
-    icon: '🛡️',
-    title: 'Multi-Sig Security',
-    description:
-      'Enhanced security through multi-signature wallet controls for all critical protocol actions, ensuring decentralized governance and protection.',
-    image: '/images/illustrations/feature_4.png',
-  },
-]
+import { Navigation } from '@/components/Navigation'
+import { HeroSection } from '@/components/HeroSection'
+import { FeaturesSection } from '@/components/FeaturesSection'
+import { CTASection } from '@/components/CTASection'
+import { Footer } from '@/components/Footer'
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-background">
-      {/* Navigation */}
-      <nav>
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <Image src="/images/logos/no_bg_white.svg" alt="SuperPool" width={150} height={40} className="h-8 w-auto" />
-            </div>
-            <div className="flex items-center space-x-4">
-              <button className="text-white hover:text-primary transition-colors font-semibold px-4 py-2">Features</button>
-              <button className="text-white hover:text-primary transition-colors font-semibold px-4 py-2">About</button>
-              <Button size="sm" variant="primary" className="px-4 py-2 font-semibold">
-                Launch App
-              </Button>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      {/* Hero Section */}
-      <section className="py-40 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 font-accent">
-            Decentralized
-            <span className="text-primary"> Micro-Lending</span>
-            <br />
-            on Polygon
-          </h1>
-          <p className="text-xl text-foreground-muted mb-8 max-w-3xl mx-auto">
-            Create trusted lending pools with your community. Secure, transparent, and governed by multi-signature wallets for maximum
-            security.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button size="lg" variant="primary" className="px-8 py-4 font-semibold">
-              Launch App
-            </Button>
-            <Button size="lg" variant="ghost" className="px-8 py-4 font-semibold">
-              View on GitHub
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section className="py-20 bg-secondary">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold text-white mb-4 font-accent">How SuperPool Works</h2>
-            <p className="text-xl text-gray-300">Four simple steps to decentralized lending</p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
-            {features.map((feature, index) => (
-              <div key={index} className="flex flex-col md:flex-row items-center gap-8">
-                <div className="flex-1">
-                  <div className="text-4xl mb-4">{feature.icon}</div>
-                  <h3 className="text-2xl font-semibold text-white mb-4 font-accent">{feature.title}</h3>
-                  <p className="text-gray-300 leading-relaxed">{feature.description}</p>
-                </div>
-                <div className="flex-1 max-w-md">
-                  <div className="bg-white rounded-lg p-8 shadow-md">
-                    <div className="w-full h-64 rounded-lg overflow-hidden">
-                      <Image src={feature.image} alt={feature.title} width={400} height={256} className="w-full h-full object-cover" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="py-20 bg-primary text-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-4xl font-bold mb-6 font-accent">Ready to Start Lending?</h2>
-          <p className="text-xl mb-8 opacity-90">Join the decentralized lending revolution on Polygon</p>
-          <Button size="lg" variant="secondary" className="px-8 py-4 font-semibold">
-            Launch SuperPool App
-          </Button>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-secondary text-white py-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-            <div className="col-span-2">
-              <div className="mb-4">
-                <Image src="/images/logos/no_bg_white.svg" alt="SuperPool" width={180} height={48} className="h-10 w-auto" />
-              </div>
-              <p className="text-gray-300 mb-4">Decentralized micro-lending platform built on Polygon with multi-signature security.</p>
-              <div className="flex space-x-4">
-                <Button variant="ghost" size="sm" className="px-4 py-2">
-                  GitHub
-                </Button>
-                <Button variant="ghost" size="sm" className="px-4 py-2">
-                  Twitter
-                </Button>
-                <Button variant="ghost" size="sm" className="px-4 py-2">
-                  Discord
-                </Button>
-              </div>
-            </div>
-            <div>
-              <h4 className="text-lg font-semibold mb-4">Product</h4>
-              <ul className="space-y-2 text-gray-300">
-                <li>
-                  <a href="#" className="hover:text-white">
-                    Features
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="hover:text-white">
-                    Security
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="hover:text-white">
-                    Documentation
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h4 className="text-lg font-semibold mb-4">Community</h4>
-              <ul className="space-y-2 text-gray-300">
-                <li>
-                  <a href="#" className="hover:text-white">
-                    Discord
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="hover:text-white">
-                    Twitter
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="hover:text-white">
-                    GitHub
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
-            <p>&copy; 2025 SuperPool. Built with ❤️ for the DeFi community.</p>
-          </div>
-        </div>
-      </footer>
+    <div className="min-h-screen bg-background transition-colors">
+      <Navigation />
+      <HeroSection />
+      <FeaturesSection />
+      <CTASection />
+      <Footer />
     </div>
   )
 }
diff --git a/apps/landing/src/components/CTASection.tsx b/apps/landing/src/components/CTASection.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@superpool/ui'
+
+export function CTASection() {
+  return (
+    <section className="py-20 bg-primary text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 className="text-4xl font-bold mb-6 font-accent">Ready to Start Lending?</h2>
+        <p className="text-xl mb-8 opacity-90">Join the multi-chain lending revolution</p>
+        <a target="_blank" rel="noopener noreferrer" href="https://github.com/rafamiziara/superpool">
+          <Button size="lg" variant="secondary" className="px-8 py-4 font-semibold">
+            <span className="text-inverted">Explore SuperPool</span>
+          </Button>
+        </a>
+      </div>
+    </section>
+  )
+}