Migrate CTAs to CallToAction component folder and add theme CSS variables support

Author: webstackdev

src/components/CTAContact/index.astro

@@ -0,0 +1,81 @@
+---
+/**
+ * Contact Call-to-Action Component
+ *
+ * A prominent call-to-action section encouraging users to get in touch.
+ * Features customizable title, description, and action buttons with theme-aware styling.
+ *
+ * @example
+ * ```astro
+ * <Contact />
+ * <Contact
+ *   title="Let's Build Something Amazing"
+ *   description="Ready to transform your digital presence?"
+ *   primaryLink={{ href: "/contact", text: "Start Your Project" }}
+ * />
+ * ```
+ */
+
+export interface Props {
+  /** Main heading for the CTA */
+  title?: string
+  /** Supporting description text */
+  description?: string
+  /** Primary action button */
+  primaryLink?: {
+    href: string
+    text: string
+  }
+  /** Optional secondary action button */
+  secondaryLink?: {
+    href: string
+    text: string
+  }
+}
+
+const {
+  title = "Ready to Start Your Project?",
+  description = "Let's discuss your goals and create something amazing together.",
+  primaryLink = { href: "/contact", text: "Get In Touch" },
+  secondaryLink = { href: "/services", text: "View Services" }
+} = Astro.props
+---
+
+<section class="py-16 md:py-24 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] relative overflow-hidden">
+  <!-- Decorative background elements -->
+  <div class="absolute inset-0 opacity-10">
+    <div class="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
+    <div class="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>
+  </div>
+
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+    <div class="max-w-4xl mx-auto text-center">
+      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">
+        {title}
+      </h2>
+      <p class="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto leading-relaxed">
+        {description}
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+        <a
+          href={primaryLink.href}
+          class="inline-flex items-center justify-center px-8 py-4 bg-white text-[var(--color-primary)] font-semibold rounded-xl hover:bg-white/90 transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 min-w-[200px] text-center"
+        >
+          {primaryLink.text}
+          <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+          </svg>
+        </a>
+        {secondaryLink && (
+          <a
+            href={secondaryLink.href}
+            class="inline-flex items-center justify-center px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-xl hover:bg-white hover:text-[var(--color-primary)] transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 min-w-[200px] text-center"
+          >
+            {secondaryLink.text}
+          </a>
+        )}
+      </div>
+    </div>
+  </div>
+</section>

src/components/CTAFeatured/index.astro

@@ -0,0 +1,94 @@
+---
+/**
+ * Featured Call-to-Action Component
+ *
+ * A visually prominent CTA with optional image support using astro:assets.
+ * Perfect for highlighting special offers, case studies, or featured content.
+ *
+ * @example
+ * ```astro
+ * import myImage from '@assets/images/featured.webp'
+ *
+ * <Featured
+ *   title="See How We Helped LabCorp"
+ *   description="Discover our approach to enterprise web solutions"
+ *   link={{ href: "/case-studies/labcorp", text: "View Case Study" }}
+ *   image={{ src: myImage, alt: "LabCorp case study preview" }}
+ * />
+ * ```
+ */
+
+import { Image } from 'astro:assets'
+import Button from '@components/Button/index.astro'
+import type { ImageMetadata } from 'astro'
+
+export interface Props {
+  /** Main heading for the featured content */
+  title?: string
+  /** Supporting description text */
+  description?: string
+  /** Action link configuration */
+  link?: {
+    href: string
+    text: string
+  }
+  /** Optional image using astro:assets */
+  image?: {
+    src: ImageMetadata
+    alt: string
+  }
+  /** Target audience identifier for analytics */
+  audience?: string
+}
+
+const {
+  title = "Featured Content",
+  description = "Discover more content and resources.",
+  link = { href: "/", text: "Learn More" },
+  image,
+  audience = "all"
+} = Astro.props
+---
+
+<div class="py-8 md:py-12" data-audience={audience}>
+  <aside class="container mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="bg-gradient-to-br from-[var(--color-success-bg)] to-[var(--color-info-bg)] rounded-2xl shadow-xl overflow-hidden">
+      <div class={`grid gap-8 ${image ? 'lg:grid-cols-2' : 'lg:grid-cols-1'} items-center`}>
+        <!-- Content Column -->
+        <div class="p-8 md:p-12 lg:p-16">
+          <div class="max-w-xl">
+            <h3 class="text-2xl md:text-3xl lg:text-4xl font-bold text-[var(--color-text)] mb-4 leading-tight">
+              {title}
+            </h3>
+            <p class="text-base md:text-lg text-[var(--color-text-offset)] mb-8 leading-relaxed">
+              {description}
+            </p>
+            <a href={link.href} class="inline-block">
+              <Button
+                text={link.text}
+                variant="success"
+                size="large"
+              />
+            </a>
+          </div>
+        </div>
+
+        <!-- Image Column (if image provided) -->
+        {image && (
+          <div class="relative lg:h-full min-h-[300px] lg:min-h-[400px]">
+            <a href={link.href} class="block h-full">
+              <Image
+                src={image.src}
+                alt={image.alt}
+                class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                loading="lazy"
+                widths={[400, 600, 800]}
+                sizes="(max-width: 768px) 100vw, 50vw"
+              />
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  </aside>
+</div>