Refactor Contact21 and Pricing4 components for improved styling; add CTASection to homepage layout.

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 ? (

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>
+  );
+}

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" : ""
                 }`}
               >

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";
 ---
 
@@ -21,12 +22,12 @@ import "@/styles/global.css";
     <script
       src="https://rybbit.matthias.lol/api/script.js"
       data-site-id="60abc81e438a"
-    defer
-></script>
+      defer></script>
   </head>
   <body>
-    <Hero235 client:load />
       <div class="mx-auto w-full max-w-7xl">
+        <Hero235 client:load />
+      <CTASection client:load />
       <Feature284 client:load />
       <Stats11 client:load />
       <Pricing4 client:load />