Hero Sections

1import { Sun } from "lucide-react";
2 
3import { Button } from "@/components/ui/button";
4import { Badge } from "@/components/ui/badge";
5import { Card, CardContent } from "@/components/ui/card";
6import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
7 
8export default function HeroSection() {
9  return (
10    <section className="mx-auto w-full max-w-7xl px-6 lg:py-20">
11      <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
12        <div className="space-y-8">
13          <Badge
14            variant="outline"
15            className="inline-flex items-center gap-2 rounded-full px-2 py-1">
16            <Sun className="size-4" />
17            2.0 version is here
18          </Badge>
19 
20          <div className="mx-auto max-w-xl space-y-6 text-center lg:mx-0 lg:text-start">
21            <h1 className="text-5xl lg:text-6xl">
22              <span>Welcome to the</span> <br />
23              <span className="text-muted-foreground italic">innovation</span>
24              <span className="text-muted-foreground not-italic"> oasis</span>
25            </h1>
26 
27            <p className="text-muted-foreground text-lg leading-relaxed">
28              Step into our innovation oasis, where groundbreaking ideas bloom, and every click is a
29              step into a world of endless possibilities.
30            </p>
31          </div>
32 
33          <div className="flex justify-center gap-4 lg:justify-start">
34            <Button size="lg" className="rounded-full">
35              Get Started
36            </Button>
37            <Button size="lg" variant="outline" className="rounded-full">
38              Watch Demo
39            </Button>
40          </div>
41        </div>
42 
43        <div className="grid grid-cols-2 gap-6 space-y-6">
44          <div className="space-y-6">
45            <Card className="mt-8 overflow-hidden border-none p-0 shadow-none">
46              <img
47                src="https://images.pexels.com/photos/4386321/pexels-photo-4386321.jpeg?auto=compress&cs=tinysrgb&w=800"
48                alt="Mobile app"
49                className="aspect-4/3 w-full object-cover"
50              />
51            </Card>
52            <Card className="bg-muted aspect-4/3 border-none shadow-none">
53              <CardContent className="flex h-full flex-col justify-end">
54                <div>
55                  <div className="mb-2 text-4xl">27k+</div>
56                  <div className="text-muted-foreground">Raised by startups</div>
57                </div>
58              </CardContent>
59// … truncated