Initial commit

components/hero-section.tsx

@@ -0,0 +1,67 @@
+import styles from './hero-section.module.css'
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { ArrowRight } from "lucide-react"
+import Image from "next/image"
+import { Animate } from "@/components/animations/animate"
+import Link from "next/link"
+
+import { Anton } from "next/font/google"
+
+const anton = Anton({weight: "400", subsets: ["latin"], });
+
+export function HeroSection() {
+  return (
+    <section className="relative w-full py-12 md:py-24 lg:py-32 xl:py-48 overflow-hidden from-primary-950 via-primary-800 to-primary-900 dark:from-primary-950 dark:via-primary-900 dark:to-primary-950">
+      <div className="absolute inset-0 w-full h-full bg-gradient-to-br brightness-50">
+      </div>
+      <div className={`absolute inset-0 w-full h-full ${styles.gradient}`}>
+      </div>
+      <div className="absolute inset-0 w-full h-full">
+        <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
+      </div>
+      <div className="container px-4 md:px-6 mx-auto relative z-10">
+        <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+          <div className="flex flex-col justify-center space-y-4">
+            <div className="space-y-2">
+              <Animate animation="fadeInUp" delay={0.2}>
+                <h1 className={`text-3xl font-bold sm:text-5xl xl:text-6xl/none text-white [text-transform:uppercase] ${anton.className}`}>
+                  Where <em>Innovation</em> Meets <em>Impact</em>
+                </h1>
+              </Animate>
+              <Animate animation="fadeInUp" delay={0.3}>
+                <p className="max-w-[600px] text-gray-200 md:text-xl">
+                  Forniamo servizi che ti permetteranno di concentrarti sul tuo business:
+                  al software ci pensiamo noi.
+                </p>
+              </Animate>
+            </div>
+            <Animate animation="fadeInUp" delay={0.4}>
+              <div className="flex flex-col gap-2 min-[400px]:flex-row">
+                <Button asChild size="lg" className="bg-white text-primary-900 hover:bg-gray-200">
+                  <Link href="/#contact">Contattaci <ArrowRight className="ml-2 h-4 w-4" /></Link>
+                </Button>
+                <Button asChild size="lg" variant="outline" className="border-white text-black dark:text-white hover:bg-white/60">
+                  <Link href="/#projects">Sfoglia i nostri progetti</Link>
+                </Button>
+              </div>
+            </Animate>
+          </div>
+          <Animate animation="fadeInRight" delay={0.5}>
+            <div className="flex items-center justify-center">
+              <div className="relative w-full h-[350px] md:h-[400px] lg:h-[500px]">
+                <Image
+                  src="/hero.png?height=500&width=500"
+                  alt="Immagine di copertina"
+                  fill
+                  className="object-contain"
+                  priority
+                />
+              </div>
+            </div>
+          </Animate>
+        </div>
+      </div>
+    </section>
+  )
+}