Source Report issue

Mindloop

Dark, monochrome newsletter landing page: a full-screen video hero with an inline subscribe form, an answer-engine section, scroll-revealed mission copy, a four-up feature grid and a streaming-video call to action. Framer Motion throughout, with a self-contained pure-black palette and liquid-glass accents.

Preview

Installation

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

Code

components/templates/mindloop/mindloop.tsx

'use client';

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

import { Cta } from './cta';
import { Footer } from './footer';
import { inter, instrumentSerif } from './fonts';
import { Hero } from './hero';
import { Mission } from './mission';
import { Navbar } from './navbar';
import { Search } from './search';
import { Solution } from './solution';
import { MindloopStyles } from './styles';

const Mindloop = () => {
  return (
    <div
      className={cn(
        'mindloop',
        inter.variable,
        instrumentSerif.variable,
        'relative min-h-svh bg-background text-foreground antialiased',
      )}
      style={{
        fontFamily: 'var(--font-mindloop-sans), ui-sans-serif, sans-serif',
      }}
    >
      <MindloopStyles />
      <Navbar />
      <Hero />
      <Search />
      <Mission />
      <Solution />
      <Cta />
      <Footer />
    </div>
  );
};

export default Mindloop;

Dependencies

shadcn registry

buttonfield

npm

motion