From 6a8ee43c0721cfa3411b628f32e5e8d10142607f Mon Sep 17 00:00:00 2001
From: Matthias <matthias@example.com>
Date: Tue, 21 Apr 2026 13:14:26 +0200
Subject: [PATCH] Refactor Contact21 and Pricing4 components for improved
 styling; add CTASection to homepage layout.

---
 src/components/contact21.tsx |  8 ++++----
 src/components/cta.tsx       | 28 ++++++++++++++++++++++++++++
 src/components/pricing4.tsx  |  2 +-
 src/pages/index.astro        | 13 +++++++------
 4 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 src/components/cta.tsx

diff --git a/src/components/contact21.tsx b/src/components/contact21.tsx
index 974552a..1d5711e 100644
--- a/src/components/contact21.tsx
+++ b/src/components/contact21.tsx
@@ -122,7 +122,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                         id={field.name}
                         aria-invalid={fieldState.invalid}
                         placeholder="Name*"
-                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
                       />
                       {fieldState.invalid && (
                         <FieldError errors={[fieldState.error]} />
@@ -145,7 +145,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                         type="email"
                         aria-invalid={fieldState.invalid}
                         placeholder="Email*"
-                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
                       />
                       {fieldState.invalid && (
                         <FieldError errors={[fieldState.error]} />
@@ -167,7 +167,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                         id={field.name}
                         aria-invalid={fieldState.invalid}
                         placeholder="Message (Tell us about your project)"
-                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
+                        className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
                       />
                       {fieldState.invalid && (
                         <FieldError errors={[fieldState.error]} />
@@ -183,7 +183,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
                 )}
 
                 <Button
-                  className="mt-15 flex items-center justify-start gap-2 rounded-none !px-8 lg:h-12 lg:text-base"
+                  className="mt-15 flex items-center justify-start gap-2 rounded-none px-8! lg:h-12 lg:text-base"
                   disabled={form.formState.isSubmitting}
                 >
                   {form.formState.isSubmitting ? (
diff --git a/src/components/cta.tsx b/src/components/cta.tsx
new file mode 100644
index 0000000..6187d0e
--- /dev/null
+++ b/src/components/cta.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@/components/ui/button";
+
+export default function CTASection() {
+  return (
+    <section className="py-10 lg:py-16">
+      <div className="mx-auto max-w-5xl px-4">
+        <div className="rounded-2xl bg-linear-to-r bg-[url('https://images.unsplash.com/photo-1739785890803-7a2191a37ef5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-bottom px-8 py-10 md:px-16 md:py-20">
+          <header className="mb-8 max-w-2xl space-y-4">
+            <h2 className="font-heading text-4xl leading-10 text-black lg:text-4xl">
+              Benefit up to 33% when connecting to Sentium for 4 months or more
+            </h2>
+            <p className="text-lg text-black/60">
+              Register and start using our cloud solutions today
+            </p>
+          </header>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-wrap gap-4">
+            <Button size="lg">Get Started</Button>
+            <Button size="lg" variant="secondary">
+              Contact
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/pricing4.tsx b/src/components/pricing4.tsx
index fd87646..9d6005a 100644
--- a/src/components/pricing4.tsx
+++ b/src/components/pricing4.tsx
@@ -112,7 +112,7 @@ const Pricing4 = ({
             {plans.map((plan) => (
               <div
                 key={plan.name}
-                className={`flex w-full flex-col rounded-lg border p-6 text-left ${
+                className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
                   plan.isPopular ? "bg-muted" : ""
                 }`}
               >
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c838594..54acc32 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,6 +7,7 @@ import { Footer27 } from "@/components/footer27";
 import { Hero235 } from "@/components/hero235";
 import { Pricing4 } from "@/components/pricing4";
 import { Stats11 } from "@/components/stats11";
+import CTASection from "@/components/cta";
 import "@/styles/global.css";
 ---
 
@@ -19,14 +20,14 @@ import "@/styles/global.css";
     <meta name="generator" content={Astro.generator} />
     <title>Matthias Meister Webdesign</title>
     <script
-    src="https://rybbit.matthias.lol/api/script.js"
-    data-site-id="60abc81e438a"
-    defer
-></script>
+      src="https://rybbit.matthias.lol/api/script.js"
+      data-site-id="60abc81e438a"
+      defer></script>
   </head>
   <body>
-    <Hero235 client:load />
-    <div class="mx-auto w-full max-w-7xl">
+      <div class="mx-auto w-full max-w-7xl">
+        <Hero235 client:load />
+      <CTASection client:load />
       <Feature284 client:load />
       <Stats11 client:load />
       <Pricing4 client:load />