add bg video_
This commit is contained in:
20
src/components/BackgroundVideo.jsx
Normal file
20
src/components/BackgroundVideo.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
'use client'; // Ensure this is a Client Component if using React hooks or state
|
||||
|
||||
import React from 'react';
|
||||
import clsx from 'clsx'
|
||||
|
||||
|
||||
export function BackgroundVideo({ className }) {
|
||||
return (
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className={`absolute inset-0 w-full h-full object-cover ${className}`}
|
||||
>
|
||||
<source src="/video/ourverse.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
);
|
||||
}
|
15
src/components/Gradient.jsx
Normal file
15
src/components/Gradient.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
// src/components/Gradient.jsx
|
||||
import React from 'react';
|
||||
|
||||
export function Gradient({ children, className = '' }) {
|
||||
return (
|
||||
<div
|
||||
className={`relative ${className}`}
|
||||
style={{
|
||||
background: 'linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(253,253,253,0) 100%)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
36
src/components/Homepage.jsx
Normal file
36
src/components/Homepage.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Button } from '@/components/Button';
|
||||
import { Container } from '@/components/Container';
|
||||
import { Gradient } from '@/components/Gradient';
|
||||
|
||||
export function Homepage() {
|
||||
return (
|
||||
<Gradient className="py-36 mb-20">
|
||||
<Container>
|
||||
{/* Background Video */}
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute inset-0 w-full h-full object-cover -z-10"
|
||||
>
|
||||
<source src="/videos/ourverse.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
<div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
|
||||
<h1 className="font-display text-5xl font-bold tracking-tighter text-blue-600 sm:text-7xl">
|
||||
<span className="sr-only">OurVerse - </span>A design conference for the dark side.
|
||||
</h1>
|
||||
<div className="mt-6 mb-12 space-y-6 font-display text-2xl tracking-tight text-blue-900">
|
||||
<p>ok</p>
|
||||
<p>ok</p>
|
||||
</div>
|
||||
<Button href="#" className="mt-10 w-30">
|
||||
Sign Up
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</Gradient>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user