Dot Grid

1"use client";
2
3import React from "react";
4import { Button } from "@/components/ui/button";
5import { motion } from "framer-motion";
6
7export function Hero() {
8  return (
9    <section className="relative w-full py-16 md:py-32 overflow-hidden bg-background">
10      {/* Background Glow */}
11      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] md:w-[500px] h-[300px] md:h-[500px] bg-primary/20 rounded-full blur-[80px] md:blur-[120px] -z-10" />
12
13      <div className="container px-4 sm:px-6 mx-auto text-center space-y-8">
14        <motion.div
15          initial={{ opacity: 0, y: 20 }}
16          animate={{ opacity: 1, y: 0 }}
17          transition={{ duration: 0.5 }}
18          className="inline-flex items-center rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-[12px] sm:text-sm font-medium text-primary"
19        >
20          <span className="flex h-2 w-2 rounded-full bg-primary mr-2" />
21          New Component Library Released
22        </motion.div>
23
24        <motion.h1
25          initial={{ opacity: 0, y: 20 }}
26          animate={{ opacity: 1, y: 0 }}
27          transition={{ duration: 0.5, delay: 0.1 }}
28          className="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tighter leading-[1.1]"
29        >
30          Build Faster with <br className="hidden sm:block" />
31          <span className="text-primary italic">Premium Blocks</span>
32        </motion.h1>
33
34        <motion.p
35          initial={{ opacity: 0, y: 20 }}
36          animate={{ opacity: 1, y: 0 }}
37          transition={{ duration: 0.5, delay: 0.2 }}
38          className="max-w-2xl mx-auto text-base sm:text-lg md:text-xl text-muted-foreground font-light leading-relaxed px-2 sm:px-0"
39        >
40          A curated collection of secondary-to-none UI components and blocks
41          built with Tailwind CSS and Framer Motion. Shadcn compatible.
42        </motion.p>
43
44        <motion.div
45          initial={{ opacity: 0, y: 20 }}
46          animate={{ opacity: 1, y: 0 }}
47          transition={{ duration: 0.5, delay: 0.3 }}
48          className="flex flex-col sm:flex-row items-center justify-center gap-4"
49        >
50          <Button size="lg" className="h-12 w-full sm:w-auto px-8 text-base">
51            Get Started Free
52          </Button>
53          <Button size="lg" variant="outline" className="h-12 w-full sm:w-auto px-8 text-base">
54            View Components
55          </Button>
56        </motion.div>
57
58// … truncated