feat: add landing page to repo

VGVentures · Jun 11, 2024 · bce8acf · bce8acf
1 parent ba43d2f
commit bce8acf
Show file tree

Hide file tree

Showing 15 changed files with 1,642 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -110,3 +110,6 @@ app.*.map.json
 
 # Firebase related
 .firebase/
+
+# Landing page related
+public
diff --git a/firebase.json b/firebase.json
@@ -2,16 +2,22 @@
   "hosting": [
     {
       "target": "app_dev",
-      "public": "build/web",
+      "public": "public",
       "ignore": [
         ".firebase",
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
+      "rewrites": [
+        {
+          "source": "/game{,/**}",
+          "destination": "/game"
+        }
+      ],
       "headers": [
         {
-          "source": "**",
+          "source": "/game{,/**}",
           "headers": [
             {
               "key": "Cross-Origin-Embedder-Policy",

diff --git a/landing/.gitignore b/landing/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.firebase
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/landing/assets/Logo.png b/landing/assets/Logo.png
diff --git a/landing/assets/Logo.svg b/landing/assets/Logo.svg
diff --git a/landing/assets/SmallLogo.png b/landing/assets/SmallLogo.png
diff --git a/landing/assets/get-into-the-code.png b/landing/assets/get-into-the-code.png
diff --git a/landing/assets/hero-image.png b/landing/assets/hero-image.png
diff --git a/landing/assets/how-we-built-it.png b/landing/assets/how-we-built-it.png
diff --git a/landing/assets/plus-sign.svg b/landing/assets/plus-sign.svg
diff --git a/landing/index.html b/landing/index.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="./assets/SmallLogo.png" type="image/png">
+    <title>I/O Crossword</title>
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="./main.js" type="module" defer></script>
+  </head>
+  <body>
+    <header>
+      <picture>
+        <source media="(min-width: 640px)" srcset="./assets/Logo.svg" />
+        <img src="./assets/SmallLogo.png" alt="Google IO Crossword Logo" />
+      </picture>
+      <a class="gradient-button" href="/game">Play Now</a>
+    </header>
+    <main>
+      <section id="hero">
+        <div class="hero__content-container">
+          <div class="hero__content-inner-container">
+            <div class="hero__content">
+              <h1>
+                World&apos;s Largest
+                <br />
+                Crossword
+              </h1>
+              <h2>
+                Built with Gemini, Flutter and Firebase for
+                <br />
+                Google I/O 2024. Let&apos;s break the record!
+              </h2>
+              <a class="gradient-button" href="/game">Play Now</a>
+            </div>
+          </div>
+        </div>
+        <img
+          src="./assets/hero-image.png"
+          alt="hero banner"
+          style="visibility: hidden; height: 700px; width: 100%"
+        />
+      </section>
+      <section>
+        <div class="youtube-embed__video-container">
+          <iframe
+            src="https://www.youtube.com/embed/tgbNymZ7vqY"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </section>
+      <section id="building">
+        <div class="building__how-we-built-title">
+          <h4 class="eyebrow">Building I/O Crossword</h4>
+          <h3 class="gradient-title">How we built it</h3>
+        </div>
+        <div class="feature">
+          <img src="./assets/how-we-built-it.png" alt="" />
+          <div class="feature-content">
+            <p>
+              The game is built in Flutter for the web, compiled to WASM, and
+              optimized for Chrome. Words and clues in the puzzle are
+              pre-generated with Gemini 1.5 Pro in Google AI Studio. The backend
+              is built on Firebase and Google Cloud using Gemini Extensions to
+              seamlessly create and connect AI generated content with the game.
+              Dive into the code with a new Gemini API template in IDX.
+            </p>
+            <a class="gradient-button" href="https://flutter.dev">Learn More</a>
+          </div>
+        </div>
+        <div class="feature reverse">
+          <img src="./assets/get-into-the-code.png" alt="" />
+          <div class="feature-content">
+            <div>
+              <h4 class="eyebrow">The Code</h4>
+              <h3 class="gradient-title">Get into the Code</h3>
+            </div>
+            <p>
+              Access the code that makes up the I/O Crossword and let it inspire
+              you to use all the tools in and more to create even more fun and
+              delightful innovations of your own.
+            </p>
+            <a class="gradient-button" href="https://flutter.dev">Dive In</a>
+          </div>
+        </div>
+        <section id="faq">
+          <div class="feature">
+            <div class="feature-content faq">
+              <div>
+                <h4 class="eyebrow">FAQ</h4>
+                <h3 class="gradient-title">Frequently Asked Questions</h3>
+              </div>
+            </div>
+            <div class="accordion-container feature-content">
+              <button class="accordion-button closed">What is this?</button>
+              <div class="panel closed">
+                <p>
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                  Illum officia nihil natus, numquam animi accusamus consectetur
+                  quae voluptatum eligendi culpa ad quasi optio cupiditate
+                  corrupti porro quia possimus nobis tenetur!
+                </p>
+              </div>
+
+              <button class="accordion-button closed">How was AI used?</button>
+              <div class="panel closed">
+                <p>
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                  Illum officia nihil natus, numquam animi accusamus consectetur
+                  quae voluptatum eligendi culpa ad quasi optio cupiditate
+                  corrupti porro quia possimus nobis tenetur!
+                </p>
+              </div>
+
+              <button class="accordion-button closed">
+                Are there prizes for the winners?
+              </button>
+              <div class="panel closed">
+                <p>
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                  Illum officia nihil natus, numquam animi accusamus consectetur
+                  quae voluptatum eligendi culpa ad quasi optio cupiditate
+                  corrupti porro quia possimus nobis tenetur!
+                </p>
+              </div>
+
+              <button class="accordion-button closed">
+                What data is stored and publicly available when sharing?
+              </button>
+              <div class="panel closed">
+                <p>
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                  Illum officia nihil natus, numquam animi accusamus consectetur
+                  quae voluptatum eligendi culpa ad quasi optio cupiditate
+                  corrupti porro quia possimus nobis tenetur!
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/landing/main.js b/landing/main.js
@@ -0,0 +1,37 @@
+const accordionButtons = document.getElementsByClassName("accordion-button");
+const panels = document.getElementsByClassName("panel");
+
+const close = (element) => {
+  element.classList.remove("open");
+  element.classList.add("closed");
+};
+
+const toggle = (element) => {
+  if (element.classList.contains("open")) {
+    element.classList.remove("open");
+    element.classList.add("closed");
+  } else {
+    element.classList.remove("closed");
+    element.classList.add("open");
+  }
+};
+
+for (let i = 0; i < accordionButtons.length; i++) {
+  accordionButtons[i].addEventListener("click", function () {
+    const panel = this.nextElementSibling;
+
+    // closes all panels but not the current one
+    for (let i = 0; i < panels.length; i++) {
+      if (accordionButtons[i] !== this) {
+        close(accordionButtons[i]);
+      }
+
+      if (panels[i] !== this.nextElementSibling) {
+        close(panels[i]);
+      }
+    }
+
+    toggle(panel);
+    toggle(this);
+  });
+}
diff --git a/landing/package.json b/landing/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "infinite-crossword",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.2.0"
+  },
+  "dependencies": {
+    "firebase": "^10.12.0"
+  }
+}