Skip to content
6
SourceReport issue

Asme

Dark, liquid-glass marketing landing page: a full-viewport hero with a cross-fading background video, a frosted glass pill nav and an inline email form, then scroll-revealed about, featured-video, philosophy and services sections, closing on a multi-column footer. Framer Motion throughout, with a self-contained pure-black palette and Instrument Serif accents.

Preview

Installation

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

Code

components/templates/asme/asme.tsx
'use client';

import { MotionConfig } from 'motion/react';

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

import { About } from './about';
import { FeaturedVideo } from './featured-video';
import { inter, instrumentSerif } from './fonts';
import { Footer } from './footer';
import { Hero } from './hero';
import { Philosophy } from './philosophy';
import { Services } from './services';
import { AsmeStyles } from './styles';

const Asme = () => {
  return (
    <MotionConfig reducedMotion="user">
      <main
        className={cn(
          'asme',
          inter.variable,
          instrumentSerif.variable,
          'relative min-h-svh bg-background text-foreground antialiased',
        )}
        style={{
          fontFamily: 'var(--font-asme-sans), ui-sans-serif, sans-serif',
        }}
      >
        <AsmeStyles />
        <Hero />
        <About />
        <FeaturedVideo />
        <Philosophy />
        <Services />
        <Footer />
      </main>
    </MotionConfig>
  );
};

export default Asme;

Dependencies

shadcn registry

buttonfield

npm

motionlucide-react