src/components/sections/cta/CtaAnimatedCard.tsx

@@ -0,0 +1,55 @@
+import Card from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+type CtaAnimatedCardProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+};
+
+const CtaAnimatedCard = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+}: CtaAnimatedCardProps) => {
+  return (
+    <section aria-label="CTA section" className="py-20">
+      <div className="w-content-width mx-auto">
+        <ScrollReveal variant="slide-up">
+          <div className="relative">
+            <div className="absolute inset-0 rounded shadow-[0_0_40px_var(--accent)] animate-pulse opacity-60" />
+            <Card className="relative p-10 md:p-20 flex flex-col items-center text-center gap-6 z-10">
+              <span className="px-3 py-1 text-sm card rounded border border-foreground/10">{tag}</span>
+              
+              <TextAnimation
+                text={title}
+                variant="fade"
+                gradientText={true}
+                tag="h2"
+                className="text-4xl md:text-6xl font-medium text-balance"
+              />
+              
+              <TextAnimation
+                text={description}
+                variant="fade"
+                gradientText={false}
+                tag="p"
+                className="text-base md:text-lg leading-tight text-balance max-w-2xl"
+              />
+              
+              <div className="mt-4">
+                <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
+              </div>
+            </Card>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default CtaAnimatedCard;

src/components/ui/Button.tsx

@@ -1,7 +1,3 @@
-"use client";
-
-import { motion } from "motion/react";
-import { useButtonClick } from "@/hooks/useButtonClick";
 import { cls } from "@/lib/utils";
 
 interface ButtonProps {
@@ -14,31 +10,23 @@ interface ButtonProps {
   className?: string;
 }
 
-const Button = ({ text, variant = "primary", href = "#", onClick, animate = true, animationDelay = 0, className = "" }: ButtonProps) => {
-  const handleClick = useButtonClick(href, onClick);
-
-  const button = (
-    <a
-      href={href}
-      onClick={handleClick}
-      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer", variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text", className)}
-    >
-      {text}
-    </a>
-  );
-
-  if (!animate) return button;
-
+const Button = ({ text, variant = "primary", href, onClick, className }: ButtonProps) => {
+  const baseClass = variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text";
+  const classes = cls("inline-flex items-center justify-center px-5 py-3 text-sm rounded cursor-pointer transition-all", baseClass, className);
+  
+  if (href) {
+    return (
+      <a href={href} className={classes} onClick={onClick}>
+        {text}
+      </a>
+    );
+  }
+  
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.6, delay: animationDelay, ease: "easeOut" }}
-    >
-      {button}
-    </motion.div>
+    <button onClick={onClick} className={classes}>
+      {text}
+    </button>
   );
 };
 
-export default Button;
+export default Button;

src/components/ui/Card.tsx

@@ -1,15 +1,16 @@
-import type { ReactNode } from "react";
 import { cls } from "@/lib/utils";
 
 interface CardProps {
-  children: ReactNode;
+  children: React.ReactNode;
   className?: string;
 }
 
-const Card = ({ children, className = "" }: CardProps) => (
-  <div className={cls("p-3 xl:p-4 2xl:p-5 card rounded", className)}>
-    {children}
-  </div>
-);
+const Card = ({ children, className = "" }: CardProps) => {
+  return (
+    <div className={cls("card rounded", className)}>
+      {children}
+    </div>
+  );
+};
 
-export default Card;
+export default Card;

src/pages/HomePage.tsx

@@ -1,5 +1,5 @@
 import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import CtaAnimatedCard from '@/components/sections/cta/CtaAnimatedCard';
 import CornerGlowBackground from "@/components/ui/CornerGlowBackground";
 import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
 import FeaturesBento from '@/components/sections/features/FeaturesBento';
@@ -155,29 +155,17 @@ export default function HomePage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <CtaAnimatedCard
       tag="Contact Us"
       title="Book Your Table"
-      description="Get in touch for reservations, special events, or inquiries."
-      inputs={[
-        {
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
-        },
-        {
-          name: "date",          type: "date",          placeholder: "Date",          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",        placeholder: "Special requests or party size...",        rows: 4,
+      description="Get in touch for reservations, special events, or inquiries. We look forward to hosting you."
+      primaryButton={{
+        text: "Make a Reservation",
+        href: "#"
       }}
-      buttonText="Send Reservation"
-      imageSrc="http://img.b2bpic.net/free-photo/cafe-sibiu-romania_1268-20583.jpg"
     />
   </div>
 
     </>
   );
-}
+}