Skip to content

README.md

Latest commit

 

History

History
145 lines (110 loc) · 3.88 KB

README.md

File metadata and controls

145 lines (110 loc) · 3.88 KB

Dirty Tarheel Fizz Co - Coming Soon Page

A beautiful, animated "coming soon" landing page for Dirty Tarheel Fizz Co.

Features

  • 🎨 Premium Design: Carolina blue theme matching the brand
  • ✨ Smooth Animations: Floating bubbles and micro-interactions
  • 📱 Fully Responsive: Looks great on all devices
  • 📧 Email Signup: Collect emails for launch notifications
  • ♿ Accessible: Semantic HTML and ARIA labels
  • 🚀 SEO Optimized: Meta tags and Open Graph support
  • 🎉 Easter Egg: Click the logo 5 times for a surprise!

Local Development

Simply open index.html in your browser:

# Windows
start index.html

# Or use a local server (recommended)
npx serve .

Deploying to AWS Amplify

Option 1: Deploy via Git (Recommended)

  1. Initialize Git Repository (if not already done):

    git init
git add .
git commit -m "Initial commit - Coming Soon page"

  2. Push to GitHub/GitLab/Bitbucket:

    git remote add origin <your-repo-url>
git push -u origin main

  3. Connect to AWS Amplify:

    • Go to AWS Amplify Console
    • Click "New app" → "Host web app"
    • Select your Git provider and repository
    • AWS Amplify will auto-detect the amplify.yml configuration
    • Click "Save and deploy"

  4. Configure Custom Domain:

    • In Amplify Console, go to "Domain management"
    • Click "Add domain"
    • Enter dirtytarheelfiz.com
    • Follow the instructions to update your DNS settings in AWS Route 53

Option 2: Manual Deploy

  1. Zip the files:

    # Create a zip of all files
Compress-Archive -Path * -DestinationPath dtf-site.zip

  2. Deploy via Amplify Console:

    • Go to AWS Amplify Console
    • Click "New app" → "Host web app"
    • Choose "Deploy without Git provider"
    • Upload dtf-site.zip
    • Configure custom domain as described above

Email Integration (Future Enhancement)

Currently, email signups are stored in localStorage. To integrate with a real backend:

  1. Option A - AWS API Gateway + Lambda:

    • Create a Lambda function to store emails in DynamoDB
    • Set up API Gateway endpoint
    • Update script.js to POST to your endpoint

  2. Option B - Third-party Service:

    • Use services like Mailchimp, ConvertKit, or EmailOctopus
    • Replace the form submission logic in script.js

  3. Option C - Simple Form Service:

    • Use Formspree, Basin, or similar
    • Update the form action in index.html

File Structure

dtf/
├── index.html          # Main HTML file
├── styles.css          # All styles and animations
├── script.js           # Interactive functionality
├── logo.jpg            # DTF logo (circular)
├── drinks.png          # Product photo (optional)
├── amplify.yml         # AWS Amplify build config
└── README.md           # This file

Customization

Update Social Links

Uncomment the social links section in index.html and add your URLs:

<a href="https://instagram.com/yourhandle" aria-label="Instagram" class="social-link">

Change Colors

Edit CSS variables in styles.css:

:root {
    --primary-blue: #7EC8E3;
    --accent-gold: #FFD700;
    /* ... */
}

Add Launch Date Countdown

Uncomment and configure the countdown timer in script.js (feature ready to implement).

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Performance

  • Optimized animations with CSS transforms
  • Lazy-loaded fonts
  • Minimal JavaScript
  • No external dependencies
  • Perfect Lighthouse scores achievable

License

© 2024 Dirty Tarheel Fizz Co. All rights reserved.

Need help? Contact your developer or refer to AWS Amplify Documentation.