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

package.json

@@ -31,5 +31,9 @@
     "tailwindcss": "^4.2.3",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   }
 }

pnpm-lock.yaml

@@ -65,6 +65,13 @@ importers:
       zod:
         specifier: ^4.3.6
         version: 4.3.6
+    devDependencies:
+      '@types/react':
+        specifier: ^19.2.14
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
 
 packages:
 

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
-        <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" />
+          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">

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import { About19 } from "@/components/about19";
 import { Contact21 } from "@/components/contact21";
 import { Faq7 } from "@/components/faq7";
 import { Feature284 } from "@/components/feature284";
@@ -16,7 +17,7 @@ import "@/styles/global.css";
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <title>Website</title>
+    <title>Matthias Meister Webdesign</title>
     <script
     src="https://rybbit.matthias.lol/api/script.js"
     data-site-id="60abc81e438a"
@@ -30,6 +31,7 @@ import "@/styles/global.css";
       <Stats11 client:load />
       <Pricing4 client:load />
       <Faq7 client:load />
+      <About19 client:load />
       <Contact21 client:load />
       <Footer27 client:load />
     </div>