first commit

2025-08-28 13:14:51 +05:30
commit b9bf8ce99e
176 changed files with 51228 additions and 0 deletions
--- a/src/guidelines/Guidelines.md
+++ b/src/guidelines/Guidelines.md
@@ -0,0 +1,373 @@
+# Leadership Development Brand Guidelines
+
+## General Development Guidelines
+
+### 🚨 CRITICAL COMPONENT PROTECTION RULES
+
+#### Primary CTA Button Protection Policy
+* **ABSOLUTE RULE**: NEVER modify `/components/PrimaryCTAButton.tsx` for color or styling changes
+* **WHEN REQUESTED**: If asked to change Primary CTA button colors/styling, apply changes via:
+  - CSS overrides in `/styles/globals.css`
+  - Inline styles in usage contexts
+  - Component wrapper modifications
+  - Context-specific styling
+* **PRESERVE**: Core component animations, structure, and functionality must remain untouched
+* **THIS RULE OVERRIDES ALL OTHER REQUESTS**: Component protection takes precedence
+
+### Standard Development Guidelines
+
+* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
+* Refactor code as you go to keep code clean
+* Keep file sizes small and put helper functions and components in their own files
+* Always maintain accessibility standards with proper ARIA labels and keyboard navigation
+* Use semantic HTML elements and ensure proper heading hierarchy
+
+## Brand Colors
+
+### Primary Colors
+* **Brand Blue**: `#04045B` - Primary brand color for headers, CTAs, and key elements
+* **Highlight Yellow**: `#F8C301` - Accent color for highlights, tags, and interactive elements
+* **Brand Black**: `#26231A` - Body text and secondary elements
+
+### Supporting Colors
+* **White Background**: `#FFFFFF` - Main page background throughout the site (CHANGED FROM LIGHT BLUE)
+* **Gray Muted**: `#C0C0C0` - Subtext, borders, and muted content
+* **White**: `#FFFFFF` - Card backgrounds and contrast elements
+* **Light Gray**: `#FFFFFF` - Section backgrounds (CHANGED FROM #F9F9F9 TO WHITE)
+
+### CSS Variables
+Use these CSS custom properties for consistency:
+```css
+--color-brand-primary: #04045B;
+--color-brand-accent: #F8C301;
+--color-brand-black: #26231A;
+--color-brand-gray-muted: #C0C0C0;
+--color-brand-bg-white: #FFFFFF;
+--color-brand-bg-light: #FFFFFF; /* CHANGED FROM #F9F9F9 TO WHITE */
+```
+
+### 🎨 BACKGROUND COLOR POLICY
+
+#### 🔒 CRITICAL BACKGROUND COLOR POLICY
+* **WHITE BACKGROUND ONLY**: #FFFFFF is the EXCLUSIVE background color for all sections
+* **NEVER use light blue (#F7F7FD)** or any other background colors for main sections
+* **ALL NEW SECTIONS MUST USE WHITE** - No exceptions
+
+#### ✅ APPROVED BACKGROUND USAGE
+```css
+/* Preferred - Use design system variables */
+background-color: var(--color-brand-bg-white);
+background-color: var(--color-brand-bg-light); /* Now points to white */
+
+/* Direct usage when needed */
+background-color: #FFFFFF;
+```
+
+#### ❌ PROHIBITED BACKGROUND USAGE
+```css
+/* DO NOT USE */
+background-color: #F7F7FD; /* Old light blue - REMOVED */
+background-color: rgba(247, 247, 253, 0.5); /* Semi-transparent light blue - REMOVED */
+style={{ backgroundColor: '#F7F7FD' }}; /* Inline styles with light blue - REMOVED */
+```
+
+#### 📋 BACKGROUND IMPLEMENTATION CHECKLIST
+- [ ] All sections use white background (#FFFFFF)
+- [ ] No light blue (#F7F7FD) backgrounds anywhere
+- [ ] CSS variables updated to point to white
+- [ ] New sections follow white background standard
+
+## Typography
+
+### Font Family - INTER ONLY ⚠️
+
+#### 🔒 CRITICAL FONT POLICY
+* **EXCLUSIVE FONT**: Inter - The ONLY font used across the entire website
+* **NEVER use any other font** unless explicitly instructed to change
+* **NO EXCEPTIONS**: All text elements must use Inter for brand consistency
+
+#### ✅ APPROVED FONT USAGE
+```css
+/* Preferred - Use design system variables */
+font-family: var(--font-family-base);
+font-family: var(--font-family-brand);
+
+/* Direct usage when needed */
+font-family: 'Inter', sans-serif;
+```
+
+#### ❌ PROHIBITED FONT USAGE
+```css
+/* DO NOT USE */
+font-family: 'Helvetica', sans-serif;
+font-family: 'Arial', sans-serif;
+font-family: system-ui;
+font-family: sans-serif; /* without Inter */
+```
+
+#### 📋 IMPLEMENTATION CHECKLIST
+- [ ] All components use Inter font
+- [ ] No hardcoded alternative fonts
+- [ ] CSS variables properly implemented
+- [ ] Typography tokens consistently applied
+
+### Font Weights
+* **Regular**: 400 - Body text and descriptions
+* **Medium**: 500 - Labels and secondary headings
+* **Semi-Bold**: 600 - Button text and emphasis
+* **Bold**: 700 - Main headings and important text
+
+### Heading Hierarchy
+* **H1 - Hero Titles**: 80px (5rem) - Use `text-h1` class
+* **H2 - Main Section Headings**: 48px (3rem) - Use `text-h2` class
+* **H3 - Subsection Headings**: 22px (1.375rem) - Use `text-h3` class
+* **H4 - Card Headings**: 24px (1.5rem) - Use `text-h4` class
+* **Body Text**: 16px (1rem) - Use `text-body` class
+* **Body Large**: 18px (1.125rem) - Use `text-body-lg` class
+
+## Layout & Spacing
+
+### Margin System
+* **Hero Banner Sections**: 200px horizontal gutters (`hero-margin-x` class)
+* **Standard Sections**: 100px horizontal margins (`section-margin-x` class)
+* **Mobile**: Responsive margins that scale down appropriately
+
+### Responsive Breakpoints
+* **Desktop**: 1024px and above - Full margin system
+* **Tablet**: 768px - 1023px - Reduced margins
+* **Mobile**: Below 768px - Minimal margins with proper padding
+
+## Components
+
+### Buttons
+
+#### Primary CTA Button - Independent Styling System
+
+##### 🔒 CRITICAL COMPONENT PROTECTION POLICY
+* **NEVER MODIFY THE MAIN COMPONENT**: The `/components/PrimaryCTAButton.tsx` file must NEVER be directly modified for color or styling changes
+* **INDEPENDENT BUTTON STYLING**: Each Primary CTA Button instance is now completely independent - changes to one button will NOT affect others
+* **USE UNIQUE CSS CLASSES**: Apply individual styling through unique CSS class modifiers (e.g., `.primary-cta-button.cta-custom-blue`)
+* **PRESERVE CORE FUNCTIONALITY**: The sophisticated slide animations and core component structure must remain intact
+* **VARIANT COMPONENTS AVAILABLE**: Use pre-built variant components for common color schemes
+
+##### Independent Styling Methods
+
+**Method 1: Variant Components (Recommended)**
+```tsx
+import { PrimaryCTAButton } from './components/PrimaryCTAButton';
+import { PrimaryCTAButtonYellow } from './components/PrimaryCTAButtonYellow';
+import { PrimaryCTAButtonVariant } from './components/PrimaryCTAButtonVariant';
+
+// Default blue variant (new default)
+<PrimaryCTAButton text="Get Started" onClick={handleClick} />
+
+// Yellow variant (if needed)
+<PrimaryCTAButtonYellow text="Learn More" onClick={handleClick} />
+
+// Flexible variant with custom colors
+<PrimaryCTAButtonVariant 
+  variant="custom"
+  customBackgroundColor="#28A745"
+  customTextColor="#FFFFFF"
+  text="Custom Button"
+  onClick={handleClick}
+/>
+```
+
+**Method 2: Unique CSS Classes**
+```tsx
+// Add unique CSS class to any Primary CTA Button
+<PrimaryCTAButton 
+  text="Blue Button" 
+  onClick={handleClick}
+  className="cta-custom-blue"
+/>
+
+<PrimaryCTAButton 
+  text="Green Button" 
+  onClick={handleClick}
+  className="cta-custom-green"
+/>
+```
+
+##### Available CSS Class Modifiers
+* **Default (no class needed)** - Blue background (#04045B) with black text (#26231A)
+* `.cta-custom-yellow` - Yellow background (#F8C301) with white text (#FFFFFF) 
+* `.cta-custom-green` - Green background (#28A745) with white text (#FFFFFF)
+* Create custom modifiers in `/styles/globals.css` as needed
+
+##### Standard Design
+* **Default Style**: Blue background (`#04045B`) with black text (`#26231A`)
+* **Border Radius**: 10px (consistent across all CTAs)
+* **Hover State**: Sophisticated slide animations with text and icon transitions  
+* **Hover Color**: Darker blue (`#030359`) with black text
+* **Animation**: 300ms ease-in-out timing for all transitions
+* **Size**: Standard padding and dimensions as defined in component
+
+##### Usage Rules
+* **INDEPENDENT STYLING**: Each button can have different colors without affecting others
+* **ANIMATION PRESERVATION**: All sophisticated animations are maintained regardless of color changes
+* One primary CTA per section maximum
+* Use action-oriented labels ("Get Started", "Learn More", "Contact Us")
+* Always include hover and focus states
+* Maintain 10px border radius for brand consistency
+* **NEVER modify the main component file for styling requests**
+
+##### Component Independence Benefits
+* ✅ **Individual Control**: Each button can have unique colors
+* ✅ **Animation Preservation**: All sophisticated slide animations maintained
+* ✅ **Component Protection**: Main component remains untouched
+* ✅ **No Global Impact**: Changes to one button don't affect others
+* ✅ **Flexibility**: Support for unlimited color combinations
+* ✅ **Type Safety**: Full TypeScript support maintained
+
+### Branded Tags
+
+#### Tag Element Structure
+* **Background**: Light yellow (`rgba(248,195,1,0.1)`)
+* **Content**: Yellow dot + uppercase text
+* **Dot**: 7px × 7px yellow circle (`#F8C301`)
+* **Text**: Uppercase, tracked text in brand black
+* **Spacing**: Consistent gap between dot and text
+
+#### Usage
+* Use at the top of major sections to indicate content category
+* Always uppercase text with letter spacing
+* Consistent yellow dot as visual anchor
+
+### Cards & Containers
+
+#### Card Design
+* **Background**: White (`#FFFFFF`)
+* **Border**: Subtle border using `rgba(0, 0, 0, 0.1)`
+* **Border Radius**: 12px for larger cards, 8px for smaller elements
+* **Shadow**: Subtle elevation with `box-shadow`
+* **Hover**: Lift effect with increased shadow and slight transform
+
+#### Service Cards
+* **Icon Container**: Blue background (`#04045B`) with white icons
+* **Hover Effect**: Icon transforms to yellow background with black icon
+* **Content**: Centered text with proper spacing hierarchy
+
+### Navigation & Interactive Elements
+
+#### Focus States
+* **Outline**: 2px solid brand primary (`#04045B`)
+* **Offset**: 2px outline offset for accessibility
+* **Class**: Use `.focus-ring` utility for consistency
+
+#### Hover Effects
+* **Transform**: Subtle `translateY(-2px)` for lift effect
+* **Transition**: 0.3s ease for smooth interactions
+* **Color Changes**: Primary to accent color transitions
+
+## Responsive Design
+
+### Mobile-First Approach
+* Always design mobile experience first
+* Use horizontal carousels for mobile when content exceeds viewport
+* Implement touch-friendly navigation controls
+* Maintain readability with appropriate font sizes
+
+### Carousel Implementation
+* **Desktop**: Grid layouts (2-3 columns)
+* **Mobile**: Horizontal scroll with navigation arrows
+* **Controls**: Circular buttons with brand colors
+* **Accessibility**: Proper ARIA labels and keyboard support
+
+## Content Guidelines
+
+### Headings
+* **Main Sections**: "Services That Shape Stronger Leaders" style - bold, impactful
+* **Consistency**: Maintain similar phrasing patterns across sections
+* **Action-Oriented**: Use active voice and clear value propositions
+
+### Descriptions
+* **Length**: 1-2 sentences for card descriptions
+* **Tone**: Professional but approachable
+* **Focus**: Benefits and outcomes rather than features
+
+### Statistics
+* **Format**: Large numbers with descriptive labels
+* **Visual**: Yellow square bullets next to labels
+* **Animation**: Counter animations for number reveals
+
+## Component Protection Policies
+
+### 🔒 Protected Components List
+
+#### Primary CTA Button (`/components/PrimaryCTAButton.tsx`)
+* **PROTECTION LEVEL**: ABSOLUTE - Never modify main component file
+* **ALLOWED MODIFICATIONS**: CSS overrides, wrapper styling, context-specific changes only
+* **REASON**: Contains sophisticated animations and core brand functionality
+* **OVERRIDE METHOD**: Use CSS classes in `globals.css` with `!important` declarations
+* **EXCEPTION POLICY**: No exceptions - this rule must always be followed
+
+#### BrandedTag Component (`/components/about/BrandedTag.tsx`)
+* **PROTECTION LEVEL**: MODERATE - Modify with caution
+* **ALLOWED MODIFICATIONS**: Color variants, sizing adjustments
+* **PRESERVE**: Core structure and eyebrow text functionality
+
+### Modification Guidelines for Protected Components
+
+1. **Assessment**: Always check if component is in protected list
+2. **CSS First**: Try CSS overrides before component modification
+3. **Wrapper Strategy**: Create wrapper components for customization
+4. **Documentation**: Document any protection-level changes
+5. **Testing**: Ensure animations and core functionality remain intact
+
+## Accessibility Requirements
+
+### ARIA Implementation
+* **Labels**: Proper `aria-label` for interactive elements
+* **Roles**: Use `role="list"` and `role="listitem"` for card grids
+* **IDs**: Unique IDs for `aria-labelledby` and `aria-describedby`
+
+### Keyboard Navigation
+* **Focus Management**: Logical tab order through interactive elements
+* **Arrow Keys**: Support for arrow key navigation in carousels
+* **Enter/Space**: Activation keys for interactive elements
+
+### Color Contrast
+* **Text**: Ensure sufficient contrast ratios for accessibility
+* **Interactive Elements**: Maintain contrast in all states
+* **Focus Indicators**: High contrast focus outlines
+
+## Animation & Transitions
+
+### Motion Guidelines
+* **Duration**: 0.3s for standard transitions, 0.6s for entrance animations
+* **Easing**: `ease` or `cubic-bezier` for natural motion
+* **Transforms**: Prefer transforms over layout-affecting properties
+
+### Entrance Animations
+* **Cards**: Fade in with slight upward motion
+* **Text**: Staggered reveals for content hierarchy
+* **Images**: Subtle scale or parallax effects
+
+### Hover States
+* **Lift**: 2-4px translateY for elevation effect
+* **Scale**: Minimal scale (1.05) for icons and small elements
+* **Shadow**: Increased shadow depth for depth perception
+
+## Image Usage Guidelines
+
+### Reference Images
+* **IMPORTANT**: Screenshots or images provided for reference should NEVER be used directly in the design
+* **Purpose**: Reference images are for understanding layout, structure, and visual guidance only
+* **Implementation**: Always use appropriate, relevant images that match the actual content
+* **Content-Appropriate**: Select images that align with the specific content, context, and purpose of each element
+
+### When to Use Provided Images
+* **Explicit Instructions**: Only use provided images when specifically instructed to "use this image", "put this image", or "replace with this image"
+* **Figma Imports**: Use imported Figma assets when they are part of the design being implemented
+* **User Requests**: When users explicitly ask to include or replace with a specific image
+
+### Image Selection
+* **Relevance**: Choose images that directly relate to the content topic
+* **Quality**: Use high-quality, professional images appropriate for leadership development context
+* **Consistency**: Maintain visual consistency across similar content types
+* **Accessibility**: Ensure images have appropriate alt text and contrast
+
+ Some of the base components you are using may have styling(eg. gap/typography) baked in as defaults.
+So make sure you explicitly set any styling information from the guidelines in the generated react to override the defaults.