From fdaa6374e5e3d856992cc9d2e6ac54232a8bc129 Mon Sep 17 00:00:00 2001 From: Rafael Miziara Date: Fri, 3 Oct 2025 16:12:30 +0200 Subject: [PATCH 1/4] refactor(landing): split page.tsx into individual section components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reorganized landing page by extracting sections into separate components for better maintainability and code organization: - Navigation component with theme toggle and app launch button - HeroSection component with main value proposition - FeaturesSection component showcasing 4 core features - CTASection component with call-to-action - Footer component with links and branding 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- apps/landing/src/app/page.tsx | 194 ++---------------- apps/landing/src/components/CTASection.tsx | 15 ++ .../src/components/FeaturesSection.tsx | 64 ++++++ apps/landing/src/components/Footer.tsx | 82 ++++++++ apps/landing/src/components/HeroSection.tsx | 28 +++ apps/landing/src/components/Navigation.tsx | 26 +++ apps/landing/src/components/ThemeToggle.tsx | 22 ++ 7 files changed, 249 insertions(+), 182 deletions(-) create mode 100644 apps/landing/src/components/CTASection.tsx create mode 100644 apps/landing/src/components/FeaturesSection.tsx create mode 100644 apps/landing/src/components/Footer.tsx create mode 100644 apps/landing/src/components/HeroSection.tsx create mode 100644 apps/landing/src/components/Navigation.tsx create mode 100644 apps/landing/src/components/ThemeToggle.tsx diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx index 50fee74..7ffc3c4 100644 --- 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 ( -
- {/* Navigation */} - - - {/* Hero Section */} -
-
-

- Decentralized - Micro-Lending -
- on Polygon -

-

- Create trusted lending pools with your community. Secure, transparent, and governed by multi-signature wallets for maximum - security. -

-
- - -
-
-
- - {/* Features Section */} -
-
-
-

How SuperPool Works

-

Four simple steps to decentralized lending

-
- -
- {features.map((feature, index) => ( -
-
-
{feature.icon}
-

{feature.title}

-

{feature.description}

-
-
-
-
- {feature.title} -
-
-
-
- ))} -
-
-
- - {/* CTA Section */} -
-
-

Ready to Start Lending?

-

Join the decentralized lending revolution on Polygon

- -
-
- - {/* Footer */} - +
+ + + + +
) } diff --git a/apps/landing/src/components/CTASection.tsx b/apps/landing/src/components/CTASection.tsx new file mode 100644 index 0000000..d563f7b --- /dev/null +++ b/apps/landing/src/components/CTASection.tsx @@ -0,0 +1,15 @@ +import { Button } from '@superpool/ui' + +export function CTASection() { + return ( +
+
+

Ready to Start Lending?

+

Join the decentralized lending revolution on Polygon

+ +
+
+ ) +} diff --git a/apps/landing/src/components/FeaturesSection.tsx b/apps/landing/src/components/FeaturesSection.tsx new file mode 100644 index 0000000..babe1d0 --- /dev/null +++ b/apps/landing/src/components/FeaturesSection.tsx @@ -0,0 +1,64 @@ +import Image from 'next/image' + +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', + }, +] + +export function FeaturesSection() { + return ( +
+
+
+

How SuperPool Works

+

Four simple steps to decentralized lending

+
+ +
+ {features.map((feature, index) => ( +
+
+
{feature.icon}
+

{feature.title}

+

{feature.description}

+
+
+
+
+ {feature.title} +
+
+
+
+ ))} +
+
+
+ ) +} diff --git a/apps/landing/src/components/Footer.tsx b/apps/landing/src/components/Footer.tsx new file mode 100644 index 0000000..e6625ea --- /dev/null +++ b/apps/landing/src/components/Footer.tsx @@ -0,0 +1,82 @@ +import { Button } from '@superpool/ui' +import Image from 'next/image' + +export function Footer() { + return ( + + ) +} diff --git a/apps/landing/src/components/HeroSection.tsx b/apps/landing/src/components/HeroSection.tsx new file mode 100644 index 0000000..084b86d --- /dev/null +++ b/apps/landing/src/components/HeroSection.tsx @@ -0,0 +1,28 @@ +import { Button } from '@superpool/ui' + +export function HeroSection() { + return ( +
+
+

+ Decentralized + Micro-Lending +
+ on Polygon +

+

+ Create trusted lending pools with your community. Secure, transparent, and governed by multi-signature wallets for maximum + security. +

+
+ + +
+
+
+ ) +} diff --git a/apps/landing/src/components/Navigation.tsx b/apps/landing/src/components/Navigation.tsx new file mode 100644 index 0000000..0c6edc1 --- /dev/null +++ b/apps/landing/src/components/Navigation.tsx @@ -0,0 +1,26 @@ +import { ThemeToggle } from '@/components/ThemeToggle' +import { Button } from '@superpool/ui' +import Image from 'next/image' + +export function Navigation() { + return ( + + ) +} diff --git a/apps/landing/src/components/ThemeToggle.tsx b/apps/landing/src/components/ThemeToggle.tsx new file mode 100644 index 0000000..eadffa8 --- /dev/null +++ b/apps/landing/src/components/ThemeToggle.tsx @@ -0,0 +1,22 @@ +'use client' + +import { useTheme } from '@/contexts/ThemeContext' + +export function ThemeToggle() { + const { theme, toggleTheme } = useTheme() + + return ( + + ) +} From 8f1bb0a384c70e8b69bea0ef20175fae5be4e94b Mon Sep 17 00:00:00 2001 From: Rafael Miziara Date: Sat, 11 Oct 2025 00:52:40 +0200 Subject: [PATCH 2/4] refactor(landing): update components & content --- GETTING_STARTED.md | 2 +- apps/landing/src/app/globals.css | 28 +++--- apps/landing/src/app/layout.tsx | 5 +- apps/landing/src/components/CTASection.tsx | 10 ++- .../src/components/FeaturesSection.tsx | 43 +++++----- apps/landing/src/components/Footer.tsx | 85 +++++-------------- apps/landing/src/components/HeroSection.tsx | 22 ++--- apps/landing/src/components/Navigation.tsx | 16 ++-- apps/landing/src/components/ThemeToggle.tsx | 44 +++++++--- apps/landing/src/contexts/ThemeContext.tsx | 51 +++++++++++ apps/mobile/package.json | 2 +- eslint.config.mjs | 1 + pnpm-lock.yaml | 16 ++-- 13 files changed, 184 insertions(+), 141 deletions(-) create mode 100644 apps/landing/src/contexts/ThemeContext.tsx diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md index 9b6da56..83abb56 100644 --- 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. \ No newline at end of file +For project-specific questions, refer to [CLAUDE.md](CLAUDE.md) or open an issue on GitHub. diff --git a/apps/landing/src/app/globals.css b/apps/landing/src/app/globals.css index 0390a2f..7bf057b 100644 --- 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 index 9533389..4197f10 100644 --- 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 ( - {children} + + {children} + ) } diff --git a/apps/landing/src/components/CTASection.tsx b/apps/landing/src/components/CTASection.tsx index d563f7b..1108704 100644 --- a/apps/landing/src/components/CTASection.tsx +++ b/apps/landing/src/components/CTASection.tsx @@ -5,10 +5,12 @@ export function CTASection() {

Ready to Start Lending?

-

Join the decentralized lending revolution on Polygon

- +

Join the multi-chain lending revolution

+ + +
) diff --git a/apps/landing/src/components/FeaturesSection.tsx b/apps/landing/src/components/FeaturesSection.tsx index babe1d0..5e09cbb 100644 --- a/apps/landing/src/components/FeaturesSection.tsx +++ b/apps/landing/src/components/FeaturesSection.tsx @@ -2,28 +2,24 @@ import Image from 'next/image' 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.', + 'Secure signature-based login system supporting 500+ wallet providers through WalletConnect protocol. 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.', + 'Pool members can contribute 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.', @@ -33,26 +29,31 @@ const features = [ export function FeaturesSection() { return ( -
+
-

How SuperPool Works

-

Four simple steps to decentralized lending

+

+ Decentralized micro-lending for your community +

+

+ SuperPool empowers communities to create trusted lending pools on the blockchain. Secure, transparent, and governed by + multi-signature wallets for maximum security. +

-
+
{features.map((feature, index) => ( -
-
-
{feature.icon}
-

{feature.title}

-

{feature.description}

-
-
-
-
- {feature.title} -
+
+
+
+ {feature.title} +
+
+

{feature.title}

+

{feature.description}

diff --git a/apps/landing/src/components/Footer.tsx b/apps/landing/src/components/Footer.tsx index e6625ea..e259d4c 100644 --- a/apps/landing/src/components/Footer.tsx +++ b/apps/landing/src/components/Footer.tsx @@ -1,80 +1,39 @@ -import { Button } from '@superpool/ui' import Image from 'next/image' export function Footer() { return ( -