Add TypeScript type definitions for React and React DOM; update Hero235 component with new background styles; modify homepage title and include About19 component.

src/components/about19.tsx

@@ -0,0 +1,58 @@
+
+import { cn } from "@/lib/utils";
+
+interface About19Props {
+  className?: string;
+}
+
+const About19 = ({ className }: About19Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-1">
+          <div className="col-span-4 h-120">
+            <img
+              src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri4/img2.png"
+              alt=""
+              className="h-full w-full object-cover rounded-xl shadow-md"
+            />
+          </div>
+
+          <div className="col-span-3 ml-auto max-w-4xl space-y-15 lg:pl-15">
+            <h1 className="text-2xl font-medium tracking-tight">
+              We are a team of creators, thinkers, and builders who believe in
+              crafting experiences that truly connect. Our story is built on
+              passion, innovation, and the drive to bring meaningful ideas to
+              life.
+            </h1>
+            <p className="text-base text-foreground/40 lg:text-lg">
+              We ask: What’s the goal? Who’s it for? How do we make it
+              effortless? we begin with why, who, and how to make it better.
+            </p>
+            <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
+              <p className="flex-1 text-sm text-foreground/40">
+                We aim to bring diverse minds together, turning ideas into
+                experiences that matter.
+              </p>
+              <div className="flex w-fit items-center gap-2">
+                <img
+                  src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/avatar1.png"
+                  className="size-10"
+                  alt="avatr"
+                />
+                <div>
+                  <h3 className="font-medium tracking-tight">John Doe</h3>
+                  <p className="text-sm text-foreground/40">
+                    Creative Director
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { About19 };

src/components/hero235.tsx

@@ -37,8 +37,15 @@ const Hero235 = ({ className }: Hero235Props) => {
       )}
     >
       <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="absolute inset-0 z-0 bg-[linear-gradient(to_right,var(--muted)_1px,transparent_1px),linear-gradient(to_bottom,var(--muted)_1px,transparent_1px)] bg-size-[40px_40px]"
+          style={{
+            WebkitMaskImage:
+              "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+            maskImage:
+              "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
+          }}
+        />
         <div
           className="pointer-events-none absolute inset-0 z-0 opacity-40"
           style={{
@@ -47,6 +54,7 @@ const Hero235 = ({ className }: Hero235Props) => {
             backgroundRepeat: "repeat",
           }}
         />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-b from-transparent via-background/10 to-background/90" />
       </div>
       <div className="relative container flex h-full flex-col justify-between">
         <div className="flex flex-1 items-center justify-center">