diff --git a/public/ens-logo.png b/public/ens-logo.png new file mode 100644 index 0000000..53bbf73 Binary files /dev/null and b/public/ens-logo.png differ diff --git a/public/eth-global-logo.png b/public/eth-global-logo.png new file mode 100644 index 0000000..38f3d8f Binary files /dev/null and b/public/eth-global-logo.png differ diff --git a/public/privy-logo.png b/public/privy-logo.png new file mode 100644 index 0000000..3ab7dff Binary files /dev/null and b/public/privy-logo.png differ diff --git a/src/app/(public)/components/features-section.tsx b/src/app/(public)/components/features-section.tsx index 88c8f25..7433311 100644 --- a/src/app/(public)/components/features-section.tsx +++ b/src/app/(public)/components/features-section.tsx @@ -63,8 +63,7 @@ export function FeaturesSection() {
{features.map((feature, index) => (
-
-
+
{feature.icon}
diff --git a/src/app/(public)/components/footer.tsx b/src/app/(public)/components/footer.tsx index dee1dd9..d3df63e 100644 --- a/src/app/(public)/components/footer.tsx +++ b/src/app/(public)/components/footer.tsx @@ -5,7 +5,7 @@ export function Footer() { return ( ) diff --git a/src/app/(public)/components/hero-section.tsx b/src/app/(public)/components/hero-section.tsx index 143ad37..a074259 100644 --- a/src/app/(public)/components/hero-section.tsx +++ b/src/app/(public)/components/hero-section.tsx @@ -1,4 +1,4 @@ -import { Shield, Wallet } from 'lucide-react' +import { Shield } from 'lucide-react' import Image from 'next/image' import { EnsNameChecker } from '../../../components/ens-name-checker' @@ -7,7 +7,7 @@ export function HeroSection() { return (
{/* Background Effects */}
@@ -25,60 +25,73 @@ export function HeroSection() { {/* Subheadline */} -

+

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

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

+ {/* Trust strip */} +

+ {/* Built at */} +
+

Built at

-
-
- ETHGlobal -
- ETHGlobal New York +
+ ETHGlobal New York
+

+ Built at +

- {/* Partners */} -
-

- Powered by industry leaders +

+ + {/* Powered by */} +
+

+ Powered by

-
-
-
- ENS -
- ENS +
+
+ ENS + ENS
-
- - Privy +
+ Privy
-
- - Safe +
+ + + Safe +
+

+ Powered by +

diff --git a/src/components/ens-name-checker/EnsInput.tsx b/src/components/ens-name-checker/EnsInput.tsx index 8aaf0c1..dbdfa11 100644 --- a/src/components/ens-name-checker/EnsInput.tsx +++ b/src/components/ens-name-checker/EnsInput.tsx @@ -1,7 +1,6 @@ -import { type ChangeEvent, useState } from 'react' +import type { ChangeEvent } from 'react' import { Input } from '@/components/ui/input' -import { cn } from '@/lib/utils' export const ENS_NAME_INPUT_ID = 'ens-name-input' @@ -11,37 +10,24 @@ interface EnsInputProps { } export function EnsInput({ ensName, setEnsName }: EnsInputProps) { - const [isFocused, setIsFocused] = useState(false) - return ( -
-
+ ) => + setEnsName( + event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') + ) + } + className="placeholder:text-muted-foreground/50 focus-visible:ring-primary/30 relative z-10 h-16 w-full rounded-[11px] border-0 bg-transparent px-6 pr-20 text-xl transition-colors focus-visible:ring-1 md:text-2xl" /> - -
- ) => - setEnsName( - event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') - ) - } - onFocus={() => setIsFocused(true)} - 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 +
) diff --git a/src/components/ens-name-checker/EnsNameChecker.tsx b/src/components/ens-name-checker/EnsNameChecker.tsx index 569a398..9895a63 100644 --- a/src/components/ens-name-checker/EnsNameChecker.tsx +++ b/src/components/ens-name-checker/EnsNameChecker.tsx @@ -94,25 +94,28 @@ export function EnsNameChecker() { const [ensName, setEnsName] = useState('') return ( -
-
- - {ready ? ( - - ) : ( - {}} - isAuthenticating={false} - /> - )} -
+
+ + {!ensName && ( +

+ Type a name to check .eth availability +

+ )} + {ready ? ( + + ) : ( + {}} + isAuthenticating={false} + /> + )}
) } diff --git a/src/components/ens-name-checker/EnsStatus.tsx b/src/components/ens-name-checker/EnsStatus.tsx index 9121feb..4cb09c3 100644 --- a/src/components/ens-name-checker/EnsStatus.tsx +++ b/src/components/ens-name-checker/EnsStatus.tsx @@ -26,7 +26,7 @@ export function EnsStatus({ isAuthenticating, }: EnsStatusProps) { return ( -
+
0 ? 'mt-4' : ''}> {normalizedName && isValidEnsName(ensName) && (
{isLoading ? ( @@ -89,7 +89,7 @@ export function EnsStatus({ ) : ( <> - Proceed to setup + Register )} diff --git a/src/style.css b/src/style.css index e1db8a4..7c7a803 100644 --- a/src/style.css +++ b/src/style.css @@ -227,6 +227,40 @@ } } +@property --ens-border-angle { + syntax: ''; + inherits: false; + initial-value: 0deg; +} + +@keyframes ens-border-orbit { + to { + --ens-border-angle: 360deg; + } +} + +.ens-input-shell { + border: 1px solid transparent; + background: + linear-gradient(var(--card), var(--card)) padding-box, + conic-gradient( + from var(--ens-border-angle), + var(--border) 0deg, + var(--border) 280deg, + var(--primary) 312deg, + var(--border) 344deg, + var(--border) 360deg + ) + border-box; + animation: ens-border-orbit 4.5s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .ens-input-shell { + animation: none; + } +} + .animate-blob { animation: blob 7s infinite; }