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/README.md
+++ b/frontend/src/components/shared/README.md
@@ -15,10 +15,41 @@ These components are designed to be framework-agnostic where possible, but curre

 ```
 shared/
-├── blocks/          # Content blocks (HeroBlock, FeatureGridBlock, StatsPanel)
-├── layouts/         # Page layouts (DefaultLayout, MinimalLayout)
-├── templates/       # Full page templates (MarketingTemplate, LandingTemplate)
-└── index.ts        # Barrel exports
+├── blocks/          # Content blocks (12 total)
+│   ├── HeroBlock.tsx
+│   ├── FeatureGridBlock.tsx
+│   ├── StatsPanel.tsx
+│   ├── ServicesBlock.tsx
+│   ├── ProductsBlock.tsx
+│   ├── TestimonialsBlock.tsx
+│   ├── ContactFormBlock.tsx
+│   ├── CTABlock.tsx
+│   ├── ImageGalleryBlock.tsx
+│   ├── VideoBlock.tsx
+│   ├── TextBlock.tsx
+│   ├── QuoteBlock.tsx
+│   ├── blocks.css
+│   └── index.ts
+├── layouts/         # Page layouts (7 total)
+│   ├── DefaultLayout.tsx
+│   ├── MinimalLayout.tsx
+│   ├── MagazineLayout.tsx
+│   ├── EcommerceLayout.tsx
+│   ├── PortfolioLayout.tsx
+│   ├── BlogLayout.tsx
+│   ├── CorporateLayout.tsx
+│   ├── layouts.css
+│   └── index.ts
+├── templates/       # Full page templates (6 total)
+│   ├── MarketingTemplate.tsx
+│   ├── LandingTemplate.tsx
+│   ├── BlogTemplate.tsx
+│   ├── BusinessTemplate.tsx
+│   ├── PortfolioTemplate.tsx
+│   ├── EcommerceTemplate.tsx
+│   └── index.ts
+├── index.ts         # Barrel exports
+└── README.md        # This file
 ```

 ## Usage
@@ -102,6 +133,108 @@ Statistics display component.
 />
 ```

+#### `ServicesBlock`
+Display services or offerings in a grid layout.
+
+**Props:**
+- `title?: string` - Section title
+- `subtitle?: string` - Section subtitle
+- `services: Array<{ title: string; description: string; icon?: ReactNode; imageUrl?: string }>` - Service items
+- `columns?: 2 | 3 | 4` - Number of columns
+- `variant?: 'default' | 'card' | 'minimal'` - Display variant
+
+#### `ProductsBlock`
+Display products in a grid or list layout.
+
+**Props:**
+- `title?: string` - Section title
+- `subtitle?: string` - Section subtitle
+- `products: Array<{ name: string; description?: string; price?: string; imageUrl?: string; ctaLabel?: string }>` - Product items
+- `columns?: 2 | 3 | 4` - Number of columns
+- `variant?: 'grid' | 'list' | 'carousel'` - Display variant
+
+#### `TestimonialsBlock`
+Display customer testimonials with ratings and author info.
+
+**Props:**
+- `title?: string` - Section title
+- `subtitle?: string` - Section subtitle
+- `testimonials: Array<{ quote: string; author: string; role?: string; company?: string; avatarUrl?: string; rating?: number }>` - Testimonial items
+- `columns?: 1 | 2 | 3` - Number of columns
+- `variant?: 'default' | 'card' | 'minimal'` - Display variant
+
+#### `ContactFormBlock`
+Contact form with customizable fields.
+
+**Props:**
+- `title?: string` - Form title
+- `subtitle?: string` - Form subtitle
+- `fields?: Array<{ name: string; label: string; type: 'text' | 'email' | 'tel' | 'textarea'; required?: boolean; placeholder?: string }>` - Form fields
+- `submitLabel?: string` - Submit button label
+- `onSubmit?: (data: Record<string, string>) => void` - Submit handler
+
+#### `CTABlock`
+Call-to-action section with primary and secondary actions.
+
+**Props:**
+- `title: string` - CTA title
+- `subtitle?: string` - CTA subtitle
+- `primaryCtaLabel?: string` - Primary button label
+- `primaryCtaLink?: string` - Primary button link
+- `onPrimaryCtaClick?: () => void` - Primary button click handler
+- `secondaryCtaLabel?: string` - Secondary button label
+- `secondaryCtaLink?: string` - Secondary button link
+- `onSecondaryCtaClick?: () => void` - Secondary button click handler
+- `backgroundImage?: string` - Background image URL
+- `variant?: 'default' | 'centered' | 'split'` - Layout variant
+
+#### `ImageGalleryBlock`
+Image gallery with grid, masonry, or carousel layout.
+
+**Props:**
+- `title?: string` - Gallery title
+- `subtitle?: string` - Gallery subtitle
+- `images: Array<{ url: string; alt?: string; caption?: string; thumbnailUrl?: string }>` - Image items
+- `columns?: 2 | 3 | 4` - Number of columns
+- `variant?: 'grid' | 'masonry' | 'carousel'` - Display variant
+- `lightbox?: boolean` - Enable lightbox on click
+
+#### `VideoBlock`
+Video player component supporting both video URLs and embed codes.
+
+**Props:**
+- `title?: string` - Video title
+- `subtitle?: string` - Video subtitle
+- `videoUrl?: string` - Video file URL
+- `embedCode?: string` - HTML embed code (e.g., YouTube iframe)
+- `thumbnailUrl?: string` - Video thumbnail/poster
+- `autoplay?: boolean` - Autoplay video
+- `controls?: boolean` - Show video controls
+- `loop?: boolean` - Loop video
+- `muted?: boolean` - Mute video
+- `variant?: 'default' | 'fullwidth' | 'centered'` - Layout variant
+
+#### `TextBlock`
+Simple text content block with customizable alignment and width.
+
+**Props:**
+- `title?: string` - Block title
+- `content: string | ReactNode` - Text content (HTML string or React nodes)
+- `align?: 'left' | 'center' | 'right' | 'justify'` - Text alignment
+- `variant?: 'default' | 'narrow' | 'wide' | 'fullwidth'` - Width variant
+
+#### `QuoteBlock`
+Quote/testimonial block with author information.
+
+**Props:**
+- `quote: string` - Quote text
+- `author?: string` - Author name
+- `role?: string` - Author role
+- `company?: string` - Author company
+- `avatarUrl?: string` - Author avatar image
+- `variant?: 'default' | 'large' | 'minimal' | 'card'` - Display variant
+- `align?: 'left' | 'center' | 'right'` - Text alignment
+
 ### Layouts

 #### `DefaultLayout`
@@ -125,15 +258,64 @@ Minimal layout for focused content pages.

 **Props:**
 - `children: ReactNode` - Page content
- `maxWidth?: string` - Maximum content width
+- `background?: 'light' | 'dark'` - Background color

 **Example:**
 ```tsx
-<MinimalLayout maxWidth="800px">
+<MinimalLayout background="light">
  <ArticleContent />
 </MinimalLayout>
 ```

+#### `MagazineLayout`
+Magazine-style layout with featured section and sidebar.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `featured?: ReactNode` - Featured content section
+- `sidebar?: ReactNode` - Sidebar content
+- `mainContent: ReactNode` - Main content area
+- `footer?: ReactNode` - Page footer
+
+#### `EcommerceLayout`
+E-commerce layout with navigation and product sidebar.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `navigation?: ReactNode` - Navigation menu
+- `sidebar?: ReactNode` - Sidebar (filters, categories)
+- `mainContent: ReactNode` - Main content (products)
+- `footer?: ReactNode` - Page footer
+
+#### `PortfolioLayout`
+Portfolio layout optimized for showcasing work.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `mainContent: ReactNode` - Main content (gallery, projects)
+- `footer?: ReactNode` - Page footer
+- `fullWidth?: boolean` - Full-width layout option
+
+#### `BlogLayout`
+Blog layout with optional sidebar (left or right).
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `sidebar?: ReactNode` - Sidebar content
+- `mainContent: ReactNode` - Main content (blog posts)
+- `footer?: ReactNode` - Page footer
+- `sidebarPosition?: 'left' | 'right'` - Sidebar position
+
+#### `CorporateLayout`
+Corporate/business layout with navigation and structured sections.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `navigation?: ReactNode` - Navigation menu
+- `mainContent: ReactNode` - Main content
+- `footer?: ReactNode` - Page footer
+- `sidebar?: ReactNode` - Optional sidebar
+
 ### Templates

 #### `MarketingTemplate`
@@ -169,6 +351,51 @@ Landing page template optimized for conversions.
 **Props:**
 - Similar to `MarketingTemplate` with additional conversion-focused sections

+#### `BlogTemplate`
+Blog page template with posts and sidebar.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `sidebar?: ReactNode` - Sidebar content
+- `posts: ReactNode` - Blog posts content
+- `footer?: ReactNode` - Page footer
+- `sidebarPosition?: 'left' | 'right'` - Sidebar position
+
+#### `BusinessTemplate`
+Business/corporate page template.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `navigation?: ReactNode` - Navigation menu
+- `hero?: ReactNode` - Hero section
+- `features?: ReactNode` - Features section
+- `services?: ReactNode` - Services section
+- `testimonials?: ReactNode` - Testimonials section
+- `cta?: ReactNode` - Call-to-action section
+- `footer?: ReactNode` - Page footer
+
+#### `PortfolioTemplate`
+Portfolio showcase template.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `gallery?: ReactNode` - Portfolio gallery
+- `about?: ReactNode` - About section
+- `contact?: ReactNode` - Contact section
+- `footer?: ReactNode` - Page footer
+- `fullWidth?: boolean` - Full-width layout
+
+#### `EcommerceTemplate`
+E-commerce store template.
+
+**Props:**
+- `header?: ReactNode` - Page header
+- `navigation?: ReactNode` - Navigation menu
+- `sidebar?: ReactNode` - Sidebar (filters)
+- `products?: ReactNode` - Products grid
+- `featured?: ReactNode` - Featured products
+- `footer?: ReactNode` - Page footer
+
 ## Styling

 Components use CSS modules and shared CSS files: