Initial commit

components/about-section.tsx

@@ -0,0 +1,72 @@
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Animate } from "@/components/animations/animate"
+import { Stagger } from "@/components/animations/stagger"
+import Image from "next/image"
+
+
+export function AboutSection() {
+  return (
+    <section className="w-full py-12 md:py-24 lg:py-32 bg-white dark:bg-gray-950" id="about">
+      <div className="container px-4 md:px-6 mx-auto">
+        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
+          <div className="flex flex-col justify-center space-y-4">
+            <div className="space-y-2">
+              <Animate animation="fadeInUp" delay={0.1}>
+                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-primary-900 dark:text-primary-400">
+                  La nostra storia
+                </h2>
+              </Animate>
+              <Animate animation="fadeInUp" delay={0.2}>
+                <p className="max-w-[600px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                  Fondata con passione verso la tecnologia e la risoluzione di problemi logici, TECHTONIC FAULT
+                  porta con sé anni di <em>expertise</em> nel settore.
+                </p>
+              </Animate>
+            </div>
+            <div className="space-y-4 text-gray-500 dark:text-gray-400">
+              {/* <Animate animation="fadeInUp" delay={0.3}>
+                <p>
+                  With over a decade of experience in software development, I've worked with businesses of all sizes
+                  to create custom solutions that drive growth and efficiency.
+                </p>
+              </Animate> */}
+              <Animate animation="fadeInUp" delay={0.4}>
+                <p>
+                  Il nostro approccio combina esperienza tecnica e una profonda comprensione dei bisogni del
+                  progetto, facendo in modo che esso possa raggiungere il massimo potenziale.
+                </p>
+              </Animate>
+              <Animate animation="fadeInUp" delay={0.5}>
+                <p>
+                  Crediamo nella creazione di relazioni durature con i clienti, e forniamo supporto continuativo
+                  al crescere dei loro bisogni tecnologici.
+                </p>
+              </Animate>
+            </div>
+            {/* <Animate animation="fadeInUp" delay={0.6}>
+              <div className="flex flex-col gap-2 min-[400px]:flex-row">
+                <Button className="bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600">
+                  Learn More
+                </Button>
+              </div>
+            </Animate> */}
+          </div>
+          {/* TODO: This */}
+          {/* <Animate animation="fadeInRight" delay={0.4}>
+            <div className="flex items-center justify-center">
+              <div className="relative w-full h-[350px] md:h-[400px] lg:h-[500px]">
+                <Image
+                  src="/placeholder.svg?height=500&width=500"
+                  alt="About Us Image"
+                  fill
+                  className="object-contain"
+                />
+              </div>
+            </div>
+          </Animate> */}
+        </div>
+      </div>
+    </section>
+  )
+}