Coming Soon Page Design in Astro #127

recursivezero · 2025-07-11T06:19:33Z

recursivezero
Jul 11, 2025
Maintainer

Discussion: Customizable Coming Soon Page Template for Astro

Goal: Create a beautiful, playful "Coming Soon" template that teams can easily customize with their branding.

Base Implementation

1. Minimal Starter Template (`src/pages/coming-soon.astro`)

---
// Configure these variables
const companyName = "Your Company";
const logoUrl = "/logo.png"; // Replace with your logo
const launchDate = "2024-12-31";
const backgroundColor = "#f9f5ff";
const primaryColor = "#7c3aed";
---

<html lang="en">
<head>
  <title>{companyName} | Coming Soon</title>
  <style>
    :root {
      --bg: ${backgroundColor};
      --primary: ${primaryColor};
    }
    body {
      background: var(--bg);
      font-family: 'Segoe UI', system-ui, sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 2rem;
      text-align: center;
    }
    .logo {
      height: 80px;
      margin-bottom: 2rem;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    }
    h1 {
      color: var(--primary);
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    .countdown {
      display: flex;
      gap: 1rem;
      justify-content: center;
      margin: 2rem 0;
    }
    .countdown-item {
      background: white;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
      min-width: 80px;
    }
    .countdown-number {
      font-size: 2rem;
      font-weight: bold;
      color: var(--primary);
    }
  </style>
</head>
<body>
  <main>
    <img src={logoUrl} alt={companyName} class="logo" />
    <h1>Something Amazing is Coming</h1>
    <p>We're working hard to bring you the best experience.</p>
    
    <div class="countdown" id="countdown">
      <div class="countdown-item">
        <div class="countdown-number" id="days">00</div>
        <div>Days</div>
      </div>
      <!-- Repeat for hours, minutes, seconds -->
    </div>
    
    <form style="margin-top: 2rem;">
      <p>Get notified when we launch:</p>
      <input type="email" placeholder="[email protected]" required />
      <button type="submit" style="background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; margin-left: 0.5rem;">Notify Me</button>
    </form>
  </main>

  <script is:inline>
    // Simple countdown timer
    const launch = new Date('${launchDate}');
    function updateCountdown() {
      const now = new Date();
      const diff = launch - now;
      
      document.getElementById('days').textContent = Math.floor(diff / (1000 * 60 * 60 * 24));
      // Add similar lines for hours, minutes, seconds
    }
    setInterval(updateCountdown, 1000);
    updateCountdown();
  </script>
</body>
</html>

Customization Options

1. Playful Design Variants

Confetti Celebration (add to <head>):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script is:inline>
  // Trigger confetti on page load
  setTimeout(() => confetti(), 1000);
</script>

Animated Background (replace body style):

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

2. Configuration Options

// In your Astro config (astro.config.mjs)
export default defineConfig({
  // ...
  integrations: [
    // Add this to make the page more configurable
    {
      name: 'coming-soon-config',
      hooks: {
        'astro:config:setup': ({ injectScript }) => {
          injectScript('page', `
            const COMING_SOON_CONFIG = {
              logo: import.meta.env.PUBLIC_LOGO_URL,
              launchDate: import.meta.env.PUBLIC_LAUNCH_DATE,
              // Add more config options
            };
          `);
        }
      }
    }
  ]
});

Deployment Options

Static Hosting: Works on any platform (Netlify, Vercel, GitHub Pages)
Environment Variables: Customize via .env:

PUBLIC_LOGO_URL="/custom-logo.png"
PUBLIC_LAUNCH_DATE="2024-12-31"

Discussion Points

What playful elements would you add?
- Animated illustrations?
- Interactive elements?
- Sound effects?
How should we handle the email collection?
- Static Forms integration?
- Netlify Forms?
- Just a mailto: link?
What other customization options would be useful?
- Theme switcher?
- Multiple layout options?
- Localization support?

Share your ideas and improvements below! Would love to see how others would enhance this starter template.

This discussion:

Provides a complete starting template
Shows multiple customization paths
Suggests deployment options
Encourages community participation
Maintains clean, minimal code

Would you like me to adjust any particular aspect of this discussion?

recursivezero · 2025-07-11T06:24:35Z

recursivezero
Jul 11, 2025
Maintainer Author

Another Approach to Design Customizable "Coming Soon" Page

Description

We need a visually appealing "Coming Soon" page template that non-technical users can easily customize with:

Their company logo
Custom text (headline/subhead)
Launch countdown timer
Color scheme adjustments

Requirements

Feature	Details
Logo	Configurable via `logoUrl` prop or environment variable
Text	Editable headline, subhead, and CTA text
Timer	Dynamic countdown to a launch date (ISO format)
Colors	Primary/secondary colors set via CSS variables
Responsive	Mobile-friendly design (tested down to 320px)
Zero JS	Fallback static version if JavaScript is disabled

Suggested Implementation

Astro Component (/src/components/ComingSoon.astro):

---
const {
  logoUrl = "/default-logo.svg",
  headline = "Coming Soon!",
  subhead = "We're working on something amazing.",
  launchDate = "2024-12-31",
  primaryColor = "#6d28d9"
} = Astro.props;
---

<style>
  :root { --primary: ${primaryColor} }
  /* Base styles here */
</style>

<div class="coming-soon">
  <img src={logoUrl} alt="Logo" width="120" />
  <h1>{headline}</h1>
  <p>{subhead}</p>
  <Countdown target={launchDate} />
</div>

Configuration Options:

Set defaults via astro.config.mjs environment variables:

// astro.config.mjs
export default defineConfig({
  public: {
    COMING_SOON_LOGO: "/public/logo.png",
    COMING_SOON_LAUNCH_DATE: "2024-12-31"
  }
});

Acceptance Criteria

Logo loads from config/props
All text elements are customizable
Countdown works cross-browser
Passes WCAG contrast checks
Documentation added to /docs/customization.md

Non-Goals

User authentication
Complex animations (keep it lightweight)

Resources

Estimated Difficulty: Low (good for first-time contributors)

This issue:
✅ Clearly scoped
✅ Provides implementation guidance
✅ Includes accessibility checks
✅ Welcomes new contributors

Would you like me to adjust any part of this template?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Coming Soon Page Design in Astro #127

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Coming Soon Page Design in Astro #127

Uh oh!

recursivezero Jul 11, 2025 Maintainer

Discussion: Customizable Coming Soon Page Template for Astro

Base Implementation

1. Minimal Starter Template (src/pages/coming-soon.astro)

Customization Options

1. Playful Design Variants

2. Configuration Options

Deployment Options

Discussion Points

Replies: 1 comment

Uh oh!

Uh oh!

recursivezero Jul 11, 2025 Maintainer Author

Another Approach to Design Customizable "Coming Soon" Page

Description

Requirements

Suggested Implementation

Acceptance Criteria

Non-Goals

Resources

recursivezero
Jul 11, 2025
Maintainer

1. Minimal Starter Template (`src/pages/coming-soon.astro`)

recursivezero
Jul 11, 2025
Maintainer Author