Fix CSS lint errors in Callout and CallTOAction Contact, Download, and Featured files, refactor to use Tailwind theme classes

Author: webstackdev

src/components/CallToAction/Contact/index.astro

@@ -42,7 +42,7 @@ const {
 ---
 
 <section
-  class="py-16 md:py-24 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] relative overflow-hidden"
+  class="py-16 md:py-24 bg-linear-to-br from-(--color-primary) to-(--color-accent) relative overflow-hidden"
 >
   <!-- Decorative background elements -->
   <div class="absolute inset-0 opacity-10">
@@ -68,7 +68,7 @@ const {
       <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"
+          class="inline-flex items-center justify-center px-8 py-4 bg-white text-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">
@@ -83,7 +83,7 @@ const {
           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"
+              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-primary transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 min-w-[200px] text-center"
             >
               {secondaryLink.text}
             </a>

src/components/CallToAction/Download/README.md

@@ -1,16 +1,6 @@
 # Download Call-to-Action Component
 
-A visually striking call-to-action component that encourages users to download gated resources. The component links to download landing pages where users fill out a form to access the content.
-
-## Features
-
-- **Theme-Aware Styling**: Adapts to site themes with CSS custom properties
-- **Gradient Background**: Eye-catching gradient from primary to accent colors
-- **Animated Icon**: Download icon with hover animation
-- **Trust Indicators**: Shows "Instant Access", "No Credit Card Required", and "Expert Insights"
-- **Responsive Design**: Mobile-first approach with responsive breakpoints
-- **Accessible**: Semantic HTML with proper ARIA labels
-- **Customizable**: Flexible props for title, description, and button text
+A call-to-action component to encourage users to download gated resources. The component links to download landing pages where users fill out a form to access the content.
 
 ## Usage
 
@@ -72,23 +62,6 @@ The `resource` prop must match the folder name of a download in `src/content/dow
 
 The component will construct the URL as `/downloads/{resource}` and navigate to that landing page when the button is clicked.
 
-## Design Elements
-
-### Visual Features
-
-- **Gradient Background**: Uses primary and accent theme colors
-- **Decorative Blurs**: Subtle circular blur elements for depth
-- **Icon Badge**: Large download icon with semi-transparent background
-- **Hover Effects**: Smooth transitions and subtle lift on hover
-- **Trust Indicators**: Three icons with benefits displayed below the CTA
-
-### Accessibility
-
-- Semantic HTML5 `<section>` element
-- High contrast white text on colored background
-- Focus states for keyboard navigation
-- Screen reader friendly
-
 ## Customization
 
 ### Styling
@@ -118,80 +91,6 @@ This CTA component works seamlessly with the download system:
 4. **Access Granted**: After submission, download button appears
 5. **PDF Download**: User clicks to download the PDF in a new tab
 
-## Example Placements
-
-### In an Article
-
-```astro
----
-// In src/pages/articles/api-strategy.astro
-import Download from '@components/CallToAction/Download/index.astro'
----
-
-<article>
-  <!-- Article content -->
-
-  <Download
-    resource="api-tool-consolidation-whitepaper"
-    title="Want to Learn More About API Consolidation?"
-    description="Download our comprehensive whitepaper with case studies and implementation strategies."
-  />
-</article>
-```
-
-### In a Service Page
-
-```astro
----
-// In src/pages/services/security-consulting.astro
-import Download from '@components/CallToAction/Download/index.astro'
----
-
-<main>
-  <!-- Service information -->
-
-  <Download
-    resource="ransomware-recovery-kit"
-    title="Protect Your Organization Today"
-    description="Get our complete ransomware recovery kit with prevention strategies and response protocols."
-    secondaryLink={{
-      href: "/contact",
-      text: "Schedule Consultation"
-    }}
-  />
-</main>
-```
-
-## Validation
-
-The component includes runtime validation:
-
-- Throws an error if the `resource` prop is not provided
-- Ensures the component is used correctly
-
-```typescript
-if (!resource) {
-  const message = 'Download CTA component requires a "resource" prop'
-  throw new ClientScriptError({ message })
-}
-```
-
-## Browser Support
-
-Works in all modern browsers that support:
-
-- CSS Grid and Flexbox
-- CSS Custom Properties (CSS Variables)
-- CSS Backdrop Blur (graceful degradation)
-- SVG
-
-## Performance
-
-- Static component with no client-side JavaScript
-- Uses native HTML anchor tags for navigation
-- CSS transitions handled by GPU
-- Optimized SVG icons
-
 ## Related Components
 
 - **DownloadForm** (`@components/Forms/Download/index.astro`): The form displayed on download landing pages

src/components/CallToAction/Download/index.astro

@@ -1,19 +1,6 @@
 ---
 /**
  * Download Call-to-Action Component
- *
- * A prominent call-to-action section encouraging users to download a resource.
- * Navigates to a download landing page where users fill out a form to access the resource.
- *
- * @example
- * ```astro
- * <Download resource="ransomware-recovery-kit" />
- * <Download
- *   resource="api-tool-consolidation-whitepaper"
- *   title="Download Our API Consolidation Guide"
- *   description="Learn how to streamline your API tooling and boost developer productivity."
- * />
- * ```
  */
 
 import { ClientScriptError } from '@components/scripts/errors'
@@ -53,7 +40,7 @@ const downloadUrl = `/downloads/${resource}`
 ---
 
 <section
-  class="py-16 md:py-24 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] relative overflow-hidden"
+  class="py-16 md:py-24 bg-linear-to-br from-(--color-primary) to-(--color-accent) relative overflow-hidden"
 >
   <!-- Decorative background elements -->
   <div class="absolute inset-0 opacity-10">
@@ -93,7 +80,7 @@ const downloadUrl = `/downloads/${resource}`
       <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
         <a
           href={downloadUrl}
-          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 group"
+          class="inline-flex items-center justify-center px-8 py-4 bg-white text-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 group"
         >
           <svg
             class="w-5 h-5 mr-2 transition-transform duration-200 group-hover:translate-y-0.5"
@@ -114,7 +101,7 @@ const downloadUrl = `/downloads/${resource}`
           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"
+              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-primary transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 min-w-[200px] text-center"
             >
               {secondaryLink.text}
             </a>

src/components/CallToAction/Featured/index.astro

@@ -53,18 +53,18 @@ const {
 <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"
+      class="bg-linear-to-br from-(--color-success-bg) to-(--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"
+              class="text-2xl md:text-3xl lg:text-4xl font-bold text-text mb-4 leading-tight"
             >
               {title}
             </h3>
-            <p class="text-base md:text-lg text-[var(--color-text-offset)] mb-8 leading-relaxed">
+            <p class="text-base md:text-lg text-offset mb-8 leading-relaxed">
               {description}
             </p>
             <a href={link.href} class="inline-block">

src/components/Callout/index.astro

@@ -57,9 +57,9 @@ const borderColor = borderColorMap[type]
   }
 </style>
 
-<div class="callout border border-[var(--color-border)] border-l-0 rounded-r-lg relative pl-6">
+<div class="callout border border--border border-l-0 rounded-r-lg relative pl-6">
   <div
-    class="callout__icon bg-[var(--color-bg)] rounded-full absolute left-0 top-0 ml-0.5 p-1 -translate-x-1/2 -translate-y-1/2"
+    class="callout__icon bg-bg rounded-full absolute left-0 top-0 ml-0.5 p-1 -translate-x-1/2 -translate-y-1/2"
   >
     <Sprite name={icon} size={20} />
   </div>