;s;
This commit is contained in:
eric
257
app/globals.css
257
app/globals.css
@@ -1,53 +1,83 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #f4f7fb;
|
||||
--foreground: #0c1929;
|
||||
--muted: #5b6b7c;
|
||||
--accent: #0d9488;
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* Light theme — defaults (overridden by inline vars on <html> when toggling) */
|
||||
html[data-theme="light"],
|
||||
:root:not(.dark) {
|
||||
color-scheme: light;
|
||||
--background: #faf8f5;
|
||||
--foreground: #1a1614;
|
||||
--muted: #6b6560;
|
||||
--accent: #4f46e5;
|
||||
--accent-secondary: #ea580c;
|
||||
--accent-tertiary: #0284c7;
|
||||
--surface: rgba(255, 255, 255, 0.78);
|
||||
--surface-solid: #ffffff;
|
||||
--border: rgba(13, 148, 136, 0.14);
|
||||
--gradient-1: #0d9488;
|
||||
--gradient-2: #f59e0b;
|
||||
--gradient-3: #0284c7;
|
||||
--glow-sm: 0 8px 32px rgba(13, 148, 136, 0.2);
|
||||
--glow-lg: 0 24px 64px rgba(234, 88, 12, 0.18);
|
||||
--mesh-1: rgba(13, 148, 136, 0.32);
|
||||
--mesh-2: rgba(245, 158, 11, 0.26);
|
||||
--mesh-3: rgba(2, 132, 199, 0.22);
|
||||
--prose: #334155;
|
||||
--card-shadow: 0 4px 24px rgba(12, 25, 41, 0.07);
|
||||
--callout-bg: rgba(13, 148, 136, 0.08);
|
||||
--callout-border: rgba(13, 148, 136, 0.22);
|
||||
--accent-tertiary: #db2777;
|
||||
--surface: #ffffff;
|
||||
--surface-elevated: #ffffff;
|
||||
--border: #e8e4df;
|
||||
--border-strong: #d6d0c8;
|
||||
--gradient-1: #4f46e5;
|
||||
--gradient-2: #ea580c;
|
||||
--gradient-3: #db2777;
|
||||
--glow-sm: 0 8px 30px rgba(79, 70, 229, 0.12);
|
||||
--glow-lg: 0 20px 50px rgba(234, 88, 12, 0.14);
|
||||
--mesh-1: rgba(79, 70, 229, 0.14);
|
||||
--mesh-2: rgba(234, 88, 12, 0.1);
|
||||
--mesh-3: rgba(219, 39, 119, 0.08);
|
||||
--prose: #44403c;
|
||||
--card-shadow: 0 1px 2px rgba(26, 22, 20, 0.04), 0 8px 24px rgba(26, 22, 20, 0.06);
|
||||
--callout-bg: rgba(79, 70, 229, 0.06);
|
||||
--callout-border: rgba(79, 70, 229, 0.18);
|
||||
--cover-from: #3730a3;
|
||||
--cover-via: #7c2d12;
|
||||
--cover-to: #831843;
|
||||
--cover-glow: rgba(79, 70, 229, 0.35);
|
||||
--cta-from: #4338ca;
|
||||
--cta-via: #c2410c;
|
||||
--cta-to: #9d174d;
|
||||
--cta-text: #faf8f5;
|
||||
--cta-btn-bg: #faf8f5;
|
||||
--cta-btn-text: #3730a3;
|
||||
--read-max: 42rem;
|
||||
--header-h: 4.25rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #060d18;
|
||||
--foreground: #e8eef4;
|
||||
--muted: #8fa3b8;
|
||||
--accent: #2dd4bf;
|
||||
--accent-secondary: #fb923c;
|
||||
--accent-tertiary: #38bdf8;
|
||||
--surface: rgba(12, 25, 41, 0.72);
|
||||
--surface-solid: #0c1929;
|
||||
--border: rgba(45, 212, 191, 0.14);
|
||||
--gradient-1: #14b8a6;
|
||||
/* Dark theme */
|
||||
html[data-theme="dark"],
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
--background: #0f0e0d;
|
||||
--foreground: #f5f2ed;
|
||||
--muted: #a39e97;
|
||||
--accent: #a5b4fc;
|
||||
--accent-secondary: #fdba74;
|
||||
--accent-tertiary: #f9a8d4;
|
||||
--surface: #1a1816;
|
||||
--surface-elevated: #242120;
|
||||
--border: #2e2b28;
|
||||
--border-strong: #3d3935;
|
||||
--gradient-1: #818cf8;
|
||||
--gradient-2: #fb923c;
|
||||
--gradient-3: #38bdf8;
|
||||
--glow-sm: 0 8px 32px rgba(20, 184, 166, 0.22);
|
||||
--glow-lg: 0 24px 64px rgba(251, 146, 60, 0.16);
|
||||
--mesh-1: rgba(20, 184, 166, 0.35);
|
||||
--mesh-2: rgba(251, 146, 60, 0.28);
|
||||
--mesh-3: rgba(56, 189, 248, 0.25);
|
||||
--prose: #b8c5d4;
|
||||
--card-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
|
||||
--callout-bg: rgba(20, 184, 166, 0.1);
|
||||
--callout-border: rgba(45, 212, 191, 0.25);
|
||||
--gradient-3: #f472b6;
|
||||
--glow-sm: 0 8px 32px rgba(129, 140, 248, 0.18);
|
||||
--glow-lg: 0 20px 56px rgba(251, 146, 60, 0.12);
|
||||
--mesh-1: rgba(129, 140, 248, 0.12);
|
||||
--mesh-2: rgba(251, 146, 60, 0.1);
|
||||
--mesh-3: rgba(244, 114, 182, 0.08);
|
||||
--prose: #c9c2ba;
|
||||
--card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.35);
|
||||
--callout-bg: rgba(129, 140, 248, 0.08);
|
||||
--callout-border: rgba(165, 180, 252, 0.22);
|
||||
--cover-from: #312e81;
|
||||
--cover-via: #7c2d12;
|
||||
--cover-to: #701a3a;
|
||||
--cover-glow: rgba(129, 140, 248, 0.4);
|
||||
--cta-from: #1e1b4b;
|
||||
--cta-via: #431407;
|
||||
--cta-to: #500724;
|
||||
--cta-text: #f5f2ed;
|
||||
--cta-btn-bg: #f5f2ed;
|
||||
--cta-btn-text: #312e81;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -63,37 +93,23 @@
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
scroll-padding-top: calc(var(--header-h) + 1rem);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-dm-sans), system-ui, sans-serif;
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
/* Latitude grid + ambient mesh */
|
||||
.mesh-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(13, 148, 136, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(13, 148, 136, 0.04) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
.dark .mesh-bg {
|
||||
background-image:
|
||||
linear-gradient(rgba(45, 212, 191, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(45, 212, 191, 0.06) 1px, transparent 1px);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.mesh-bg::before,
|
||||
@@ -101,56 +117,56 @@ body {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(88px);
|
||||
animation: mesh-float 20s ease-in-out infinite alternate;
|
||||
filter: blur(100px);
|
||||
animation: mesh-float 24s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.mesh-bg::before {
|
||||
width: min(72vw, 540px);
|
||||
height: min(72vw, 540px);
|
||||
top: -14%;
|
||||
right: -6%;
|
||||
background: radial-gradient(circle, var(--mesh-1), transparent 68%);
|
||||
width: min(65vw, 480px);
|
||||
height: min(65vw, 480px);
|
||||
top: -10%;
|
||||
right: -5%;
|
||||
background: radial-gradient(circle, var(--mesh-1), transparent 70%);
|
||||
}
|
||||
|
||||
.mesh-bg::after {
|
||||
width: min(58vw, 420px);
|
||||
height: min(58vw, 420px);
|
||||
bottom: 8%;
|
||||
left: -12%;
|
||||
width: min(55vw, 400px);
|
||||
height: min(55vw, 400px);
|
||||
bottom: 5%;
|
||||
left: -8%;
|
||||
background: radial-gradient(circle, var(--mesh-2), transparent 70%);
|
||||
animation-delay: -7s;
|
||||
animation-delay: -8s;
|
||||
}
|
||||
|
||||
.mesh-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(76px);
|
||||
animation: mesh-float 24s ease-in-out infinite alternate-reverse;
|
||||
filter: blur(90px);
|
||||
animation: mesh-float 28s ease-in-out infinite alternate-reverse;
|
||||
}
|
||||
|
||||
.mesh-orb--sky {
|
||||
width: min(48vw, 340px);
|
||||
height: min(48vw, 340px);
|
||||
top: 42%;
|
||||
left: 38%;
|
||||
.mesh-orb--accent {
|
||||
width: min(42vw, 300px);
|
||||
height: min(42vw, 300px);
|
||||
top: 45%;
|
||||
left: 40%;
|
||||
background: radial-gradient(circle, var(--mesh-3), transparent 70%);
|
||||
}
|
||||
|
||||
@keyframes mesh-float {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(20px, -28px) scale(1.06);
|
||||
transform: translate(16px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(
|
||||
125deg,
|
||||
120deg,
|
||||
var(--gradient-1) 0%,
|
||||
var(--gradient-2) 45%,
|
||||
var(--gradient-2) 52%,
|
||||
var(--gradient-3) 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
@@ -161,10 +177,13 @@ body {
|
||||
.glass-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(16px);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.dark .glass-card {
|
||||
background: var(--surface-elevated);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -175,22 +194,21 @@ body {
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background: linear-gradient(
|
||||
125deg,
|
||||
120deg,
|
||||
var(--gradient-1),
|
||||
var(--gradient-2),
|
||||
var(--gradient-3)
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
box-shadow: var(--glow-sm);
|
||||
transition: transform 0.2s, box-shadow 0.2s, background-position 0.4s;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--glow-lg);
|
||||
background-position: 100% 50%;
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@@ -205,17 +223,39 @@ body {
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(12px);
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
|
||||
border: 1px solid var(--border-strong);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--glow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cta-panel {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--cta-from),
|
||||
var(--cta-via),
|
||||
var(--cta-to)
|
||||
);
|
||||
}
|
||||
|
||||
.cta-panel__title,
|
||||
.cta-panel__eyebrow {
|
||||
color: var(--cta-text);
|
||||
}
|
||||
|
||||
.cta-panel__body {
|
||||
color: color-mix(in srgb, var(--cta-text) 88%, transparent);
|
||||
}
|
||||
|
||||
.cta-panel__btn {
|
||||
background: var(--cta-btn-bg);
|
||||
color: var(--cta-btn-text);
|
||||
}
|
||||
|
||||
.font-display {
|
||||
font-family: var(--font-plus-jakarta), var(--font-dm-sans), system-ui, sans-serif;
|
||||
}
|
||||
@@ -224,17 +264,29 @@ body {
|
||||
animation: cover-float 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cover-card {
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
var(--cover-from),
|
||||
var(--cover-via),
|
||||
var(--cover-to)
|
||||
);
|
||||
}
|
||||
|
||||
.cover-glow {
|
||||
background: var(--cover-glow);
|
||||
}
|
||||
|
||||
@keyframes cover-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(-0.5deg);
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px) rotate(0.5deg);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hub marquee */
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
@@ -250,15 +302,14 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Reading progress */
|
||||
.reading-progress {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
left: 0;
|
||||
z-index: 40;
|
||||
height: 3px;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
background: var(--border);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -272,10 +323,8 @@ body {
|
||||
var(--gradient-3)
|
||||
);
|
||||
transition: width 0.1s linear;
|
||||
box-shadow: 0 0 12px color-mix(in srgb, var(--gradient-1) 50%, transparent);
|
||||
}
|
||||
|
||||
/* Prose */
|
||||
.prose-ebook {
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.88;
|
||||
@@ -341,7 +390,6 @@ body {
|
||||
border-bottom: 1px solid var(--callout-border);
|
||||
font-size: 0.98rem;
|
||||
color: var(--foreground);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.prose-ebook blockquote p {
|
||||
@@ -349,9 +397,8 @@ body {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* TOC active state */
|
||||
.toc-link--active {
|
||||
background: color-mix(in srgb, var(--gradient-1) 12%, transparent);
|
||||
background: color-mix(in srgb, var(--gradient-1) 14%, transparent);
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -366,8 +413,10 @@ body {
|
||||
.marquee-track,
|
||||
.mesh-bg::before,
|
||||
.mesh-bg::after,
|
||||
.mesh-orb {
|
||||
.mesh-orb,
|
||||
body {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import Script from "next/script";
|
||||
import { DM_Sans, Plus_Jakarta_Sans, Source_Serif_4 } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { brand, ebookMeta } from "@/content/ebook";
|
||||
import { ebookMeta } from "@/content/ebook";
|
||||
|
||||
const dmSans = DM_Sans({
|
||||
variable: "--font-dm-sans",
|
||||
@@ -39,19 +40,6 @@ export const metadata: Metadata = {
|
||||
},
|
||||
};
|
||||
|
||||
const themeScript = `
|
||||
(function () {
|
||||
try {
|
||||
var stored = localStorage.getItem('theme');
|
||||
var dark =
|
||||
stored === 'dark' ||
|
||||
(stored !== 'light' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
document.documentElement.classList.toggle('dark', dark);
|
||||
} catch (e) {}
|
||||
})();
|
||||
`;
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
@@ -63,12 +51,10 @@ export default function RootLayout({
|
||||
suppressHydrationWarning
|
||||
className={`${dmSans.variable} ${plusJakarta.variable} ${sourceSerif.variable} h-full scroll-smooth antialiased`}
|
||||
>
|
||||
<head>
|
||||
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
|
||||
</head>
|
||||
<body className="min-h-full font-sans">
|
||||
<Script src="/theme.js" strategy="beforeInteractive" />
|
||||
<div className="mesh-bg" aria-hidden>
|
||||
<div className="mesh-orb mesh-orb--sky" />
|
||||
<div className="mesh-orb mesh-orb--accent" />
|
||||
</div>
|
||||
{children}
|
||||
</body>
|
||||
|
||||
35
app/page.tsx
35
app/page.tsx
@@ -17,7 +17,7 @@ const hubMarquee = [...nomadHubs, ...nomadHubs];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<div className="relative min-h-screen bg-[var(--background)] text-[var(--foreground)]">
|
||||
<SiteHeader />
|
||||
|
||||
<main>
|
||||
@@ -25,11 +25,8 @@ export default function LandingPage() {
|
||||
<section className="relative overflow-hidden px-4 pb-14 pt-8 sm:px-6 sm:pb-20 sm:pt-12 lg:px-8 lg:pb-28 lg:pt-16">
|
||||
<div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2 lg:gap-20">
|
||||
<div className="order-2 text-center lg:order-1 lg:text-left">
|
||||
<p className="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent)] backdrop-blur-md">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--gradient-1)] opacity-60" />
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--gradient-1)]" />
|
||||
</span>
|
||||
<p className="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent)] shadow-sm">
|
||||
<span className="h-2 w-2 rounded-full bg-[var(--gradient-2)]" />
|
||||
Free ebook · Digital nomad · English
|
||||
</p>
|
||||
<h1 className="font-display text-[2.35rem] font-extrabold leading-[1.06] tracking-tight sm:text-5xl lg:text-[3.4rem]">
|
||||
@@ -67,7 +64,7 @@ export default function LandingPage() {
|
||||
{heroStats.map((stat) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className="rounded-xl border border-[var(--border)] bg-[var(--surface)]/60 px-3 py-3 text-center backdrop-blur-sm"
|
||||
className="rounded-xl border border-[var(--border)] bg-[var(--surface)] px-3 py-3 text-center shadow-sm"
|
||||
>
|
||||
<dt className="font-display text-lg font-bold text-[var(--foreground)]">
|
||||
{stat.value}
|
||||
@@ -88,7 +85,7 @@ export default function LandingPage() {
|
||||
|
||||
{/* Hub marquee */}
|
||||
<section
|
||||
className="border-y border-[var(--border)] bg-[var(--surface-solid)]/40 py-4"
|
||||
className="border-y border-[var(--border)] bg-[var(--surface)] py-4 dark:bg-[var(--surface-elevated)]"
|
||||
aria-label="Popular nomad hubs"
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
@@ -96,7 +93,7 @@ export default function LandingPage() {
|
||||
{hubMarquee.map((hub, i) => (
|
||||
<span
|
||||
key={`${hub.city}-${i}`}
|
||||
className="mx-1.5 inline-flex shrink-0 items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-sm backdrop-blur-sm"
|
||||
className="mx-1.5 inline-flex shrink-0 items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-sm shadow-sm"
|
||||
>
|
||||
<span className="font-semibold text-[var(--foreground)]">
|
||||
{hub.city}
|
||||
@@ -143,7 +140,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* Pillars */}
|
||||
<section className="border-y border-[var(--border)] bg-[var(--surface-solid)]/50 px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
|
||||
<section className="border-y border-[var(--border)] bg-[var(--surface)] px-4 py-16 dark:bg-[var(--surface-elevated)] sm:px-6 sm:py-24 lg:px-8">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--accent)]">
|
||||
@@ -250,7 +247,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<section className="border-t border-[var(--border)] bg-[var(--surface-solid)]/40 px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
|
||||
<section className="border-t border-[var(--border)] bg-[var(--background)] px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<p className="text-center text-xs font-semibold uppercase tracking-[0.2em] text-[var(--accent)]">
|
||||
FAQ
|
||||
@@ -266,29 +263,25 @@ export default function LandingPage() {
|
||||
|
||||
{/* CTA */}
|
||||
<section className="px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
|
||||
<div className="relative mx-auto max-w-6xl overflow-hidden rounded-3xl">
|
||||
<div className="cta-panel relative mx-auto max-w-6xl overflow-hidden rounded-3xl shadow-[var(--glow-lg)]">
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br from-teal-700 via-teal-600 to-sky-800 dark:from-teal-900 dark:via-teal-800 dark:to-slate-900"
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 fill-rule=%22evenodd%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.06%22%3E%3Cpath d=%22M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-80"
|
||||
className="absolute inset-0 bg-[radial-gradient(ellipse_at_80%_0%,rgba(255,255,255,0.12),transparent_55%)]"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="relative px-8 py-14 text-center sm:px-16 sm:py-20">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.2em] text-teal-200">
|
||||
<p className="cta-panel__eyebrow text-xs font-bold uppercase tracking-[0.2em]">
|
||||
Your next base starts here
|
||||
</p>
|
||||
<h2 className="mt-3 font-display text-2xl font-bold text-white sm:text-4xl">
|
||||
<h2 className="cta-panel__title mt-3 font-display text-2xl font-bold sm:text-4xl">
|
||||
Read the nomad playbook tonight
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-lg text-base text-teal-50/90 sm:text-lg">
|
||||
<p className="cta-panel__body mx-auto mt-4 max-w-lg text-base sm:text-lg">
|
||||
No signup. No paywall. Open on any device, switch themes for red-eye
|
||||
flights, and jump straight to visas or community.
|
||||
</p>
|
||||
<Link
|
||||
href="/read"
|
||||
className="mt-8 inline-flex h-12 items-center justify-center rounded-full bg-white px-10 text-sm font-bold text-teal-800 shadow-xl transition-transform hover:scale-[1.02] active:scale-[0.98]"
|
||||
className="cta-panel__btn mt-8 inline-flex h-12 items-center justify-center rounded-full px-10 text-sm font-bold shadow-xl transition-transform hover:scale-[1.02] active:scale-[0.98]"
|
||||
>
|
||||
Open {ebookMeta.title}
|
||||
</Link>
|
||||
|
||||
@@ -13,7 +13,7 @@ export const metadata = {
|
||||
|
||||
export default function ReadPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<div className="relative min-h-screen bg-[var(--background)] text-[var(--foreground)]">
|
||||
<SiteHeader ctaLabel="Home" ctaHref="/" showBack />
|
||||
<ReadingProgress />
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function ReadPage() {
|
||||
))}
|
||||
</article>
|
||||
|
||||
<footer className="mt-16 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-6 py-10 text-center backdrop-blur-md sm:mt-20">
|
||||
<footer className="glass-card mt-16 px-6 py-10 text-center sm:mt-20">
|
||||
<p className="font-display text-lg font-bold text-[var(--foreground)]">
|
||||
You've finished the trailhead
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user