forked from Mike/freno-dev
fix: product subdomain cleanup
This commit is contained in:
@@ -1,60 +1,49 @@
|
||||
/**
|
||||
* Life and Lineage — lineage subdomain landing page (task 08).
|
||||
* Life and Lineage — lineage subdomain landing page.
|
||||
*
|
||||
* Migrates the legacy `src/routes/marketing/life-and-lineage.tsx` page to the
|
||||
* `lineage.freno.me` root (vercel.json rewrites `lineage.freno.me/*` →
|
||||
* `/lineage/*`), and enriches it with feature highlights + a game-art strip.
|
||||
*
|
||||
* Site-awareness:
|
||||
* - `<PageHead>` reads `useSite()` → the lineage `titleSuffix`
|
||||
* (` | Life and Lineage`) + canonical `https://lineage.freno.me/` are
|
||||
* derived automatically (task 02); we pass only the base title here.
|
||||
* - The Google Play badge links to the **public browser path** `/downloads`
|
||||
* (subdomain-relative), which vercel rewrites to `/lineage/downloads`
|
||||
* (task 11). The App Store link is an absolute external URL, unchanged.
|
||||
* - `SimpleParallax` reuses the existing Cave parallax background — a
|
||||
* fitting "dark fantasy" ambience — and continues to work under the
|
||||
* subdomain because assets are served from the shared `/public` root.
|
||||
*
|
||||
* Auth: this page performs NO auth — Lineage's mobile JWT (`LINEAGE_JWT_SECRET`)
|
||||
* is for the mobile app's API calls, not the web landing page.
|
||||
* This intentionally preserves the original marketing-page structure: a single
|
||||
* full-viewport `SimpleParallax` Cave background with the app icon, title,
|
||||
* tagline, and store badges centered on screen. No sidebars, no scrollable
|
||||
* feature sections, and no extra content — the parallax effect depends on the
|
||||
* page being exactly one viewport tall. The persistent `SubdomainHeader`
|
||||
* sits sticky above the parallax backdrop so navigation is reachable on every
|
||||
* subdomain page.
|
||||
*/
|
||||
import { A } from "@solidjs/router";
|
||||
import { PageHead } from "~/components/PageHead";
|
||||
import SubdomainHeader from "~/components/SubdomainHeader";
|
||||
import SimpleParallax from "~/components/SimpleParallax";
|
||||
import DownloadOnAppStoreDark from "~/components/icons/DownloadOnAppStoreDark";
|
||||
import { For } from "solid-js";
|
||||
import {
|
||||
APP_STORE_URL,
|
||||
DOWNLOADS_HREF,
|
||||
APP_ICON_SRC,
|
||||
GOOGLE_PLAY_BADGE_SRC,
|
||||
SCREENSHOT_ASSETS,
|
||||
PAGE_META,
|
||||
FEATURES
|
||||
PAGE_META
|
||||
} from "~/routes/lineage/landing-content";
|
||||
|
||||
export default function LineageLandingPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHead title={PAGE_META.title} description={PAGE_META.description} />
|
||||
<SubdomainHeader />
|
||||
<SimpleParallax>
|
||||
<div class="flex h-full flex-col items-center justify-center px-4 text-white">
|
||||
{/* Hero */}
|
||||
<img
|
||||
src={APP_ICON_SRC}
|
||||
alt="Life and Lineage App Icon"
|
||||
height={128}
|
||||
width={128}
|
||||
class="object-cover object-center"
|
||||
/>
|
||||
<h1 class="mb-4 mt-4 text-center text-5xl font-bold">
|
||||
<div>
|
||||
<img
|
||||
src={APP_ICON_SRC}
|
||||
alt="Life and Lineage App Icon"
|
||||
height={128}
|
||||
width={128}
|
||||
class="object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<h1 class="mt-4 mb-4 text-center text-5xl font-bold">
|
||||
Life and Lineage
|
||||
</h1>
|
||||
<p class="mb-8 text-xl">A dark fantasy adventure</p>
|
||||
<p class="text-xl">A dark fantasy adventure</p>
|
||||
|
||||
{/* Store badges — App Store (external) + Google Play → /downloads */}
|
||||
<div class="flex flex-wrap items-center justify-center gap-4">
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-4">
|
||||
<a
|
||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
||||
href={APP_STORE_URL}
|
||||
@@ -75,68 +64,6 @@ export default function LineageLandingPage() {
|
||||
/>
|
||||
</A>
|
||||
</div>
|
||||
|
||||
{/* Feature highlights */}
|
||||
<section class="mt-16 w-full max-w-4xl">
|
||||
<h2 class="mb-6 text-center text-2xl font-semibold">
|
||||
Why players return
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<For each={FEATURES}>
|
||||
{(feature) => (
|
||||
<div class="bg-base/70 rounded-lg p-4 backdrop-blur-sm">
|
||||
<h3 class="mb-1 text-lg font-bold">{feature.title}</h3>
|
||||
<p class="text-sm text-subtext0">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Game art / screenshots strip */}
|
||||
<section class="mt-16 w-full max-w-4xl">
|
||||
<h2 class="mb-6 text-center text-2xl font-semibold">
|
||||
glimpses of the world
|
||||
</h2>
|
||||
<div class="flex flex-col items-center gap-6">
|
||||
<div class="flex flex-wrap items-center justify-center gap-6">
|
||||
<img
|
||||
src={SCREENSHOT_ASSETS.home}
|
||||
alt="Life and Lineage home"
|
||||
class="h-auto w-full max-w-sm rounded-lg shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
src={SCREENSHOT_ASSETS.shops}
|
||||
alt="Life and Lineage shops"
|
||||
class="h-auto w-full max-w-sm rounded-lg shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<video
|
||||
src={SCREENSHOT_ASSETS.preview}
|
||||
class="w-full max-w-2xl rounded-lg shadow-lg"
|
||||
controls
|
||||
muted
|
||||
playsinline
|
||||
preload="metadata"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Secondary CTA → per-subdomain downloads page */}
|
||||
<p class="mt-16 text-sm text-subtext0">
|
||||
Prefer a direct download?{" "}
|
||||
<A
|
||||
href={DOWNLOADS_HREF}
|
||||
class="underline transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
|
||||
>
|
||||
Visit the downloads page
|
||||
</A>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</SimpleParallax>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user