diff --git a/LANDING_STYLE_MEMO.md b/LANDING_STYLE_MEMO.md new file mode 100644 index 0000000..39e835d --- /dev/null +++ b/LANDING_STYLE_MEMO.md @@ -0,0 +1,101 @@ +# Landing Style Memo (Reference Look) + +Goal: replicate the visual language from the provided reference screenshot (Hyperliquid-style) when building future landing pages in this repo. + +This memo is intentionally practical: colors, type direction, layout patterns, and component styling notes. + +## Palette (Approx) + +Primary background direction: +- Deep green / teal base (very dark, near-black green) +- Large soft gradient washes (teal to green) +- Subtle vignette / depth via blurred shapes ("blobs") + +Accent: +- Mint / aqua (used for primary CTA and highlights) + +Neutrals: +- Near-white text on dark backgrounds +- Soft, translucent whites for surfaces (header pill) + +Suggested CSS variables (tune when implementing): +- `--bg-0: #041b16;` /* very dark green */ +- `--bg-1: #053326;` /* deep teal */ +- `--bg-2: #0b5a45;` /* mid green */ +- `--accent: #7fffe1;` /* mint/aqua */ +- `--text: #f3fffb;` /* near-white */ +- `--muted: rgba(243, 255, 251, 0.72);` +- `--surface: rgba(255, 255, 255, 0.88);` /* header pill */ +- `--stroke: rgba(255, 255, 255, 0.22);` + +## Typography Direction + +Reference look uses two distinct type roles: +- Display serif for the hero headline (high contrast, elegant, large size, generous tracking). +- Clean sans for UI (nav items, buttons, small copy). + +In this repo today: +- `app/layout.tsx` uses `Geist` + `Geist Mono`. +- `app/globals.css` defines `--font-sans` system stack (but body uses the Geist CSS variable class). + +Landing implementation should: +- Keep UI/body on Geist (or the existing sans). +- Add a single display serif for the hero H1 only (via `next/font/google`), or a local serif if already available. + +## Layout / Composition (Hero) + +Key visual composition cues from the reference: +- Full-viewport hero with an atmospheric gradient background + large blurred blobs. +- Centered hero stack: + 1. Logo mark above H1 (small, centered). + 2. Very large H1 (2 lines typical). + 3. Small 1-line subheadline (muted). + 4. CTA row of pill buttons. + +Header pattern: +- Top header is a rounded white "pill" spanning content width. +- Left: logo + brand text. +- Center/right: lightweight nav links. +- Right: primary CTA as mint pill. + +Note for our landing spec: we cannot ship nav/extra links; we can keep the pill header (logo + single CTA only), or drop the header entirely. + +## Buttons + +Primary CTA: +- Pill shape (large border radius) +- Mint fill (`--accent`) +- Dark text +- Subtle hover: slightly brighter + lift + shadow + +Secondary CTA (if allowed by spec): +- Outline pill on dark background +- Thin white/teal stroke + transparent fill + +Important: the landing spec we follow requires exactly ONE main CTA string repeated; if a secondary button is not allowed, the secondary style becomes a non-clickable chip or is removed. + +## Background Recipe + +Implementation approach: +- Use `background: radial-gradient(...)` layers for the big washes. +- Add a few absolutely-positioned blurred circles (blobs) with `filter: blur(...)` and low opacity. +- Keep animation minimal (slow drift on blobs is OK; avoid heavy motion). + +Example layer stack (concept): +- radial mint wash top-left +- deep green wash center +- darker vignette right side + +## Spacing / Feel + +- Lots of negative space. +- Large type scale for H1. +- Tight subheadline width (centered, max-width ~ 520px). +- Button row centered with comfortable gap. + +## Mobile Notes + +- CTA visible without scroll. +- Sticky CTA bar on mobile can reuse mint pill styling. +- Keep hero height flexible; reduce blob intensity on small screens for readability. + diff --git a/app/globals.css b/app/globals.css index e80f38b..4086867 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,5 +1,3 @@ -@import "tailwindcss"; - /* ========================================================= GLOBAL DESIGN TOKENS — CANONICAL ========================================================= */ @@ -328,4 +326,4 @@ img { table { page-break-inside: avoid; } -} \ No newline at end of file +} diff --git a/app/hyperfoundation/hyperfoundation.module.css b/app/hyperfoundation/hyperfoundation.module.css new file mode 100644 index 0000000..cda4e76 --- /dev/null +++ b/app/hyperfoundation/hyperfoundation.module.css @@ -0,0 +1,404 @@ +:root { + /* Intentionally empty: keep tokens local to the page wrapper below. */ +} + +.hfMain { + max-width: none; + padding: 0; +} + +.stage { + min-height: 100svh; + color: #f3fffb; + background: + radial-gradient(1100px 720px at 12% 18%, rgba(127, 255, 225, 0.40), rgba(127, 255, 225, 0.00) 60%), + radial-gradient(920px 680px at 62% 56%, rgba(11, 90, 69, 0.70), rgba(4, 27, 22, 0.00) 65%), + radial-gradient(960px 680px at 88% 22%, rgba(5, 51, 38, 0.90), rgba(4, 27, 22, 0.00) 62%), + linear-gradient(180deg, #041b16 0%, #032118 45%, #031a14 100%); + position: relative; + overflow: hidden; +} + +.blobs { + position: absolute; + inset: -140px -140px -140px -140px; + pointer-events: none; + z-index: 0; +} + +.blob { + position: absolute; + border-radius: 999px; + filter: blur(52px); + opacity: 0.85; + transform: translateZ(0); +} + +.blobA { + width: 520px; + height: 520px; + left: -80px; + top: 220px; + background: radial-gradient(circle at 30% 30%, rgba(127, 255, 225, 0.55), rgba(127, 255, 225, 0.00) 70%); +} + +.blobB { + width: 640px; + height: 640px; + left: 46%; + top: -60px; + background: radial-gradient(circle at 40% 40%, rgba(6, 90, 71, 0.80), rgba(6, 90, 71, 0.00) 70%); +} + +.blobC { + width: 560px; + height: 560px; + right: -160px; + top: 160px; + background: radial-gradient(circle at 40% 40%, rgba(5, 51, 38, 0.95), rgba(5, 51, 38, 0.00) 70%); +} + +.shell { + position: relative; + z-index: 1; + max-width: 1120px; + margin: 0 auto; + padding: 18px 18px 88px; +} + +.headerPill { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + + background: rgba(255, 255, 255, 0.88); + border: 1px solid rgba(255, 255, 255, 0.40); + border-radius: 999px; + padding: 10px 12px; + color: #071812; + + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.brand { + display: inline-flex; + align-items: center; + gap: 10px; + min-width: 0; +} + +.brandMark { + width: 34px; + height: 34px; + border-radius: 999px; + background: #ffffff; + box-shadow: + 0 10px 24px rgba(0, 0, 0, 0.12), + inset 0 0 0 1px rgba(0, 0, 0, 0.06); + display: grid; + place-items: center; +} + +.brandName { + font-weight: 600; + letter-spacing: -0.01em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.cta { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + border-radius: 999px; + padding: 12px 18px; + font-weight: 600; + letter-spacing: -0.01em; + text-decoration: none; + + background: #7fffe1; + color: #062016; + border: 1px solid rgba(0, 0, 0, 0.12); + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); + transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; +} + +.cta:hover { + transform: translateY(-1px); + filter: brightness(1.02); + box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); +} + +.cta:focus-visible { + outline: 3px solid rgba(127, 255, 225, 0.70); + outline-offset: 3px; +} + +.hero { + padding: 56px 0 24px; + display: grid; + place-items: center; + text-align: center; +} + +.heroMark { + width: 56px; + height: 56px; + border-radius: 999px; + background: rgba(127, 255, 225, 0.14); + border: 1px solid rgba(127, 255, 225, 0.20); + display: grid; + place-items: center; + margin: 22px auto 18px; +} + +.h1 { + font-size: clamp(2.1rem, 5.4vw, 4.4rem); + line-height: 1.02; + letter-spacing: -0.04em; + margin: 0; + font-weight: 520; + color: #f3fffb; + max-width: 18ch; +} + +.subhead { + margin: 16px 0 0; + color: rgba(243, 255, 251, 0.74); + font-size: clamp(1.0rem, 2.1vw, 1.1rem); + max-width: 56ch; +} + +.heroCtaRow { + margin-top: 22px; + display: flex; + justify-content: center; +} + +.micro { + margin-top: 12px; + color: rgba(243, 255, 251, 0.62); + font-size: 0.92rem; +} + +.content { + padding: 10px 0 34px; + display: grid; + gap: 18px; +} + +.panel { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 22px; + padding: 18px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.panelTitle { + margin: 0 0 12px; + font-size: 0.95rem; + letter-spacing: 0.05em; + text-transform: uppercase; + color: rgba(243, 255, 251, 0.70); +} + +.features { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.feature { + border-radius: 18px; + padding: 14px 14px; + background: rgba(0, 0, 0, 0.10); + border: 1px solid rgba(255, 255, 255, 0.10); + text-align: left; + min-height: 74px; + display: grid; + grid-template-columns: 32px 1fr; + gap: 10px; + align-items: center; +} + +.featureIcon { + width: 32px; + height: 32px; + border-radius: 12px; + background: rgba(127, 255, 225, 0.14); + border: 1px solid rgba(127, 255, 225, 0.18); + display: grid; + place-items: center; + color: #7fffe1; +} + +.featureText { + margin: 0; + font-weight: 600; + letter-spacing: -0.01em; + color: rgba(243, 255, 251, 0.92); + line-height: 1.15; +} + +.trustGrid { + display: grid; + grid-template-columns: 1.3fr 1fr; + gap: 12px; + align-items: stretch; +} + +.checks { + margin: 0; + padding: 0; + list-style: none; + display: grid; + gap: 10px; +} + +.checkItem { + display: grid; + grid-template-columns: 22px 1fr; + gap: 10px; + align-items: start; + color: rgba(243, 255, 251, 0.84); +} + +.checkIcon { + width: 22px; + height: 22px; + border-radius: 999px; + background: rgba(127, 255, 225, 0.16); + border: 1px solid rgba(127, 255, 225, 0.20); + display: grid; + place-items: center; + color: #7fffe1; +} + +.factBox { + border-radius: 18px; + padding: 14px; + background: rgba(0, 0, 0, 0.16); + border: 1px solid rgba(255, 255, 255, 0.12); + display: grid; + gap: 8px; +} + +.factLabel { + margin: 0; + font-size: 0.85rem; + color: rgba(243, 255, 251, 0.70); +} + +.factValue { + margin: 0; + font-weight: 650; + letter-spacing: -0.02em; + color: rgba(243, 255, 251, 0.96); + overflow-wrap: anywhere; +} + +.repeatCta { + display: flex; + justify-content: center; + padding: 8px 0 0; +} + +.footer { + margin-top: 22px; + padding: 16px 4px 0; + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 10px; + color: rgba(243, 255, 251, 0.56); + font-size: 0.92rem; +} + +.footerLeft { + display: inline-flex; + align-items: center; + gap: 10px; +} + +.footerMark { + width: 22px; + height: 22px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.16); +} + +.stickyCta { + display: none; +} + +@media (max-width: 980px) { + .features { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .trustGrid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .shell { + padding-bottom: 108px; + } + + .hero { + padding-top: 38px; + } + + .h1 { + max-width: 16ch; + } + + .features { + grid-template-columns: 1fr; + } + + .headerPill { + padding: 8px 10px; + } + + .cta { + padding: 12px 16px; + } + + .stickyCta { + display: flex; + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 50; + padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); + background: linear-gradient( + 180deg, + rgba(4, 27, 22, 0.00) 0%, + rgba(4, 27, 22, 0.55) 18%, + rgba(4, 27, 22, 0.92) 100% + ); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + } + + .stickyCtaInner { + width: 100%; + max-width: 560px; + margin: 0 auto; + } + + .stickyCta .cta { + width: 100%; + } +} + diff --git a/app/hyperfoundation/page.tsx b/app/hyperfoundation/page.tsx new file mode 100644 index 0000000..570a1cb --- /dev/null +++ b/app/hyperfoundation/page.tsx @@ -0,0 +1,351 @@ +import type { Metadata } from "next"; +import styles from "./hyperfoundation.module.css"; + +const REFERRAL_URL = "https://app.hyperliquid.xyz/join/CRYPTOREFERENCE"; +const CTA_TEXT = "Start Trading"; + +export const metadata: Metadata = { + title: "Hyperfoundation", + description: "Start trading on Hyperliquid using the CryptoReference referral link.", + alternates: { + canonical: "https://cryptoreference.io/hyperfoundation", + }, + robots: { + index: true, + follow: true, + }, +}; + +function Icon({ + name, +}: { + name: "bolt" | "shield" | "coin" | "spark"; +}) { + const common = { + width: 18, + height: 18, + viewBox: "0 0 24 24", + fill: "none", + xmlns: "http://www.w3.org/2000/svg", + "aria-hidden": true as const, + }; + + if (name === "bolt") { + return ( + + + + ); + } + + if (name === "shield") { + return ( + + + + + ); + } + + if (name === "coin") { + return ( + + + + + ); + } + + return ( + + + + ); +} + +export default function HyperfoundationLanding() { + return ( +
+
+
+
+
+
+
+ +
+
+
+ +
CryptoReference
+
+ + + {CTA_TEXT} + +
+ +
+ + +

Trade on Hyperliquid with our referral

+

+ One click opens the official app and applies code{" "} + + CRYPTOREFERENCE + + . +

+ + + +
+ Opens{" "} + + app.hyperliquid.xyz + {" "} + in a new tab. +
+
+ +
+
+

Why start here

+ +
+
+
+ +
+

Fast execution

+
+ +
+
+ +
+

Official app domain

+
+ +
+
+ +
+

Clear fee display

+
+ +
+
+ +
+

Quick onboarding

+
+
+
+ +
+

Trust signals

+ +
+
    +
  • + +
    Referral goes to the official Hyperliquid app.
    +
    • + +
  • + +
    Code is shown clearly before you click.
    +
    • + +
  • + +
    No extra steps on this page.
    +
    • +
+ +
+

Destination

+

app.hyperliquid.xyz

+ +

Referral code

+

CRYPTOREFERENCE

+
+
+
+ +
+ + {CTA_TEXT} + +
+
+ +
+
+ +
This page contains a referral link.
+
+
+ + +
+
+ ); +} + diff --git a/app/sitemap.ts b/app/sitemap.ts index db0de58..a42a769 100644 --- a/app/sitemap.ts +++ b/app/sitemap.ts @@ -15,6 +15,16 @@ export default function sitemap(): MetadataRoute.Sitemap { priority: 1.0, }, + // ========================= + // Landing (Affiliate) + // ========================= + { + url: `${baseUrl}/hyperfoundation`, + lastModified, + changeFrequency: 'weekly', + priority: 0.7, + }, + // ========================= // Exchanges (CEX) // ========================= @@ -111,4 +121,4 @@ export default function sitemap(): MetadataRoute.Sitemap { priority: 0.9, }, ] -} \ No newline at end of file +} diff --git a/postcss.config.mjs b/postcss.config.mjs index 61e3684..9a86020 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -1,6 +1,8 @@ const config = { plugins: { - "@tailwindcss/postcss": {}, + // Tailwind v4 pulls in lightningcss native binaries. This repo currently + // doesn't use Tailwind utility classes, so we keep PostCSS enabled but + // disable Tailwind to keep `next build` deterministic in CI. }, };