# Cart Rocket Website - llms.txt

## Overview
Cart Rocket is a Shopify app that enables merchants to create pre-loaded cart links with products, discounts, bundles, and tracking. The website is a single-page application showcasing the product's features, pricing, and benefits.

**URL:** https://cartrocket.dev
**Purpose:** Marketing website for Cart Rocket Shopify app
**Target Audience:** Shopify store owners and e-commerce marketers

## Site Structure

### Main Sections (Single Page)

1. **Hero Section** (Top of page)
   - Headline: "Send customers straight to checkout"
   - Value proposition: Build pre-loaded cart links with products, discounts, bundles, and tracking
   - CTAs: "Get started" (links to #pricing) and "Contact us" (links to #faq)
   - Visual: Interactive dashboard cards with parallax effects

2. **Logo Ticker** (Below hero)
   - Animated horizontal scrolling ticker showing partner/integration logos
   - Brands: NaviAI, Lumora, NovaTech, VitaHealth

3. **Process Section** (#process)
   - Title: "How it works"
   - Three-step interactive cards:
     - Step 01: Build Presets - Choose products, apply variants, set discounts
     - Step 02: Deploy Links - Paste links into Meta Ads, SMS, or Email flows
     - Step 03: Track & Scale - Monitor AOV and conversion rates in real-time
   - Interactive hover effects showing images on the right side of cards

4. **Feature Section** (#feature)
   - Title: "Built for high conversion"
   - Four feature tabs:
     - Pre-loaded carts: Skip product page friction
     - Auto discounts: Stack discounts without coupon codes
     - Smart Bundling: Build high-AOV product bundles
     - Advanced ROI: Track revenue by campaign source
   - Dynamic content switching with GSAP animations

5. **Integration Section** (#integration)
   - Title: "Works with your existing stack"
   - Vertical scrolling logo tickers showing integrations:
     - Column 1 (up): Klaviyo, Facebook, Google Ads, TikTok
     - Column 2 (down): Instagram, Pinterest, Shopify
   - Integration logos are SVG files in images/icons/

6. **Pricing Section** (#pricing)
   - Title: "Flexible pricing"
   - Three pricing tiers:
     - Starter Plan: $24/month - 50 Active Cart Presets, Basic ROI Analytics, Email support
     - Growth Plan: $69/month - Unlimited Cart Presets, Advanced AOV Dashboard, Priority support
     - Scale Plan: $129/month - Unlimited everything, Dedicated success manager, API access
   - Interactive tab switching with pricing details
   - Customer testimonials with ratings (4.9/5)

7. **Case Study Section** (#case-study)
   - Title: "Real results from real merchants"
   - Two case studies:
     - Aura Beauty: "Preset Perfection" - Increased conversion rate by 35%
     - Glide Snow: "Bundle Boost" - Increased AOV by $45
   - Customer testimonials with quotes and avatars

8. **FAQ Section** (#faq)
   - Title: "Frequently asked questions"
   - Accordion-style questions covering:
     - How pre-loaded cart links work
     - Multiple discount codes support
     - Influencer UTM tracking
     - Theme code requirements
   - Newsletter signup form

9. **Footer**
   - Contact: hello@cartrocket.dev
   - Navigation links
   - Social media links

## Key Features & Functionality

### Interactive Elements
- Smooth scrolling navigation (Lenis library)
- GSAP animations for entrance effects and parallax
- Mobile-responsive hamburger menu
- Tab switching for features and pricing
- Accordion FAQ section
- Process cards with hover image reveal
- Button hover animations (scale + icon rotation)

### Technical Stack
- **HTML5** - Semantic markup
- **CSS3** - Custom styles in style.css
- **JavaScript** - Vanilla JS in main.js
- **Tailwind CSS** - Utility-first CSS framework (CDN)
- **GSAP** - Animation library (ScrollTrigger plugin)
- **Lenis** - Smooth scrolling library

### File Structure
```
cartrocket-website/
├── index.html          # Main HTML file (single-page)
├── style.css           # Custom CSS styles
├── main.js             # JavaScript functionality
├── main.css            # Large CSS file (legacy, mostly unused)
├── images/             # Image assets
│   ├── icons/          # SVG brand icons
│   │   ├── klaviyo.svg
│   │   ├── facebook-svgrepo-com.svg
│   │   ├── google-ads-svgrepo-com.svg
│   │   ├── tiktok-svgrepo-com.svg
│   │   ├── instagram-167-svgrepo-com.svg
│   │   ├── pinterest-180-svgrepo-com.svg
│   │   └── shopify-svgrepo-com.svg
│   ├── screen2.png     # Hero dashboard image
│   ├── screen3.png     # Hero analytics image
│   ├── screen4.png     # Process step 1 image
│   ├── screen5.png     # Process step 2 image
│   ├── screen6.png     # Process step 3 image
│   ├── screen7.png     # Feature visual
│   ├── dashboard.png   # Main dashboard preview
│   └── cart-rocket-app-icon-v5.png  # Logo
└── llms.txt           # This file
```

## Content Highlights

### Value Propositions
- Eliminates checkout friction
- Pre-configured carts with exact variants
- Automatic discount application
- UTM tracking and attribution
- No code required
- Works with all Shopify themes

### Key Benefits
- Increased conversion rates
- Higher average order value (AOV)
- Better campaign attribution
- Time-saving for marketing teams
- Seamless integration with existing tools

### Target Use Cases
- SMS marketing campaigns
- Email marketing flows
- Meta Ads campaigns
- Influencer marketing
- Creator partnerships
- Product launches

## Navigation Structure

### Main Navigation (Desktop)
- About → #process
- Feature → #feature
- Pricing → #pricing
- Contact us → #faq

### Mobile Navigation
- Hamburger menu with dropdown
- Same links as desktop navigation

## SEO & Meta Information

### Primary Keywords
- shopify checkout
- cart links
- pre-loaded cart
- checkout optimization
- conversion rate
- ecommerce
- cart rocket

### Schema.org Markup
- SoftwareApplication schema
- Organization schema
- WebSite schema
- BreadcrumbList schema

### Social Sharing
- Open Graph tags for Facebook/LinkedIn
- Twitter Card tags
- OG image: dashboard.png (1200x630px)

## Performance Optimizations
- Lazy loading for below-fold images
- Deferred scripts (GSAP, Lenis, Tailwind)
- Preload for critical CSS and fonts
- DNS prefetch for external resources
- Font-display: swap for faster font loading
- Optimized image loading with fetchpriority

## Accessibility
- Semantic HTML5 elements
- ARIA labels on interactive elements
- Alt text on all images
- Keyboard navigation support
- Mobile-responsive design

## Contact Information
- Email: hello@cartrocket.dev
- Website: https://cartrocket.dev
- Twitter: @cartrocket
- Instagram: @cartrocket

## Important Notes for LLMs
- This is a single-page application (SPA)
- All navigation uses anchor links (#section-id)
- Smooth scrolling is implemented via Lenis
- GSAP animations require library initialization
- Mobile menu uses JavaScript for toggle functionality
- Feature and pricing tabs use JavaScript for content switching
- Process cards have interactive hover states
- All brand logos are SVG files in images/icons/
- External images are from CDN (cdn.prod.website-files.com)
- The site uses Tailwind CSS utility classes extensively