From 30a984a6a8c27c8717bd97b5f019eafc1db82790 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 6 Jul 2026 01:36:30 +0000 Subject: [PATCH 1/4] feat: add display font, richer button variants, and scroll-reveal foundation - Self-host Space Grotesk variable font as the display face for headings - Upgrade Button variants (shadow/active states, xl size, premium shine CTA) - Add dot/grid background patterns, glow-border cards, nav underline, hero orbs, and float/pulse/gradient keyframes (reduced-motion aware) - Add Reveal component: IntersectionObserver-driven scroll entrance animation with stagger delays Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys --- package-lock.json | 10 ++ package.json | 1 + src/app/fonts/SpaceGroteskVariable.woff2 | Bin 0 -> 22288 bytes src/app/globals.css | 124 ++++++++++++++++++++++- src/app/layout.tsx | 9 +- src/components/ui/button.tsx | 16 +-- src/components/ui/reveal.tsx | 70 +++++++++++++ tailwind.config.ts | 21 ++++ 8 files changed, 240 insertions(+), 11 deletions(-) create mode 100644 src/app/fonts/SpaceGroteskVariable.woff2 create mode 100644 src/components/ui/reveal.tsx diff --git a/package-lock.json b/package-lock.json index e2dd6b0..0c096aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "AGPL-3.0-only", "dependencies": { "@fontsource-variable/inter": "^5.2.8", + "@fontsource-variable/space-grotesk": "^5.2.10", "@hookform/resolvers": "^5.2.2", "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-alert-dialog": "^1.1.15", @@ -1228,6 +1229,15 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource-variable/space-grotesk": { + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/@fontsource-variable/space-grotesk/-/space-grotesk-5.2.10.tgz", + "integrity": "sha512-yJQO/o35/hAP3CFnpdFTwQku2yzJOae2HIpBmqkOVoxhhXJaQP3g+b6Jrz7u+eI7A5ZdCIf88uMWpBJdFiGr5w==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@grpc/grpc-js": { "version": "1.9.16", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.16.tgz", diff --git a/package.json b/package.json index 1aa7d73..4a4e1e2 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ }, "dependencies": { "@fontsource-variable/inter": "^5.2.8", + "@fontsource-variable/space-grotesk": "^5.2.10", "@hookform/resolvers": "^5.2.2", "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-alert-dialog": "^1.1.15", diff --git a/src/app/fonts/SpaceGroteskVariable.woff2 b/src/app/fonts/SpaceGroteskVariable.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..0f3474ee8af2f8253225f3b41bf79be986a1ae13 GIT binary patch literal 22288 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 S8#S~?xaXqu;tAo2S~9su2vSq{fi^hG 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 literal 0 HcmV?d00001 diff --git a/src/app/globals.css b/src/app/globals.css index 5e3e402..d97a7f2 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -995,19 +995,25 @@ /* Typography Enhancement Classes */ .heading-hero { - @apply text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-foreground; + @apply font-display text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-foreground; } .heading-section { - @apply text-3xl font-bold sm:text-4xl text-foreground; + @apply font-display text-3xl font-bold sm:text-4xl text-foreground; } .heading-card { - @apply text-2xl font-bold text-foreground; + @apply font-display text-2xl font-bold text-foreground; } .heading-subsection { - @apply text-xl font-bold text-foreground; + @apply font-display text-xl font-bold text-foreground; +} + +/* Display font for all landing headings */ +h1, +h2 { + @apply font-display; } .text-body-lg { @@ -1104,3 +1110,113 @@ .grid-hero { @apply grid lg:grid-cols-2 gap-12 lg:gap-20 items-center; } + +/* ========================================================================== + VISUAL REVAMP UTILITIES - Patterns, glows and premium accents + ========================================================================== */ + +/* Dotted backdrop, fades out toward the edges */ +.bg-dot-pattern { + background-image: radial-gradient(hsl(var(--foreground) / 0.09) 1px, transparent 1px); + background-size: 24px 24px; + mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%); + -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%); +} + +/* Fine grid backdrop for section accents */ +.bg-grid-pattern { + background-image: + linear-gradient(hsl(var(--border) / 0.6) 1px, transparent 1px), + linear-gradient(90deg, hsl(var(--border) / 0.6) 1px, transparent 1px); + background-size: 44px 44px; + mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 75%); + -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 75%); +} + +/* Gradient border that lights up on hover (works on cards with overflow-hidden removed) */ +.card-glow-border { + position: relative; + border: 1px solid hsl(var(--border) / 0.6); + transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; +} + +.card-glow-border:hover { + border-color: hsl(var(--primary) / 0.45); + box-shadow: + 0 0 0 1px hsl(var(--primary) / 0.25), + 0 18px 40px -16px hsl(var(--primary) / 0.35); +} + +/* Sweeping sheen used by the premium CTA button */ +.btn-shine-overlay::after { + content: ""; + position: absolute; + inset: 0; + width: 40%; + background: linear-gradient( + 100deg, + transparent 20%, + hsl(0 0% 100% / 0.35) 50%, + transparent 80% + ); + transform: translateX(-150%) skewX(-15deg); + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .btn-shine-overlay::after { + animation: shine-sweep 2.75s ease-in-out infinite; + } +} + +@keyframes shine-sweep { + 0% { + transform: translateX(-150%) skewX(-15deg); + } + + 60%, + 100% { + transform: translateX(350%) skewX(-15deg); + } +} + +/* Underline slide-in for nav links */ +.nav-link-underline { + position: relative; +} + +.nav-link-underline::after { + content: ""; + position: absolute; + left: 0; + right: 100%; + bottom: -4px; + height: 2px; + border-radius: 9999px; + background: hsl(var(--primary)); + transition: right 0.25s ease-out; +} + +.nav-link-underline:hover::after, +.nav-link-underline:focus-visible::after { + right: 0; +} + +/* Soft ambient orb for hero backgrounds */ +.hero-orb { + position: absolute; + border-radius: 9999px; + background: radial-gradient(circle, hsl(var(--primary) / 0.28) 0%, transparent 70%); + filter: blur(60px); + pointer-events: none; +} + +/* Disable decorative motion for users who prefer reduced motion */ +@media (prefers-reduced-motion: reduce) { + .animate-float, + .animate-pulse-glow, + .animate-gradient-x, + .animate-shine { + animation: none !important; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 478a486..9659d3c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -23,6 +23,13 @@ const inter = localFont({ display: "swap", }); +const spaceGrotesk = localFont({ + src: "./fonts/SpaceGroteskVariable.woff2", + variable: "--font-display", + weight: "300 700", + display: "swap", +}); + export default function RootLayout({ children, }: Readonly<{ @@ -123,7 +130,7 @@ export default function RootLayout({ }} /> - + {children} diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index a27792f..05ccabf 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -6,24 +6,28 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", + default: + "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98]", + shine: + "relative overflow-hidden btn-shine-overlay bg-linear-to-r from-primary via-primary to-[hsl(20_90%_55%)] text-primary-foreground shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/35 hover:brightness-105 active:scale-[0.98]", destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", + "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-md active:scale-[0.98]", outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + "border border-primary/25 bg-background hover:border-primary hover:bg-primary/5 hover:text-primary active:scale-[0.98]", secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", + "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:scale-[0.98]", + ghost: "hover:bg-primary/10 hover:text-primary active:scale-[0.98]", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", + xl: "h-13 rounded-xl px-8 text-base", icon: "h-10 w-10", }, }, diff --git a/src/components/ui/reveal.tsx b/src/components/ui/reveal.tsx new file mode 100644 index 0000000..def4be2 --- /dev/null +++ b/src/components/ui/reveal.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { useEffect, useRef, useState, type ReactNode } from "react"; +import { cn } from "@/lib/utils"; + +interface RevealProps { + children: ReactNode; + className?: string; + /** Stagger delay in milliseconds applied once the element enters the viewport. */ + delay?: number; + /** Direction the content slides in from. */ + from?: "bottom" | "left" | "right" | "none"; +} + +const slideClasses: Record, string> = { + bottom: "motion-safe:translate-y-8", + left: "motion-safe:-translate-x-8", + right: "motion-safe:translate-x-8", + none: "", +}; + +/** + * Fades (and optionally slides) content in when it scrolls into view. + * Renders content immediately when IntersectionObserver is unavailable + * and skips movement for users who prefer reduced motion. + */ +export function Reveal({ children, className, delay = 0, from = "bottom" }: RevealProps) { + const ref = useRef(null); + const [visible, setVisible] = useState(false); + + useEffect(() => { + const node = ref.current; + if (!node) return; + + if (typeof IntersectionObserver === "undefined") { + setVisible(true); + return; + } + + const observer = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + setVisible(true); + observer.disconnect(); + break; + } + } + }, + { threshold: 0.05, rootMargin: "0px 0px -24px 0px" } + ); + + observer.observe(node); + return () => observer.disconnect(); + }, []); + + return ( +
+ {children} +
+ ); +} diff --git a/tailwind.config.ts b/tailwind.config.ts index ccae46c..ffb6fbe 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -23,6 +23,7 @@ export default { fontFamily: { body: ['var(--font-inter)', 'sans-serif'], sans: ['var(--font-inter)', 'sans-serif'], + display: ['var(--font-display)', 'var(--font-inter)', 'sans-serif'], mono: ['monospace'], }, colors: { @@ -87,6 +88,22 @@ export default { sm: 'calc(var(--radius) - 4px)', }, keyframes: { + shine: { + '0%': { transform: 'translateX(-150%) skewX(-15deg)' }, + '60%, 100%': { transform: 'translateX(250%) skewX(-15deg)' }, + }, + float: { + '0%, 100%': { transform: 'translateY(0)' }, + '50%': { transform: 'translateY(-12px)' }, + }, + 'pulse-glow': { + '0%, 100%': { opacity: '0.5', transform: 'scale(1)' }, + '50%': { opacity: '0.9', transform: 'scale(1.05)' }, + }, + 'gradient-x': { + '0%, 100%': { backgroundPosition: '0% 50%' }, + '50%': { backgroundPosition: '100% 50%' }, + }, 'accordion-down': { from: { height: '0', @@ -281,6 +298,10 @@ export default { }, }, animation: { + shine: 'shine 2.75s ease-in-out infinite', + float: 'float 6s ease-in-out infinite', + 'pulse-glow': 'pulse-glow 5s ease-in-out infinite', + 'gradient-x': 'gradient-x 6s ease-in-out infinite', 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', 'beam-1': 'beam-1 4s ease-in-out infinite', From dcb629d464a3077803fd2e96f5c25c905435f003 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 6 Jul 2026 01:36:48 +0000 Subject: [PATCH 2/4] feat: revamp homepage, analyzer, and wallet landing visuals - Homepage: animated hero gradient, dot-pattern backdrop, glow-border product cards, trust strip, closing CTA banner, 4-column footer - Testimonials: fix hardcoded light-only colors that broke dark mode; drop auto-rotate in favor of scroll-reveal stagger - Educational: replace hardcoded orange-* utilities with brand tokens - Analyzer: shine CTA + glow input in hero, numbered how-it-works steps with connector line, featured Free pricing plan, un-blur coming-soon cards, lucide check icons - Wallet: restructure hero text wall into checkmark bullets, apply reveal animations and token cleanup across sections - Fix primary-button foreground contrast on hero product cards Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys --- src/app/page.tsx | 2 + src/components/landing/AboutSection.tsx | 13 +- .../landing/AnalyzerAboutSection.tsx | 11 +- src/components/landing/DemoPreviewSection.tsx | 24 +- src/components/landing/EducationalSection.tsx | 247 +++++++++--------- .../landing/EnhancedHomeHeroSection.tsx | 114 +++++--- src/components/landing/FaqSection.tsx | 2 +- src/components/landing/FeaturesSection.tsx | 89 +++---- src/components/landing/FinalCtaSection.tsx | 61 +++++ src/components/landing/Footer.tsx | 166 +++++++----- src/components/landing/Header.tsx | 8 +- src/components/landing/HeroSection.tsx | 18 +- src/components/landing/HowItWorksSection.tsx | 54 ++-- src/components/landing/PricingSection.tsx | 102 +++++--- .../landing/TestimonialsSection.tsx | 82 +++--- src/components/landing/WalletAboutSection.tsx | 2 +- .../WalletBuiltForBitcoinersSection.tsx | 41 +-- src/components/landing/WalletFaqSection.tsx | 2 +- .../landing/WalletFeaturesSection.tsx | 48 ++-- src/components/landing/WalletHeroSection.tsx | 51 ++-- .../landing/WalletHowItWorksSection.tsx | 53 ++-- .../WalletSeamlessExperienceSection.tsx | 43 +-- .../landing/WalletSecuritySection.tsx | 46 ++-- 23 files changed, 750 insertions(+), 529 deletions(-) create mode 100644 src/components/landing/FinalCtaSection.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 154dd96..2288b78 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,6 +6,7 @@ import { EnhancedHomeHeroSection } from '@/components/landing/EnhancedHomeHeroSe import { EducationalSection } from '@/components/landing/EducationalSection'; import { AboutSection } from '@/components/landing/AboutSection'; import { TestimonialsSection } from '@/components/landing/TestimonialsSection'; +import { FinalCtaSection } from '@/components/landing/FinalCtaSection'; import { Footer } from '@/components/landing/Footer'; import { PrivacyPolicyModal } from '@/components/landing/PrivacyPolicyModal'; import { TermsOfServiceModal } from '@/components/landing/TermsOfServiceModal'; @@ -26,6 +27,7 @@ export default function Home() { +