Hero Video 1
Solace UI hero video component variation 1.
src/registry/components/hero-video/one/index.tsx
import { HeroVideoDefault } from "@/registry/components/hero-video/hero-video-default";
import React from "react";
export default function HeroVideoOne() {
return (
<div className="flex flex-col items-center justify-center py-12">
<HeroVideoDefault
className="dark:hidden block"
videoSrc="https://www.youtube.com/embed/cjZjqP3EqdE?si=wXqy8Rpcnwll8Grr&start=360"
thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
thumbnailAlt="Hero Video"
enableSound={false}
/>
<HeroVideoDefault
className="hidden dark:block"
videoSrc="https://www.youtube.com/embed/cjZjqP3EqdE?si=wXqy8Rpcnwll8Grr&start=360"
thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
thumbnailAlt="Hero Video"
enableSound={false}
/>
</div>
);
}
- Where it goes
- hero
DependenciesBundle weight · medium
- animation
- motion
- icons
- lucide-react