Integrate React components and update homepage layout: added Hero, Feature, Stats, Pricing, FAQ, Contact, and Footer sections; updated global styles and dependencies for React support.

src/components/hero235.tsx

@@ -0,0 +1,96 @@
+import { ArrowDown, BookOpen, LayoutGrid, Sparkles } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface Hero235Props {
+  className?: string;
+}
+
+const SERVICES = [
+  {
+    icon: Sparkles,
+    title: "Visual Identity",
+    description:
+      "We shape visual systems that blend craft and clarity to spark recognition and connection.",
+  },
+  {
+    icon: LayoutGrid,
+    title: "Interactive Experiences",
+    description:
+      "Experiences that tie design and technology together to tell your story in motion.",
+  },
+  {
+    icon: BookOpen,
+    title: "Workshops",
+    description:
+      "Hands-on sessions that adapt to your goals and help you grow with practical guidance.",
+  },
+];
+
+const Hero235 = ({ className }: Hero235Props) => {
+  return (
+    <section
+      className={cn(
+        "relative flex h-dvh items-center justify-center overflow-hidden bg-background py-32",
+        className,
+      )}
+    >
+      <div aria-hidden={true}>
+        <div className="absolute -right-0 -bottom-[30rem] size-[35rem] rounded-full bg-rose-400 opacity-40 blur-[5rem] md:-right-[2rem] md:-bottom-[50rem] md:size-[55rem] dark:opacity-20" />
+        <div className="absolute -right-[20rem] -bottom-[20rem] size-[35rem] rounded-full bg-sky-500 opacity-40 blur-[5rem] md:-right-[32rem] md:-bottom-[36rem] md:size-[55rem] dark:opacity-20" />
+        <div
+          className="pointer-events-none absolute inset-0 z-0 opacity-40"
+          style={{
+            backgroundImage:
+              "url(https://deifkwefumgah.cloudfront.net/shadcnblocks/block/noise.png)",
+            backgroundRepeat: "repeat",
+          }}
+        />
+      </div>
+      <div className="relative container flex h-full flex-col justify-between">
+        <div className="flex flex-1 items-center justify-center">
+          <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
+            <h1 className="text-4xl font-semibold tracking-tight text-balance text-foreground md:text-5xl lg:text-6xl">
+              Shadcnblocks. Digital craft with an eye for detail
+            </h1>
+            <p className="mt-8 max-w-xl text-pretty text-muted-foreground md:text-lg">
+              We build clear, thoughtful interfaces that work as well as they
+              look. If you want a partner who turns your vision into something
+              real, you&apos;re in the right place.
+            </p>
+            <Button size="lg" className="mt-10">
+              Explore our work
+              <ArrowDown className="shrink-0" aria-hidden />
+            </Button>
+          </div>
+        </div>
+        <div className="pt-16">
+          <div className="grid gap-12 lg:grid-cols-3 lg:gap-0">
+            {SERVICES.map((service) => {
+              const Icon = service.icon;
+              return (
+                <div
+                  key={service.title}
+                  className={cn(
+                    "flex flex-col border-l border-primary px-6 md:px-8",
+                  )}
+                >
+                  <Icon className="mb-4 size-6" aria-hidden />
+                  <h2 className="font-semibold text-foreground">
+                    {service.title}
+                  </h2>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    {service.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero235 };