`SITE_STRUCTURE.md`

410 lines
# Angel's Flowers - Site Structure

## Navigation Hierarchy

```
Angel's Flowers Website
│
├── Home (/)
│   ├── Hero Section
│   ├── Why Choose Us (4 features)
│   ├── Featured Collections (3 products)
│   ├── Family Story Preview
│   └── Call-to-Action
│
├── Flowers (/flowers)
│   ├── Ecuadorian Roses
│   │   ├── Classic Red Roses
│   │   ├── White Rose Elegance
│   │   ├── Pink Perfection
│   │   ├── Yellow Sunshine
│   │   ├── Rainbow Rose Collection
│   │   └── Lavender Dreams
│   │
│   ├── Mixed Arrangements
│   │   ├── Garden Paradise
│   │   ├── Spring Meadow
│   │   ├── Tropical Sunset
│   │   └── Rustic Romance
│   │
│   └── Special Occasions
│       ├── Wedding Collection
│       ├── Sympathy Arrangements
│       ├── Corporate Events
│       └── Birthday Celebration
│
├── Our Story (/about)
│   ├── Origin Story
│   ├── Timeline (1995-2025)
│   ├── Our Values (4 core values)
│   ├── Ecuador Connection
│   └── Meet the Family
│
└── Contact (/contact)
    ├── Contact Information
    ├── Contact Form
    ├── Map & Directions
    └── FAQs

```

## Component Architecture

```
Layout (Wrapper for all pages)
│
├── Navbar (Sticky)
│   ├── Logo
│   ├── Navigation Links
│   ├── Phone CTA Button
│   └── Mobile Menu (Hamburger)
│
├── Page Content (Dynamic)
│   └── [Individual page components]
│
└── Footer
    ├── About Section
    ├── Quick Links
    ├── Contact Info
    ├── Business Hours
    └── Social Media Links
```

## User Flow Diagram

```
Landing on Homepage
│
├─→ Browse Featured Flowers
│   ├─→ Click "View All Flowers"
│   │   └─→ Flowers Page
│   │       └─→ Call to Order
│   │
│   └─→ Click "Call to Order"
│       └─→ Phone Call
│
├─→ Learn About Family Story
│   └─→ Click "Read Our Full Story"
│       └─→ About Page
│           └─→ Contact CTA
│
└─→ Contact Directly
    ├─→ Click "Call Us"
    │   └─→ Phone Call
    │
    └─→ Click "Visit Us"
        └─→ Contact Page
            ├─→ Fill Form
            ├─→ View Map
            └─→ Get Directions
```

## Page Component Structure

### Homepage
```
Hero Section (Full screen)
├── Background Image with Overlay
├── Heading + Tagline
└── 2 CTA Buttons

Why Choose Us
├── Section Heading
└── 4 Feature Cards
    ├── Icon
    ├── Title
    └── Description

Featured Collections
├── Section Heading
└── 3 Product Cards
    ├── Image
    ├── Name & Price
    ├── Description
    └── View Link

Family Story Preview
├── Image (Left)
└── Content (Right)
    ├── Heading
    ├── Story Text
    └── CTA Button

Call-to-Action Banner
├── Heading
├── Description
└── 2 CTA Buttons
```

### Flowers Page
```
Hero Section
├── Page Title
└── Description

For Each Category:
├── Category Heading
└── Product Grid (3 columns)
    └── Product Card
        ├── Image (hover zoom effect)
        ├── Name
        ├── Price
        ├── Description
        ├── Feature List
        └── Call-to-Order Button

CTA Section
├── Heading
├── Description
└── Phone CTA Button
```

### About Page
```
Hero Section
├── Page Title
└── Description

Origin Story
├── Story Content (Left)
└── Image (Right)

Timeline
└── 5 Milestones
    ├── Year
    ├── Title
    └── Description

Values Section
└── 4 Value Cards
    ├── Icon
    ├── Title
    └── Description

Ecuador Connection
├── Image (Left)
└── Content (Right)
    ├── Heading
    ├── Explanation
    └── Bullet Points

Team Section
└── 3 Team Members
    ├── Photo
    ├── Name
    ├── Role
    └── Bio

CTA Section
```

### Contact Page
```
Hero Section

Contact Grid
├── Contact Cards (Left)
│   ├── Address Card
│   ├── Phone Card
│   ├── Email Card
│   ├── Hours Card
│   └── Social Links
│
└── Contact Form (Right)
    ├── Name Field
    ├── Email Field
    ├── Phone Field
    ├── Occasion Dropdown
    ├── Message Textarea
    └── Submit Button

Map Section
├── Map Display
└── 3 Info Cards
    ├── Parking Info
    ├── Accessibility
    └── Transit Info

FAQ Section
└── 5 Q&A Pairs
```

## Responsive Breakpoints

```
Mobile (< 640px)
├── Single column layouts
├── Stacked navigation (hamburger menu)
├── Larger touch targets
└── Simplified hero

Tablet (640px - 1024px)
├── 2-column grids
├── Visible navigation
└── Optimized images

Desktop (> 1024px)
├── 3-4 column grids
├── Full navigation bar
├── Larger hero sections
└── Side-by-side content
```

## Color Coding by Section

```
Primary Pink/Rose (#d03862)
├── Used for: Buttons, links, accents
└── Represents: Roses, love, warmth

Accent Green (#16a34a)
├── Used for: Secondary elements, foliage
└── Represents: Growth, nature, freshness

Warm Yellow (#eab308)
├── Used for: Highlights, special callouts
└── Represents: Sunshine, Ecuador, energy

Neutral Gray
├── Used for: Text, backgrounds
└── Represents: Elegance, sophistication
```

## Call-to-Action Hierarchy

### Primary CTAs (Conversion Focus)
1. "Call to Order" buttons (throughout site)
2. "Browse Our Flowers" (homepage hero)
3. Contact form submit (contact page)

### Secondary CTAs (Engagement)
1. "View All Flowers" (homepage)
2. "Read Our Full Story" (homepage)
3. "Visit Us in East LA" (multiple pages)

### Tertiary CTAs (Information)
1. Navigation links
2. Social media links
3. Map/directions links

## SEO Structure

```
Site-wide Elements
├── Title Tag Template: "[Page] | Angel's Flowers - East LA"
├── Meta Description Template
├── Structured Data (JSON-LD)
│   ├── LocalBusiness
│   ├── Organization
│   └── Product (for flowers)
└── Open Graph Tags

Per-Page Optimization
├── Homepage: Brand + Location keywords
├── Flowers: Product + Ecuadorian keywords
├── About: Story + family + Ecuador keywords
└── Contact: Location + contact keywords
```

## Conversion Funnel

```
Stage 1: Awareness
├── Landing on homepage
├── Seeing beautiful flower images
└── Reading about Ecuadorian quality

Stage 2: Interest
├── Browsing flower catalog
├── Reading family story
└── Understanding unique value

Stage 3: Consideration
├── Viewing specific products
├── Checking prices
└── Reading contact information

Stage 4: Action
├── Clicking call button
├── Filling contact form
└── Visiting physical store

Stage 5: Retention
├── Social media follow
├── Newsletter signup (future)
└── Repeat orders
```

## Technical Stack Visualization

```
Frontend Layer
├── React 18 (UI Components)
├── Next.js 14 (Framework)
└── TypeScript (Type Safety)

Styling Layer
├── Tailwind CSS (Utility Classes)
├── Custom CSS (Global Styles)
└── Google Fonts (Typography)

Build Layer
├── Next.js Compiler
├── PostCSS (CSS Processing)
└── TypeScript Compiler

Deployment Layer
├── Vercel (Recommended)
├── Netlify (Alternative)
└── Traditional Hosting (Alternative)
```

## File Size Targets

```
Page Load Performance Goals
├── Homepage: < 500KB total
├── Flowers Page: < 800KB total
├── About Page: < 600KB total
└── Contact Page: < 400KB total

Individual Assets
├── Hero Images: < 300KB each
├── Product Images: < 150KB each
├── Team Photos: < 100KB each
└── CSS Bundle: < 50KB
```

## Accessibility Tree

```
Website (role: document)
│
├── Navigation (role: navigation)
│   ├── Logo (role: link)
│   ├── Menu Items (role: menuitem)
│   └── Phone Button (role: button)
│
├── Main Content (role: main)
│   ├── Sections (role: region)
│   ├── Headings (h1-h6)
│   ├── Images (alt text)
│   └── Forms (labels + inputs)
│
└── Footer (role: contentinfo)
    ├── Links (role: link)
    └── Contact Info (role: list)
```

---

**All files located in**: `/root/WebsitesMisc/angelsflowers/`

**Quick access**:
- Homepage: `/root/WebsitesMisc/angelsflowers/app/page.tsx`
- Flowers: `/root/WebsitesMisc/angelsflowers/app/flowers/page.tsx`
- About: `/root/WebsitesMisc/angelsflowers/app/about/page.tsx`
- Contact: `/root/WebsitesMisc/angelsflowers/app/contact/page.tsx`
- Navbar: `/root/WebsitesMisc/angelsflowers/components/Navbar.tsx`
- Footer: `/root/WebsitesMisc/angelsflowers/components/Footer.tsx`