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.