diff --git a/frontend/app/client-page.tsx b/frontend/app/client-page.tsx index 43498b9..fa9f7bd 100644 --- a/frontend/app/client-page.tsx +++ b/frontend/app/client-page.tsx @@ -1,29 +1,17 @@ 'use client'; import { useEffect, useState } from 'react'; -import Link from "next/link"; -import Image from "next/image"; -import { Button } from "@/components/ui/button"; -import { GlassCard } from "@/components/ui/GlassCard"; -import { ComingSoonModal } from '@/components/ui/ComingSoonModal'; import { InteractiveBackground } from "@/components/ui/InteractiveBackground"; -import { LightningCanvas } from "@/components/ui/LightningCanvas"; -import { AnimatedNumberCircle } from "@/components/ui/AnimatedNumberCircle"; -import { AnimatedHeadingGlow } from "@/components/ui/AnimatedHeadingGlow"; -import { AnimatedDivider } from "@/components/ui/AnimatedDivider"; +import { HeroSection } from "@/components/ui/HeroSection"; +import { HowItWorksSection } from "@/components/ui/HowItWorksSection"; +import { FeaturesSection } from "@/components/ui/FeaturesSection"; +import { ComparisonSection } from "@/components/ui/ComparisonSection"; +import { TokenListSection } from "@/components/ui/TokenListSection"; +import { NewsletterSection } from "@/components/ui/NewsletterSection"; export default function ClientPage() { // Client-side only flag const [isClient, setIsClient] = useState(false); - // Modal state - const [isTokenModalOpen, setIsTokenModalOpen] = useState(false); - - // Mock token data - const mockTokens = [ - { id: '1', name: 'crypto.eth', price: '15.3 ETH', liquidity: '256.2 ETH' }, - { id: '2', name: 'defi.eth', price: '10.7 ETH', liquidity: '180.5 ETH' }, - { id: '3', name: 'nft.eth', price: '12.8 ETH', liquidity: '204.1 ETH' }, - ]; useEffect(() => { setIsClient(true); @@ -35,574 +23,32 @@ export default function ClientPage() { } return ( -
+
{/* Interactive 3D Background */} {/* Static gradient overlay for depth and readability */}
-
- {/* Unified Background Glow Container for Hero and How It Works */} -
- {/* Master animated flowing background glow that spans both sections */} -
- {/* Hero section area glows */} -
-
-
-
-
- - {/* Transition/bridge glows */} -
-
-
- - {/* How It Works area glows - enhanced with more elements */} -
-
-
-
-
-
-
-
-
- - {/* Additional How It Works glows for more vibrancy */} -
-
-
-
-
-
-
-
-
-
-
- - {/* Hero Section */} -
-
-
-
- {/* Static glow effects - no overflow, no animation */} -
- {/* Soft static glow - contained within text */} -
- - {/* Static energy particles within bounds */} -
-
-
-
-
- -

- Unlocking price discovery and liquidity for domain names -
- -

-
-
-

Fractional tokenization of domain names with launchpad mechanics and liquidity pools.

-

Enabling NFT to Cross Chain Superchain ERC20 support and subdomain registration utility.

-
-
- - - - - - - - - -
-
-
-
- Dino mascot -
-
-
-
- - {/* Desktop-only chevron */} -
- -
-
- {/* Animated Divider */} - - - {/* How It Works Section */} -
-
-

- How It Works - -
-

-

- Transform your domains into liquid DeFi assets in three simple steps -

- - - {/* Three Steps */} -
- {/* Connection Lines */} -
-
-
-
-
-
-
-
-
-
- -
- {/* Step 1 */} -
-
- {/* Background glow */} -
- - {/* Step number */} -
-
- -
-
-
- - {/* Content */} -
-

- Verify & Mint -

-
-

- Use DNS TXT records to prove ownership, then mint both NFT representation and fractional ERC20 tokens of your domain. -

-
- - {/* Corner accent */} -
-
-
- - {/* Step 2 */} -
-
- {/* Background glow */} -
- - {/* Step number */} -
-
- -
-
-
- - {/* Content */} -
-

- Launch & Fund -

-
-

- Create ERC20 tokens and automatically establish liquidity pools with initial funding and pricing discovery mechanisms. -

-
- - {/* Corner accent */} -
-
-
- - {/* Step 3 */} -
-
- {/* Background glow */} -
- - {/* Step number */} -
-
- -
-
-
- - {/* Content */} -
-

- Trade, Borrow, Earn -

-
-

- Unlock instant liquidity, participate in lending protocols, and monetize through subdomain revenue streams. -

-
- - {/* Corner accent */} -
-
-
-
-
- -
-
-
- - - - {/* Unified Background Glow Container for Both Sections */} -
- {/* Master animated flowing background glow that spans both sections */} -
- {/* Why Choose Densofi area glows */} -
-
-
-
-
- - {/* Transition/bridge glows */} -
-
-
- - {/* Featured Tokens area glows - enhanced with more elements */} -
-
-
-
-
-
-
-
- - {/* Additional Featured Tokens glows for more vibrancy - positioned at bottom of Featured Tokens */} -
-
-
-
-
-
-
-
- - {/* Why Choose Densofi Section */} -
-
-

- Why Choose Densofi -
- -

-

See how we compare to the competition with superior DeFi integration

- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Feature3DNSNameFiDensofi
NFT minting✓✓✓
ERC20 fractional tokens✖✖✓
Cross-chain support✖Partial✓
DeFi integration✖✓✓
Subdomain monetization✖Limited✓
Price discovery via LP✖✖✓
-
- -
-
- {/* Feature Cards */} -
- {/* Fractional Ownership */} -
-
- {/* Background glow */} -
- - {/* Icon */} -
-
- - - -
-
-
- - {/* Content */} -
-

- Fractional Ownership -

-
-

- Convert domain names into fungible tokens that can be traded on open markets, unlocking value and liquidity. -

-
- - {/* Corner accent */} -
-
-
- - {/* Liquidity Pools */} -
-
- {/* Background glow */} -
- - {/* Icon */} -
-
- - - -
-
-
- - {/* Content */} -
-

- Liquidity Pools -

-
-

- Automatic market making ensures ongoing price discovery and instant liquidity for domain token traders. -

-
- - {/* Corner accent */} -
-
-
- - {/* Subdomain Utility */} -
-
- {/* Background glow */} -
- - {/* Icon */} -
-
- - - -
-
-
- - {/* Content */} -
-

- Subdomain Utility -

-
-

- Token holders can participate in governance, earning revenue from subdomain registrations and usage. -

-
- - {/* Corner accent */} -
-
-
-
-
- -
- - - - {/* Featured Tokens Section */} -
-
-
-

- Featured Tokens - -
-

-
-
- {mockTokens.map((token) => ( - - - {/* Card glow effect */} -
- -
-

{token.name}

-
-
-

Current Price

-

{token.price}

-
-
-

Total Liquidity

-

{token.liquidity}

-
-
-
-
- Active - → -
-
-
- - - ))} -
- - - - -
- - {/* Coming Soon Modal */} - setIsTokenModalOpen(false)} - title="Token Feature Coming Soon" - description="We're working hard to bring you the token functionality. It will be available soon!" - /> -
-
-
-
+
+ {/* Hero Section */} + + + {/* How It Works Section */} + + + {/* Features Section */} + + + {/* Comparison Section */} + + + {/* Token List Section */} + + + {/* Newsletter Section */} + +
+
); } diff --git a/frontend/components/ui/ComparisonSection.tsx b/frontend/components/ui/ComparisonSection.tsx new file mode 100644 index 0000000..f5555eb --- /dev/null +++ b/frontend/components/ui/ComparisonSection.tsx @@ -0,0 +1,87 @@ +'use client'; + +import { GlassCard } from "./GlassCard"; + +export function ComparisonSection() { + const comparisonData = [ + { + feature: "Fractional ownership", + traditional: false, + ens: false, + densofi: true, + }, + { + feature: "Instant liquidity", + traditional: false, + ens: "Partial", + densofi: true, + }, + { + feature: "Cross-chain support", + traditional: false, + ens: "Partial", + densofi: true, + }, + { + feature: "DeFi integration", + traditional: false, + ens: true, + densofi: true, + }, + { + feature: "Subdomain monetization", + traditional: false, + ens: "Limited", + densofi: true, + }, + { + feature: "Price discovery via LP", + traditional: false, + ens: false, + densofi: true, + }, + ]; + + const renderCell = (value: boolean | string) => { + if (value === true) { + return ✓; + } + if (value === false) { + return ✗; + } + return {value}; + }; + + return ( +
+ +

+ Why Choose Densofi? +

+ +
+ + + + + + + + + + + {comparisonData.map((row, index) => ( + + + + + + + ))} + +
FeatureTraditional DomainsENSDensofi
{row.feature}{renderCell(row.traditional)}{renderCell(row.ens)}{renderCell(row.densofi)}
+
+ +
+ ); +} \ No newline at end of file diff --git a/frontend/components/ui/EmailSignup.tsx b/frontend/components/ui/EmailSignup.tsx new file mode 100644 index 0000000..81e42e1 --- /dev/null +++ b/frontend/components/ui/EmailSignup.tsx @@ -0,0 +1,130 @@ +'use client'; + +import { useState } from 'react'; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; + +interface EmailSignupProps { + className?: string; + variant?: 'default' | 'compact'; +} + +export function EmailSignup({ className = '', variant = 'default' }: EmailSignupProps) { + const [email, setEmail] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isSubmitted, setIsSubmitted] = useState(false); + const [error, setError] = useState(''); + + const validateEmail = (email: string) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(''); + + if (!email) { + setError('Email is required'); + return; + } + + if (!validateEmail(email)) { + setError('Please enter a valid email address'); + return; + } + + setIsSubmitting(true); + + try { + // TODO: Replace with actual API call + await new Promise(resolve => setTimeout(resolve, 1000)); + setIsSubmitted(true); + setEmail(''); + } catch (err) { + setError('Something went wrong. Please try again.'); + } finally { + setIsSubmitting(false); + } + }; + + if (isSubmitted) { + return ( +
+
+
+ + + +
+

Thanks for subscribing!

+

We'll keep you updated on the latest developments.

+
+
+ ); + } + + if (variant === 'compact') { + return ( +
+
+ setEmail(e.target.value)} + className="flex-1 bg-white/5 border-white/20 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-blue-400/20" + disabled={isSubmitting} + /> + +
+ {error && ( +

{error}

+ )} +
+ ); + } + + return ( +
+
+

Stay Updated

+

Get the latest updates on Densofi developments and new features.

+
+ +
+
+ setEmail(e.target.value)} + className="flex-1 bg-white/5 border-white/20 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-blue-400/20 h-12" + disabled={isSubmitting} + /> + +
+ + {error && ( +

{error}

+ )} + +

+ By subscribing, you agree to receive updates from Densofi. Unsubscribe anytime. +

+
+
+ ); +} \ No newline at end of file diff --git a/frontend/components/ui/FeaturesSection.tsx b/frontend/components/ui/FeaturesSection.tsx new file mode 100644 index 0000000..d7ccde8 --- /dev/null +++ b/frontend/components/ui/FeaturesSection.tsx @@ -0,0 +1,111 @@ +'use client'; + +export function FeaturesSection() { + const features = [ + { + title: "Fractional Ownership", + description: "Convert domain names into fungible tokens that can be traded on open markets, unlocking value and liquidity.", + icon: ( + + + + ), + gradient: "from-blue-500 to-indigo-600", + hoverColor: "blue", + }, + { + title: "Liquidity Pools", + description: "Automatic market making ensures ongoing price discovery and instant liquidity for domain token traders.", + icon: ( + + + + ), + gradient: "from-teal-500 to-emerald-600", + hoverColor: "teal", + }, + { + title: "Subdomain Utility", + description: "Token holders with significant stakes can register valuable subdomains, creating additional revenue streams.", + icon: ( + + + + ), + gradient: "from-purple-500 to-pink-600", + hoverColor: "purple", + }, + ]; + + return ( +
+ {/* Feature Cards */} +
+ {features.map((feature, index) => { + const isBlue = index === 0; + const isTeal = index === 1; + const isPurple = index === 2; + + return ( +
+
+ {/* Background glow */} +
+ + {/* Icon */} +
+
+ {feature.icon} +
+
+
+ + {/* Content */} +
+

+ {feature.title} +

+
+

+ {feature.description} +

+
+ + {/* Corner accent */} +
+
+
+ ); + })} +
+
+ ); +} \ No newline at end of file diff --git a/frontend/components/ui/Footer.tsx b/frontend/components/ui/Footer.tsx index da90fbc..f0a01c6 100644 --- a/frontend/components/ui/Footer.tsx +++ b/frontend/components/ui/Footer.tsx @@ -36,9 +36,9 @@ export default function Footer() {

Connect

- Telegram - Twitter - Discord + Telegram + Twitter + Discord
diff --git a/frontend/components/ui/HeroSection.tsx b/frontend/components/ui/HeroSection.tsx new file mode 100644 index 0000000..072340e --- /dev/null +++ b/frontend/components/ui/HeroSection.tsx @@ -0,0 +1,83 @@ +'use client'; + +import Link from "next/link"; +import Image from "next/image"; +import { Button } from "@/components/ui/button"; +import { AnimatedHeadingGlow } from "@/components/ui/AnimatedHeadingGlow"; + +export function HeroSection() { + return ( +
+
+
+
+ {/* Static glow effects - no overflow, no animation */} +
+ {/* Soft static glow - contained within text */} +
+ + {/* Static energy particles within bounds */} +
+
+
+
+
+ + +
+ +

+ Unlock liquidity and value from your domain names through fractional tokenization on the Superchain. +

+ +
+ + + + + + +
+
+ +
+
+ {/* Animated background glow */} +
+
+ + {/* Main dino image */} +
+ Denso Dino +
+ + {/* Floating elements */} +
+
+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/frontend/components/ui/HowItWorksSection.tsx b/frontend/components/ui/HowItWorksSection.tsx new file mode 100644 index 0000000..ed4dc66 --- /dev/null +++ b/frontend/components/ui/HowItWorksSection.tsx @@ -0,0 +1,101 @@ +'use client'; + +import { AnimatedNumberCircle } from "./AnimatedNumberCircle"; +import { AnimatedDivider } from "./AnimatedDivider"; + +export function HowItWorksSection() { + const steps = [ + { + number: 1, + title: "Verify Domain", + description: "Prove ownership of your domain using DNS TXT records", + icon: "🔍" + }, + { + number: 2, + title: "Mint NFT", + description: "Convert your domain into an ERC1155 NFT on the blockchain", + icon: "🎨" + }, + { + number: 3, + title: "Create Tokens", + description: "Transform your NFT into 1M tradeable ERC20 tokens", + icon: "🪙" + }, + { + number: 4, + title: "Launch Market", + description: "Deploy to PunchSwap V3 with automated liquidity", + icon: "🚀" + } + ]; + + return ( +
+
+
+

+ How It Works +

+

+ Transform your domain names into liquid, tradeable assets in just four simple steps +

+
+ + + +
+ {steps.map((step, index) => ( +
+ {/* Connecting line (except for last item) */} + {index < steps.length - 1 && ( +
+ )} + +
+ {/* Background glow */} +
+ + {/* Step number with animation */} +
+ +
+ + {/* Icon */} +
+ {step.icon} +
+ + {/* Content */} +
+

+ {step.title} +

+

+ {step.description} +

+
+ + {/* Corner accent */} +
+
+
+ ))} +
+ +
+

Ready to tokenize your domain?

+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/frontend/components/ui/NewsletterSection.tsx b/frontend/components/ui/NewsletterSection.tsx new file mode 100644 index 0000000..d9d82f9 --- /dev/null +++ b/frontend/components/ui/NewsletterSection.tsx @@ -0,0 +1,57 @@ +'use client'; + +import { EmailSignup } from "./EmailSignup"; +import { GlassCard } from "./GlassCard"; + +export function NewsletterSection() { + return ( +
+
+ + {/* Background gradient */} +
+ + {/* Decorative elements */} +
+
+
+
+ +
+
+

+ Join the Future of Domain Finance +

+

+ Be the first to know about new features, token launches, and exclusive opportunities in the domain tokenization space. +

+
+ + + +
+
+ + + + Weekly updates +
+
+ + + + Early access to features +
+
+ + + + No spam, unsubscribe anytime +
+
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/frontend/components/ui/TokenListSection.tsx b/frontend/components/ui/TokenListSection.tsx new file mode 100644 index 0000000..460bbe4 --- /dev/null +++ b/frontend/components/ui/TokenListSection.tsx @@ -0,0 +1,89 @@ +'use client'; + +import { useState } from 'react'; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { GlassCard } from "@/components/ui/GlassCard"; +import { ComingSoonModal } from '@/components/ui/ComingSoonModal'; +import { AnimatedDivider } from "@/components/ui/AnimatedDivider"; + +export function TokenListSection() { + const [isTokenModalOpen, setIsTokenModalOpen] = useState(false); + + // Mock token data + const mockTokens = [ + { id: '1', name: 'crypto.eth', price: '15.3 ETH', liquidity: '256.2 ETH' }, + { id: '2', name: 'defi.eth', price: '10.7 ETH', liquidity: '180.5 ETH' }, + { id: '3', name: 'nft.eth', price: '12.8 ETH', liquidity: '204.1 ETH' }, + ]; + + return ( +
+
+
+

+ Featured Domain Tokens +

+

+ Explore tokenized domains with real-time pricing and liquidity information +

+
+ + + +
+ {mockTokens.map((token) => ( + + +
+

+ {token.name} +

+
+
+ +
+
+ Price + {token.price} +
+
+ Liquidity + {token.liquidity} +
+
+ +
+
+ +12.5% + 24h +
+
+ + + ))} +
+ +
+ + + +
+ + {/* Coming Soon Modal */} + setIsTokenModalOpen(false)} + title="Token Feature Coming Soon" + description="We're working hard to bring you the token functionality. It will be available soon!" + /> +
+
+ ); +} \ No newline at end of file