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 "framer-motion";

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

export default function 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>
  );
}

Dependencies

npm

framer-motionlucide-react