48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import Link from 'next/link'
|
|
import { Button } from '@/components/ui/button'
|
|
import HeroVideoDialog from "@/components/ui/hero-video-dialog";
|
|
import Script from 'next/script'
|
|
|
|
interface HeroProps {
|
|
title: string
|
|
description: string
|
|
videoSrc: string
|
|
}
|
|
|
|
export default function Hero({ title, description, videoSrc }: HeroProps) {
|
|
return (
|
|
<section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
|
|
<div className="container mx-auto px-4 md:px-6">
|
|
<div className="flex flex-col items-center text-center">
|
|
<div className="space-y-4">
|
|
<h1 className="text-6xl font-bold tracking-tight">{title}</h1>
|
|
<p className="mx-auto max-w-[700px] text-lg">{description}</p>
|
|
</div>
|
|
<div className="flex space-x-4 mt-8">
|
|
<Link href="https://videolingo.io">
|
|
<Button className="rounded-lg" size="lg">
|
|
Try Now for Free
|
|
</Button>
|
|
</Link>
|
|
<Link href={'/docs/start'}>
|
|
<Button variant="outline" size="lg" className="opacity-80">
|
|
Go to Docs
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
{/* 视频演示组件 */}
|
|
<div className="w-full max-w-6xl mt-16 mb-16">
|
|
<HeroVideoDialog
|
|
animationStyle="from-center"
|
|
videoSrc={videoSrc}
|
|
thumbnailSrc="/images/demo.png"
|
|
thumbnailAlt="Hero Video"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Script src="https://www.unpkg.com/@heyform-inc/embed@latest/dist/index.umd.js" />
|
|
</section>
|
|
)
|
|
}
|