Source Report issue

Rivr

DeFi staking landing page for a fluid-asset protocol: a video hero on a rounded card with glass stat cards and a carved documentation corner, a metrics band, a bento feature grid, a video call to action and a light footer. Self-contained light palette, Helvetica system type, Framer Motion throughout.

Preview

Installation

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

Code

components/templates/rivr/rivr.tsx

'use client';

import { MotionConfig } from 'motion/react';

import { Cta } from './cta';
import { Features } from './features';
import { Footer } from './footer';
import { Hero } from './hero';
import { Metrics } from './metrics';
import { RivrStyles } from './styles';

const Rivr = () => {
  return (
    <div className="rivr relative min-h-svh bg-background text-foreground antialiased">
      <RivrStyles />
      <MotionConfig reducedMotion="user">
        <Hero />
        <Metrics />
        <Features />
        <Cta />
        <Footer />
      </MotionConfig>
    </div>
  );
};

export default Rivr;

Dependencies

shadcn registry

button

npm

motionlucide-react