investbrain/resources/views/welcome.blade.php

@extends('layouts.main-layout', ['attributes' => null])

<div class="flex flex-col min-h-[100dvh] bg-gradient-to-br from-[#03255B] to-[#011638] text-white">
    <header class="px-4 lg:px-6 h-14 flex items-center">
      <a class="flex items-center justify-center" href="#">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="h-6 w-6"
        >
          <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
        </svg>
        <span class="sr-only">Investbrain</span>
      </a>
    </header>
    <main class="flex-1 flex flex-col items-center justify-center px-4 md:px-6 gap-8">
      <div class="text-center space-y-4">
        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tighter">Your smartest portfolio</h1>
        <div class="flex justify-center items-center gap-4">
            <div 
                class="bg-white/10 px-4 py-2 rounded-lg text-2xl font-bold"
                x-data="countdown" 
                x-init="startCountdown" 
                id="countdown"
            >
                <span x-text="days"></span>d 
                <span x-text="hours"></span>h 
                <span x-text="minutes"></span>m 
                <span x-text="seconds"></span>s
            </div>
        </div>
      </div>
      <div class="max-w-lg space-y-4">
        <p class="text-md text-center">
            Investbrain is a smart open-source platform that consolidates your portfolios from different brokerages, tracks market performance across your portfolios, and gives you an AI-powered investment best friend.
        </p>
        <div class="flex flex-col items-center gap-2 pt-7">
          <p class="text-lg font-medium">Stay up to date on our progress!</p>
          <form 
            class="flex gap-2 w-full"
            action="https://mail.lumifylabs.com/subscribe/0dcb1b4e-8a73-46f6-b9b5-6a6c12ef2f73"
            method="post"
          >

            <input
              class="flex rounded-md px-3 py-2 text-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed flex-1 bg-white/10 text-white placeholder:text-white/50"
              placeholder="steve@savvyinvestor.com"
              name="email"
              type="email"
            />
            <div style="position: absolute; left: -9999px">
                <label for="website-robot">Your Website</label>
                <input type="text" id="website-robot" name="robot" tabindex="-1" autocomplete="nope" />
            </div>
            <input type="hidden" name="tags" value="coming-soon-page" />
            <button
              class="rounded-md text-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
              type="submit"
            >
              Count me in!
            </button>
          </form>
        </div>
        <div class="flex flex-col items-center gap-2 pt-7">
            <a 
                target="_blank"
                href="https://github.com/hackeresq/investbrain" 
                title="We're open source!"
                class=""
            > 
                <x-github-icon/>
            </a>
        </div>
      </div>
    </main>
    <footer class="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-white/20">
      <p class="text-xs text-white/50">© {{ date('Y') }} Investbrain. All rights reserved.</p>
      <nav class="sm:ml-auto flex gap-4 sm:gap-6">
        <a class="text-xs hover:underline underline-offset-4 text-white/50" href="{{ route('terms.show') }}">
            Terms 
        </a>
        <a class="text-xs hover:underline underline-offset-4 text-white/50" href="{{ route('policy.show') }}">
            Privacy 
        </a>
      </nav>
    </footer>
  </div>

  <script>
    function countdown() {
        return {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0,
            countdownDate: new Date("Oct 31, 2024 00:00:00").getTime(),
            
            startCountdown() {
                this.updateCountdown();
                setInterval(() => this.updateCountdown(), 1000);
            },

            updateCountdown() {
                const now = new Date().getTime();
                const distance = this.countdownDate - now;

                if (distance < 0) {
                    clearInterval();
                    document.getElementById("countdown").innerText = "Coming Soon!";
                    return;
                }

                this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
                this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
            }
        };
    }
</script>