From ae968df858399dad013b87a3968878bc340b1102 Mon Sep 17 00:00:00 2001 From: GertsDev Date: Fri, 16 Jan 2026 23:04:07 -0500 Subject: [PATCH 1/6] polish: enhance visibility of landing page assets and inputs --- src/app/(public)/components/hero-section.tsx | 81 +++++++++++++++++--- src/components/ens-name-checker/EnsInput.tsx | 48 ++++++------ 2 files changed, 91 insertions(+), 38 deletions(-) diff --git a/src/app/(public)/components/hero-section.tsx b/src/app/(public)/components/hero-section.tsx index 72d1a4b..143ad37 100644 --- a/src/app/(public)/components/hero-section.tsx +++ b/src/app/(public)/components/hero-section.tsx @@ -1,27 +1,84 @@ +import { Shield, Wallet } from 'lucide-react' +import Image from 'next/image' + import { EnsNameChecker } from '../../../components/ens-name-checker' export function HeroSection() { return ( -
-
-
+
+ {/* Background Effects */} +
+
+ +
+
{/* Main Headline */} -

+

Build your business
- + onchain

- + {/* Subheadline */} +

+ The all-in-one operating system for your company. Secure your + identity, manage treasury, and issue tokens in minutes. +

+ +
+ +
+ +
+ {/* Built at ETHGlobal */} +
+

+ Built at +

+
+
+ ETHGlobal +
+ ETHGlobal New York +
+
- {/* Social Proof */} -
-
Powered by
-
-
ENS
-
Privy
+ {/* Partners */} +
+

+ Powered by industry leaders +

+
+
+
+ ENS +
+ ENS +
+
+ + Privy +
+
+ + Safe +
+
diff --git a/src/components/ens-name-checker/EnsInput.tsx b/src/components/ens-name-checker/EnsInput.tsx index 6a6026b..2715cca 100644 --- a/src/components/ens-name-checker/EnsInput.tsx +++ b/src/components/ens-name-checker/EnsInput.tsx @@ -1,4 +1,7 @@ -import { useState } from 'react' +import { type ChangeEvent, useState } from 'react' + +import { Input } from '@/components/ui/input' +import { cn } from '@/lib/utils' interface EnsInputProps { ensName: string @@ -9,41 +12,34 @@ export function EnsInput({ ensName, setEnsName }: EnsInputProps) { const [isFocused, setIsFocused] = useState(false) return ( - <> - {/* Title that disappears on focus */} +
-

- Enter your business name -

-
+ className={cn( + 'from-primary via-accent to-secondary absolute -inset-0.5 rounded-2xl bg-gradient-to-r opacity-30 blur transition duration-500 group-hover:opacity-60', + isFocused && 'opacity-100 blur-md duration-200' + )} + /> - {/* Input field that moves up when focused */} -
- + + onChange={(event: ChangeEvent) => setEnsName( - e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') + event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') ) } onFocus={() => setIsFocused(true)} - onBlur={() => !ensName && setIsFocused(false)} - className="text-primary border-border focus:ring-primary focus:border-primary placeholder:text-muted-foreground w-full rounded-2xl border bg-white px-6 py-4 pr-16 text-lg transition-all duration-200 focus:ring-2" + onBlur={() => setIsFocused(false)} + className="border-border/50 bg-background/80 placeholder:text-muted-foreground/80 h-16 w-full rounded-xl px-6 pr-20 text-xl shadow-xl backdrop-blur-xl transition-all focus-visible:border-transparent focus-visible:ring-0 md:text-2xl" /> -
- .eth +
+ + .eth +
- +
) } From c04e46408a6f19c40019d1631e988ce4b48648eb Mon Sep 17 00:00:00 2001 From: GertsDev Date: Fri, 16 Jan 2026 23:48:11 -0500 Subject: [PATCH 2/6] feat: modernize landing page sections --- .../(public)/components/features-section.tsx | 205 ++++++++++++++---- src/app/(public)/components/footer.tsx | 69 ++++-- src/app/(public)/components/navbar.tsx | 79 ++++++- src/style.css | 54 +---- 4 files changed, 291 insertions(+), 116 deletions(-) diff --git a/src/app/(public)/components/features-section.tsx b/src/app/(public)/components/features-section.tsx index 88c8f25..5ab1a5e 100644 --- a/src/app/(public)/components/features-section.tsx +++ b/src/app/(public)/components/features-section.tsx @@ -1,84 +1,207 @@ -import { CheckCircle, DollarSign, Shield, Sparkles, Users } from 'lucide-react' +'use client' + +import { + ArrowRight, + Globe, + Mail, + PieChart, + Rocket, + ShieldCheck, + Zap, +} from 'lucide-react' +import { motion, useScroll, useTransform } from 'motion/react' +import * as React from 'react' + +import { cn } from '@/lib/utils' interface Feature { icon: React.ReactNode title: string description: string + highlight: string } const features: Feature[] = [ { - icon: , + icon: , title: 'No wallet? No problem', description: "Start with just an email. We'll create an embedded wallet for you and upgrade to self-custody when you're ready.", + highlight: 'Embedded Wallets', }, { - icon: , - title: 'Transparent revenue splits', + icon: , + title: 'Your .eth domain', description: - 'Set revenue percentages once. Every payment automatically splits between treasury and owners on-chain.', + 'Professional ENS names that work as domains, wallets, and identities. Own your name forever.', + highlight: 'Onchain Identity', }, { - icon: , + icon: , title: 'Multi-sig security', description: 'Enterprise-grade protection with Safe multisig wallets. Multiple signatures required for critical decisions.', + highlight: 'Treasury Safe', }, { - icon: , - title: 'Your .eth domain', + icon: , + title: 'Gasless transactions', description: - 'Professional ENS names that work as domains, wallets, and identities. Own your name forever.', + "No need to buy crypto to get started. We cover gas fees for email users until you're ready to self-custody.", + highlight: 'Sponsored Gas', }, { - icon: , - title: 'Gasless transactions', + icon: , + title: 'Transparent revenue splits', description: - "No need to buy crypto to get started. We cover gas fees for email users until you're ready to self-custody.", + 'Set revenue percentages once. Every payment automatically splits between treasury and owners on-chain.', + highlight: 'Smart Splits', }, { - icon: , + icon: , title: 'Built for scale', description: 'From MVP to IPO, our infrastructure grows with you. Add team members, adjust splits, upgrade security.', + highlight: 'Growth Ready', }, ] export function FeaturesSection() { + const containerRef = React.useRef(null) + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start 20%', 'end 80%'], + }) + + const height = useTransform(scrollYProgress, [0, 1], ['0%', '100%']) + return ( -
-
-
-

- Everything you need to - build unstoppable -

-

- From idea to IPO, all the infrastructure you need for a transparent, - decentralized business -

+
+ {/* Dynamic Background */} +
+
+
+
+
+
+
+
-
- {features.map((feature, index) => ( -
-
-
-
- {feature.icon} -
-

- {feature.title} -

-

- {feature.description} -

-
-
- ))} +
+
+ +

+ The complete{' '} + + onchain OS + +

+

+ A unified platform for your company's entire lifecycle. From + day one to IPO. +

+ +
+ +
+ {/* Vertical Timeline Line (Desktop Center / Mobile Left) */} +
+ + + +
+ {features.map((feature, index) => ( + + ))} +
) } + +function FeatureNode({ feature, index }: { feature: Feature; index: number }) { + const isEven = index % 2 === 0 + + return ( +
+ {/* Node Point */} +
+
+
+ + {/* Content Card */} + + {/* Connector Line (Horizontal) */} +