Velorah

Dark, premium landing page for an electric RV brand: a full-screen video hero with liquid-glass navigation, a centered tagline, a split feature card with switchable tabs, an HLS streaming statement with a stats row, a video preorder call to action and a multi-column footer. Self-contained pure-black palette, Inter + Instrument Serif type.

Preview

Installation

npx shadcn@latest add https://hirael.com/r/velorah.json

Code

components/templates/velorah/velorah.tsx

"use client";

import { cn } from "@/lib/utils";

import { Cta } from "./cta";
import { Feature } from "./feature";
import { inter, instrumentSerif } from "./fonts";
import { Footer } from "./footer";
import { Hero } from "./hero";
import { Statement } from "./statement";
import { Tagline } from "./tagline";
import { VelorahStyles } from "./styles";

export default function Velorah() {
  return (
    <div
      className={cn(
        "velorah",
        inter.variable,
        instrumentSerif.variable,
        "relative min-h-svh bg-background text-foreground antialiased",
      )}
      style={{
        fontFamily: "var(--font-velorah-sans), ui-sans-serif, sans-serif",
      }}
    >
      <VelorahStyles />
      <Hero />
      <Tagline />
      <Feature />
      <Statement />
      <Cta />
      <Footer />
    </div>
  );
}

Dependencies

npm

hls.js