Source Report issue

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';

const 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>
  );
};

export default Velorah;

Dependencies

shadcn registry

buttontoggle-group