phase 6 ,7,9

2025-11-18 05:52:10 +05:00
parent 9a6d47b91b
commit a6a80ad005
28 changed files with 2173 additions and 9 deletions
--- a/frontend/src/components/shared/blocks/CTABlock.tsx
+++ b/frontend/src/components/shared/blocks/CTABlock.tsx
@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import './blocks.css';
+
+export interface CTABlockProps {
+  title: string;
+  subtitle?: string;
+  primaryCtaLabel?: string;
+  primaryCtaLink?: string;
+  onPrimaryCtaClick?: () => void;
+  secondaryCtaLabel?: string;
+  secondaryCtaLink?: string;
+  onSecondaryCtaClick?: () => void;
+  backgroundImage?: string;
+  variant?: 'default' | 'centered' | 'split';
+  children?: ReactNode;
+}
+
+export function CTABlock({ 
+  title, 
+  subtitle,
+  primaryCtaLabel,
+  primaryCtaLink,
+  onPrimaryCtaClick,
+  secondaryCtaLabel,
+  secondaryCtaLink,
+  onSecondaryCtaClick,
+  backgroundImage,
+  variant = 'default',
+  children
+}: CTABlockProps) {
+  return (
+    <section 
+      className={`shared-cta shared-cta--${variant}`}
+      style={backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : undefined}
+    >
+      <div className="shared-cta__content">
+        <h2 className="shared-cta__title">{title}</h2>
+        {subtitle && <p className="shared-cta__subtitle">{subtitle}</p>}
+        {children && <div className="shared-cta__children">{children}</div>}
+        <div className="shared-cta__actions">
+          {primaryCtaLabel && (
+            primaryCtaLink ? (
+              <a href={primaryCtaLink} className="shared-button shared-button--primary">
+                {primaryCtaLabel}
+              </a>
+            ) : (
+              <button 
+                type="button" 
+                className="shared-button shared-button--primary"
+                onClick={onPrimaryCtaClick}
+              >
+                {primaryCtaLabel}
+              </button>
+            )
+          )}
+          {secondaryCtaLabel && (
+            secondaryCtaLink ? (
+              <a href={secondaryCtaLink} className="shared-button shared-button--secondary">
+                {secondaryCtaLabel}
+              </a>
+            ) : (
+              <button 
+                type="button" 
+                className="shared-button shared-button--secondary"
+                onClick={onSecondaryCtaClick}
+              >
+                {secondaryCtaLabel}
+              </button>
+            )
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+