Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.84.1.lve.el8.x86_64

PHP Version:

8.2.30

User:

u176134211

Directory:

/home/u176134211/domains/softwarepass.store/public_html

Free Space:

8.23 TB

🔧 Quick Actions

✏️ Editing: design.md

# Software Pass Store - Design Document

## Part 1: Visual Design System

### Overview
Software Pass Store features a clean, professional design that builds trust through:
- **Trust-First Aesthetic**: Professional color palette with deep blues and clean whites
- **Modern Simplicity**: Minimalist layouts with generous whitespace
- **Visual Hierarchy**: Clear typography scale and consistent spacing
- **Professional Polish**: Subtle animations and smooth transitions
- **Accessibility Focus**: High contrast, readable fonts, clear CTAs

### Color Palette

#### Primary Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--primary-blue` | `#1E40AF` | Primary brand color, headings, key UI elements |
| `--primary-blue-dark` | `#1E3A8A` | Hover states, emphasis |
| `--primary-blue-light` | `#3B82F6` | Links, accents |

#### Secondary Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--secondary-teal` | `#0D9488` | Secondary accents, category icons, highlights |
| `--secondary-teal-dark` | `#0F766E` | Hover states |
| `--secondary-teal-light` | `#14B8A6` | Light accents |

#### Accent Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--accent-gold` | `#F59E0B` | Primary CTAs, badges, highlights |
| `--accent-gold-dark` | `#D97706` | CTA hover states |
| `--accent-gold-light` | `#FBBF24` | Light accents |

#### Neutral Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--white` | `#FFFFFF` | Background, cards |
| `--gray-50` | `#F8FAFC` | Section backgrounds |
| `--gray-100` | `#F1F5F9` | Subtle backgrounds, borders |
| `--gray-200` | `#E2E8F0` | Borders, dividers |
| `--gray-400` | `#94A3B8` | Secondary text, placeholders |
| `--gray-600` | `#475569` | Body text |
| `--gray-800` | `#1E293B` | Primary text, headings |
| `--gray-900` | `#0F172A` | Dark text, footer |

#### Semantic Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--success-green` | `#10B981` | Success states, trust badges |
| `--success-green-light` | `#D1FAE5` | Success backgrounds |
| `--error-red` | `#EF4444` | Error states |
| `--warning-yellow` | `#F59E0B` | Warning states |

### Typography System

#### Font Families
| Token | Value | Usage |
|-------|-------|-------|
| `--font-heading` | `Inter, system-ui, sans-serif` | All headings |
| `--font-body` | `Inter, system-ui, sans-serif` | Body text |

#### Type Scale
| Level | Size | Line Height | Weight | Letter Spacing | Usage |
|-------|------|-------------|--------|----------------|-------|
| Hero | 56px (3.5rem) | 1.1 | 700 | -0.02em | Hero headlines |
| H1 | 42px (2.625rem) | 1.2 | 700 | -0.01em | Page titles |
| H2 | 32px (2rem) | 1.25 | 600 | -0.01em | Section headings |
| H3 | 24px (1.5rem) | 1.3 | 600 | 0 | Card titles |
| H4 | 20px (1.25rem) | 1.4 | 600 | 0 | Subsection titles |
| Body Large | 18px (1.125rem) | 1.6 | 400 | 0 | Lead paragraphs |
| Body | 16px (1rem) | 1.6 | 400 | 0 | Default body text |
| Body Small | 14px (0.875rem) | 1.5 | 400 | 0 | Captions, metadata |
| Caption | 12px (0.75rem) | 1.4 | 500 | 0.02em | Labels, badges |

### Spacing System

#### Section Spacing
| Size | Value | Usage |
|------|-------|-------|
| Section XL | 120px (7.5rem) | Major sections |
| Section LG | 96px (6rem) | Standard sections |
| Section MD | 64px (4rem) | Compact sections |
| Section SM | 48px (3rem) | Small sections |

#### Content Spacing
| Size | Value | Usage |
|------|-------|-------|
| Space 3XL | 64px (4rem) | Large gaps |
| Space 2XL | 48px (3rem) | Section content gaps |
| Space XL | 32px (2rem) | Card gaps |
| Space LG | 24px (1.5rem) | Component gaps |
| Space MD | 16px (1rem) | Element gaps |
| Space SM | 12px (0.75rem) | Tight gaps |
| Space XS | 8px (0.5rem) | Minimal gaps |
| Space 2XS | 4px (0.25rem) | Micro gaps |

#### Container Widths
| Container | Max Width | Padding |
|-----------|-----------|---------|
| Full | 100% | 24px (mobile), 48px (tablet), 64px (desktop) |
| Default | 1280px | 24px (mobile), 48px (tablet), 64px (desktop) |
| Narrow | 960px | 24px (mobile), 48px (desktop) |

### Border Radius
| Token | Value | Usage |
|-------|-------|-------|
| `--radius-sm` | 4px | Small elements, badges |
| `--radius-md` | 8px | Buttons, inputs |
| `--radius-lg` | 12px | Cards, panels |
| `--radius-xl` | 16px | Large cards, modals |
| `--radius-2xl` | 24px | Feature cards |
| `--radius-full` | 9999px | Pills, avatars |

### Shadows
| Token | Value | Usage |
|-------|-------|-------|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle elevation |
| `--shadow-md` | `0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)` | Cards |
| `--shadow-lg` | `0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)` | Elevated cards |
| `--shadow-xl` | `0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)` | Modals, dropdowns |
| `--shadow-glow` | `0 0 20px rgba(30, 64, 175, 0.15)` | Focus states |

---

## Part 2: Global Animations & Interactions

### Animation Philosophy
- **Purposeful Motion**: Every animation serves a functional purpose
- **Subtle Elegance**: Smooth, understated transitions that enhance without distracting
- **Performance First**: Hardware-accelerated transforms, will-change optimization
- **Consistent Timing**: Unified easing curves and duration standards

### Animation Characteristics
| Property | Value | Notes |
|----------|-------|-------|
| Default Duration | 300ms | Standard transitions |
| Long Duration | 500ms | Complex animations |
| Micro Duration | 150ms | Hover states |
| Default Easing | `cubic-bezier(0.4, 0, 0.2, 1)` | Smooth ease-out |
| Bounce Easing | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Playful interactions |
| Linear | `linear` | Continuous animations |

### Page Load Animation Sequence
```
1. Navigation fades in (0ms delay, 400ms duration)
2. Hero content stagger reveal (200ms delay start, 100ms stagger)
3. Background elements fade in (300ms delay)
```

### Smooth Scroll Behavior
- **Type**: Native CSS smooth scroll
- **Implementation**: `scroll-behavior: smooth` on html
- **Duration**: Browser-controlled (typically 300-500ms)
- **Easing**: Browser default

### Scroll-Triggered Reveal Animations
- **Trigger Point**: 15% viewport intersection
- **Animation**: Fade in + translate Y (20px → 0)
- **Duration**: 600ms
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)`
- **Stagger**: 100ms between sibling elements

### Common Hover Patterns

#### Button Hover
- **Transform**: `scale(1.02)`
- **Background**: Darken 10%
- **Shadow**: Increase to next level
- **Duration**: 200ms
- **Easing**: `ease-out`

#### Card Hover
- **Transform**: `translateY(-8px)`
- **Shadow**: `--shadow-md` → `--shadow-xl`
- **Border**: Subtle color shift
- **Duration**: 300ms
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)`

#### Link Hover
- **Color**: Shift to primary
- **Underline**: Width 0 → 100%
- **Duration**: 200ms

### Navigation Interactions

#### Sticky Navigation Transform
- **Trigger**: Scroll past 50px
- **Background**: Transparent → `--white` with 95% opacity
- **Shadow**: None → `--shadow-sm`
- **Duration**: 300ms
- **Backdrop**: `backdrop-filter: blur(10px)`

#### Mobile Menu Toggle
- **Animation**: Slide down + fade in
- **Duration**: 300ms
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)`
- **Icon**: Hamburger → X rotation (180deg)

### Performance Optimizations
- Use `transform` and `opacity` only for animations
- Apply `will-change: transform, opacity` on animated elements
- Use Intersection Observer for scroll triggers
- Respect `prefers-reduced-motion` media query

---

## Part 3: Content Sections

### Section: Navigation

**Layout & Style:**
- **Position**: Fixed top, full width, z-index 50
- **Height**: 72px desktop, 64px mobile
- **Container**: Max-width 1280px, centered
- **Layout**: Flex, space-between, items-center
- **Background**: Transparent initially, white/95% + blur on scroll
- **Logo**: Height 40px, font-weight 700, color `--primary-blue`
- **Nav Links**: Font 16px, weight 500, color `--gray-600`, gap 32px
- **CTA Button**: Background `--accent-gold`, text white, padding 12px 24px, radius 8px

**Interactions:**
- **Scroll Transform**: 
  - Background: transparent → rgba(255,255,255,0.95)
  - Backdrop-filter: blur(0) → blur(10px)
  - Box-shadow: none → `--shadow-sm`
  - Duration: 300ms, easing: ease-out
- **Nav Link Hover**:
  - Color: `--gray-600` → `--primary-blue`
  - Duration: 200ms
- **CTA Button Hover**:
  - Transform: scale(1.02)
  - Background: `--accent-gold` → `--accent-gold-dark`
  - Duration: 200ms
- **Mobile Menu**:
  - Slide down from -100% to 0
  - Fade in opacity 0 → 1
  - Duration: 300ms

**Content:**
- Logo: "Software Pass Store" with icon (Lucide: `Package`)
- Nav Links: Products, How It Works, Pricing, FAQ, Contact
- CTA: "Get Started"

---

### Section: Hero

**Layout & Style:**
- **Structure**: Full-width, min-height 90vh, flex center
- **Background**: Gradient from `--gray-50` to white, subtle pattern overlay
- **Container**: Max-width 1280px, padding 64px
- **Content Layout**: Two-column grid (60% text, 40% visual) on desktop, stacked on mobile
- **Text Column**: Left-aligned, max-width 640px
- **Visual Column**: Right side, decorative elements

**Typography:**
- **Headline**: 56px (42px mobile), weight 700, color `--gray-900`, line-height 1.1
- **Subheadline**: 20px, weight 400, color `--gray-600`, line-height 1.6, margin-top 24px
- **Max-width**: 540px for readability

**Interactions:**
- **Load Animation** (staggered):
  - Headline: fade in + translateY(30px → 0), delay 0ms, duration 600ms
  - Subheadline: fade in + translateY(20px → 0), delay 150ms, duration 600ms
  - CTAs: fade in + translateY(20px → 0), delay 300ms, duration 600ms
  - Trust badges: fade in, delay 450ms, duration 500ms
  - Visual elements: fade in + scale(0.95 → 1), delay 200ms, duration 700ms
- **CTA Buttons**:
  - Primary: scale(1.02), background darken on hover
  - Secondary: border color shift, background fill on hover
  - Duration: 200ms

**Content:**
- **Headline**: "Affordable Digital Access for Everyone"
- **Subheadline**: "Get premium software subscriptions at a fraction of the cost. Students, freelancers, and professionals trust us for reliable, secure access to the tools they need."
- **Primary CTA**: "Browse Products" (accent gold)
- **Secondary CTA**: "How It Works" (outline)
- **Trust Badges** (horizontal row with icons):
  - "10,000+ Happy Customers" (Lucide: `Users`)
  - "24/7 Support" (Lucide: `Headphones`)
  - "Money-Back Guarantee" (Lucide: `ShieldCheck`)

**Visual Elements:**
- Decorative gradient orbs (subtle, behind content)
- Floating product icons (YouTube, Spotify, Adobe - use Lucide generic icons: `Play`, `Music`, `Palette`)

---

### Section: Product Categories

**Layout & Style:**
- **Structure**: Full-width, padding 96px 0
- **Background**: White
- **Container**: Max-width 1280px
- **Header**: Centered, margin-bottom 64px
- **Grid**: 4 columns desktop, 2 columns tablet, 1 column mobile
- **Gap**: 24px

**Category Card Style:**
- **Background**: `--gray-50`
- **Border**: 1px solid `--gray-200`
- **Border Radius**: 16px
- **Padding**: 32px
- **Icon**: 48px container, `--secondary-teal` background at 10% opacity, icon 24px
- **Title**: 20px, weight 600, color `--gray-800`
- **Description**: 14px, color `--gray-600`, margin-top 8px
- **Product Count**: 12px, color `--gray-400`, margin-top 12px

**Interactions:**
- **Scroll Reveal**: 
  - Fade in + translateY(30px → 0)
  - Stagger: 100ms between cards
  - Duration: 600ms
  - Easing: `cubic-bezier(0.4, 0, 0.2, 1)`
- **Card Hover**:
  - Transform: translateY(-8px)
  - Border-color: `--gray-200` → `--secondary-teal`
  - Shadow: none → `--shadow-lg`
  - Duration: 300ms
- **Icon Hover**:
  - Background opacity: 10% → 20%
  - Duration: 200ms

**Content:**
| Category | Icon | Description | Products |
|----------|------|-------------|----------|
| Entertainment | `Play` (Lucide) | Stream your favorite content ad-free | YouTube Premium, Netflix, Spotify |
| Creative Design | `Palette` (Lucide) | Professional tools for creators | Adobe CC, Canva Pro, Figma |
| AI Productivity | `Sparkles` (Lucide) | Supercharge your workflow with AI | ChatGPT Plus, Claude Pro, Midjourney |
| Career Utilities | `Briefcase` (Lucide) | Tools to advance your career | LinkedIn Premium, NordVPN, Microsoft 365 |

---

### Section: How It Works

**Layout & Style:**
- **Structure**: Full-width, padding 96px 0
- **Background**: `--gray-50`
- **Container**: Max-width 1280px
- **Header**: Centered, margin-bottom 64px
- **Steps Layout**: 4-column grid desktop, 2x2 tablet, stacked mobile
- **Gap**: 32px
- **Connector**: Horizontal line between steps (desktop only), dashed, `--gray-300`

**Step Card Style:**
- **Number Badge**: 48px circle, `--primary-blue` background, white text, font 20px weight 700
- **Title**: 20px, weight 600, color `--gray-800`, margin-top 24px
- **Description**: 16px, color `--gray-600`, margin-top 12px, line-height 1.6
- **Icon**: 32px, `--secondary-teal`, below number

**Interactions:**
- **Scroll Reveal**:
  - Fade in + translateY(40px → 0)
  - Stagger: 150ms between steps
  - Duration: 600ms
- **Number Badge Animation**:
  - Scale: 0.8 → 1
  - Duration: 400ms
  - Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` (bounce)
- **Connector Line**:
  - Width: 0% → 100%
  - Duration: 800ms
  - Easing: ease-out

**Content:**
| Step | Number | Title | Description | Icon |
|------|--------|-------|-------------|------|
| 1 | 01 | Choose Your Product | Browse our catalog of premium software subscriptions | `Search` (Lucide) |
| 2 | 02 | Complete Purchase | Secure checkout with multiple payment options | `CreditCard` (Lucide) |
| 3 | 03 | Receive Credentials | Get instant access details via email | `Mail` (Lucide) |
| 4 | 04 | Start Using | Log in and enjoy your premium software | `Rocket` (Lucide) |

---

### Section: Trust Signals

**Layout & Style:**
- **Structure**: Full-width, padding 80px 0
- **Background**: Gradient from `--primary-blue` to `--primary-blue-dark`
- **Container**: Max-width 1280px
- **Layout**: 3-column grid desktop, stacked mobile
- **Gap**: 48px

**Trust Card Style:**
- **Icon Container**: 64px circle, white/10% background
- **Icon**: 28px, white
- **Title**: 20px, weight 600, white
- **Description**: 16px, white/80%, margin-top 12px
- **Checkmark List**: Margin-top 16px
  - Checkmark: 16px, `--success-green`
  - Text: 14px, white/70%

**Interactions:**
- **Scroll Reveal**:
  - Fade in + translateY(30px → 0)
  - Stagger: 100ms
  - Duration: 600ms
- **Icon Hover**:
  - Background: 10% → 20%
  - Transform: scale(1.05)
  - Duration: 200ms

**Content:**
| Signal | Icon | Title | Description | Checkmarks |
|--------|------|-------|-------------|------------|
| Guarantee | `ShieldCheck` (Lucide) | Money-Back Guarantee | Not satisfied? Get a full refund within 7 days. | 7-day refund policy, No questions asked, Instant processing |
| Support | `Headphones` (Lucide) | 24/7 Customer Support | Our team is always here to help you. | Live chat support, Email responses within 2 hours, Setup assistance |
| Security | `Lock` (Lucide) | Secure & Private | Your data and transactions are protected. | Encrypted payments, Privacy guaranteed, Secure credential delivery |

---

### Section: Featured Products

**Layout & Style:**
- **Structure**: Full-width, padding 96px 0
- **Background**: White
- **Container**: Max-width 1280px
- **Header**: Flex, space-between, margin-bottom 48px
- **Title**: Left-aligned
- **View All Link**: Right-aligned, `--primary-blue`
- **Grid**: 3 columns desktop, 2 columns tablet, 1 column mobile
- **Gap**: 24px

**Product Card Style:**
- **Background**: White
- **Border**: 1px solid `--gray-200`
- **Border Radius**: 16px
- **Padding**: 0 (image area) + 24px (content area)
- **Image Area**: 80px height, `--gray-100` background, centered icon
- **Product Icon**: 48px container, category color background
- **Category Badge**: Positioned top-right, 8px padding, `--radius-full`
- **Product Name**: 18px, weight 600, color `--gray-800`
- **Description**: 14px, color `--gray-600`, margin-top 8px
- **Price Row**: Flex, space-between, margin-top 16px
- **Price**: 24px, weight 700, `--primary-blue`
- **Period**: 14px, color `--gray-400`
- **Original Price**: 14px, strikethrough, `--gray-400`
- **CTA Button**: Full width, margin-top 16px, `--accent-gold`

**Interactions:**
- **Scroll Reveal**:
  - Fade in + translateY(30px → 0)
  - Stagger: 100ms between cards
  - Duration: 600ms
- **Card Hover**:
  - Transform: translateY(-8px)
  - Shadow: `--shadow-md` → `--shadow-xl`
  - Border-color: `--gray-200` → `--primary-blue-light`
  - Duration: 300ms
- **CTA Button Hover**:
  - Transform: scale(1.02)
  - Background: `--accent-gold` → `--accent-gold-dark`
  - Duration: 200ms

**Content:**
| Product | Category | Icon | Description | Price | Period | Original |
|---------|----------|------|-------------|-------|--------|----------|
| YouTube Premium | Entertainment | `Play` | Ad-free videos, offline playback, background play | $4.99 | /month | $11.99 |
| Spotify Premium | Entertainment | `Music` | Ad-free music, offline listening, high quality | $3.99 | /month | $9.99 |
| Adobe Creative Cloud | Creative | `Palette` | Full suite of creative apps | $24.99 | /month | $54.99 |
| ChatGPT Plus | AI | `Sparkles` | GPT-4 access, faster responses, plugins | $9.99 | /month | $20.00 |
| LinkedIn Premium | Career | `Briefcase` | InMail credits, profile insights, learning | $14.99 | /month | $29.99 |
| NordVPN | Career | `Globe` | Secure browsing, 6000+ servers, no logs | $2.99 | /month | $12.99 |

---

### Section: Testimonials

**Layout & Style:**
- **Structure**: Full-width, padding 96px 0
- **Background**: `--gray-50`
- **Container**: Max-width 1280px
- **Header**: Centered, margin-bottom 64px
- **Layout**: 3-column grid desktop, stacked mobile
- **Gap**: 24px

**Testimonial Card Style:**
- **Background**: White
- **Border Radius**: 16px
- **Padding**: 32px
- **Shadow**: `--shadow-md`
- **Quote Icon**: 32px, `--secondary-teal` at 20% opacity
- **Quote Text**: 16px, color `--gray-700`, line-height 1.7, font-style italic
- **Author Row**: Flex, margin-top 24px, gap 16px
- **Avatar**: 48px circle, `--gray-200` background, centered initials
- **Author Name**: 16px, weight 600, color `--gray-800`
- **Author Role**: 14px, color `--gray-500`
- **Rating**: 5 stars, `--accent-gold`, margin-top 8px

**Interactions:**
- **Scroll Reveal**:
  - Fade in + translateY(30px → 0)
  - Stagger: 100ms
  - Duration: 600ms
- **Card Hover**:
  - Transform: translateY(-4px)
  - Shadow: `--shadow-md` → `--shadow-lg`
  - Duration: 300ms

**Content:**
| Name | Role | Quote | Rating |
|------|------|-------|--------|
| Sarah M. | Design Student | "As a student, Adobe CC was way out of my budget. Software Pass Store made it affordable. The setup was instant and I've had zero issues!" | 5 stars |
| James K. | Freelance Developer | "I was skeptical at first, but the 24/7 support and money-back guarantee convinced me. Best decision for my workflow - ChatGPT Plus at half price!" | 5 stars |
| Emily R. | Remote Worker | "NordVPN and Microsoft 365 for less than the price of one subscription elsewhere. Customer support helped me set everything up in minutes." | 5 stars |

---

### Section: FAQ Preview

**Layout & Style:**
- **Structure**: Full-width, padding 96px 0
- **Background**: White
- **Container**: Max-width 800px (narrow), centered
- **Header**: Centered, margin-bottom 48px
- **Accordion**: Stack, gap 16px

**Accordion Item Style:**
- **Background**: `--gray-50`
- **Border**: 1px solid `--gray-200`
- **Border Radius**: 12px
- **Padding**: 20px 24px
- **Question**: 16px, weight 600, color `--gray-800`
- **Chevron Icon**: 20px, `--gray-400`, right-aligned
- **Answer**: 16px, color `--gray-600`, line-height 1.6, padding-top 16px

**Interactions:**
- **Scroll Reveal**:
  - Fade in + translateY(20px → 0)
  - Stagger: 80ms
  - Duration: 500ms
- **Accordion Toggle**:
  - Height: 0 → auto (smooth)
  - Chevron: rotate(0deg → 180deg)
  - Duration: 300ms
  - Easing: `cubic-bezier(0.4, 0, 0.2, 1)`
- **Item Hover**:
  - Border-color: `--gray-200` → `--gray-300`
  - Duration: 200ms

**Content:**
| Question | Answer |
|----------|--------|
| Is this legal and safe? | Yes! We provide legitimate shared accounts and family plans. All credentials are obtained through official channels. Your access is secure and private. |
| How do I receive my credentials? | Immediately after purchase, you'll receive an email with detailed login instructions. Most products are activated within minutes. |
| What if something doesn't work? | We offer 24/7 support and a 7-day money-back guarantee. If you encounter any issues, our team will resolve them or refund your purchase. |
| Can I use these on multiple devices? | Most subscriptions allow multiple device connections. Specific limits are listed on each product page. |

**Footer Link:** "View all FAQs →" centered below accordion

---

### Section: CTA Banner

**Layout & Style:**
- **Structure**: Full-width, padding 80px 0
- **Background**: Gradient from `--primary-blue` to `--secondary-teal`
- **Container**: Max-width 800px, centered
- **Content**: Centered text alignment
- **Border Radius**: 24px (inner container)
- **Margin**: 0 24px (side padding)

**Typography:**
- **Headline**: 36px (28px mobile), weight 700, white, line-height 1.2
- **Subtext**: 18px, white/80%, margin-top 16px
- **CTA Button**: Margin-top 32px, background white, text `--primary-blue`, padding 16px 32px

**Interactions:**
- **Scroll Reveal**:
  - Fade in + scale(0.98 → 1)
  - Duration: 600ms
- **CTA Button Hover**:
  - Transform: scale(1.03)
  - Background: white → `--gray-100`
  - Duration: 200ms
- **Background Animation** (subtle):
  - Gradient position shift
  - Duration: 10s
  - Easing: linear
  - Infinite loop

**Content:**
- **Headline**: "Ready to Save on Premium Software?"
- **Subtext**: "Join 10,000+ satisfied customers who trust Software Pass Store for affordable digital access."
- **CTA**: "Browse All Products"

---

### Section: Footer

**Layout & Style:**
- **Structure**: Full-width, padding 64px 0 32px
- **Background**: `--gray-900`
- **Container**: Max-width 1280px
- **Layout**: 4-column grid desktop (Logo/About, Products, Support, Legal), stacked mobile
- **Gap**: 48px
- **Bottom Bar**: Border-top 1px `--gray-800`, margin-top 48px, padding-top 32px

**Column Styles:**
- **Logo**: White, font 20px weight 700
- **Tagline**: 14px, `--gray-400`, margin-top 12px, max-width 280px
- **Column Title**: 14px, weight 600, white, uppercase, letter-spacing 0.05em
- **Links**: 14px, `--gray-400`, margin-top 12px per link
- **Social Icons**: 24px, `--gray-400`, gap 16px

**Interactions:**
- **Link Hover**:
  - Color: `--gray-400` → white
  - Duration: 200ms
- **Social Icon Hover**:
  - Color: `--gray-400` → `--secondary-teal`
  - Transform: translateY(-2px)
  - Duration: 200ms

**Content:**
| Column | Items |
|--------|-------|
| Brand | Logo, Tagline "Affordable Digital Access for Everyone", Social icons (Twitter, Discord, Email) |
| Products | Entertainment, Creative Design, AI Productivity, Career Utilities, View All |
| Support | Help Center, Contact Us, Setup Guides, Refund Policy |
| Legal | Terms of Service, Privacy Policy, Cookie Policy |

---

## Part 4: Responsive Breakpoints

| Breakpoint | Width | Adjustments |
|------------|-------|-------------|
| Mobile | < 640px | Single column, reduced spacing, hamburger menu |
| Tablet | 640px - 1024px | 2 columns where applicable, adjusted typography |
| Desktop | > 1024px | Full layout as designed |

### Mobile-Specific Adjustments
- Hero headline: 42px
- Section padding: 64px 0
- Grid columns: 1 (stacked)
- Navigation: Hamburger menu
- Card padding: 20px
- CTA buttons: Full width

---

## Part 5: Icon Reference (Lucide Only)

| Usage | Icon Name |
|-------|-----------|
| Logo | `Package` |
| Entertainment | `Play` |
| Creative | `Palette` |
| AI | `Sparkles` |
| Career | `Briefcase` |
| Search/Choose | `Search` |
| Payment | `CreditCard` |
| Email/Delivery | `Mail` |
| Start/Launch | `Rocket` |
| Guarantee | `ShieldCheck` |
| Support | `Headphones` |
| Security | `Lock` |
| Music | `Music` |
| Globe/VPN | `Globe` |
| Users/Customers | `Users` |
| Star/Rating | `Star` |
| Chevron | `ChevronDown` |
| Menu | `Menu` |
| Close | `X` |
| Arrow | `ArrowRight` |
| External Link | `ExternalLink` |
| Check | `Check` |
| Twitter | `Twitter` |
| Message | `MessageCircle` (Discord alternative) |
| Email | `Mail` |

---

*Document Version: 1.0*
*Created for: Software Pass Store*
*Design System: Trust-First Professional*

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: design.md

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation