Merge pull request #70 from cardano-scaling/feat/holding-page

feat: holding-page

.github/workflows/pages.yaml

@@ -1,10 +1,9 @@
-name: Deploy hydra-doom to github pages
+name: Deploy holding-page to GitHub Pages
 
 on:
   push:
     branches:
       - main
-
   workflow_dispatch:
 
 permissions:
@@ -20,7 +19,7 @@ concurrency:
 
 jobs:
   deploy:
-    name: Deploy to Github Pages
+    name: Deploy holding-page to GitHub Pages
     runs-on: ubuntu-latest
     environment:
       name: github-pages
@@ -29,22 +28,28 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      # - name: Build
-      #   run: |
-      #     curl https://distro.ibiblio.org/slitaz/sources/packages/d/doom1.wad -o assets/doom1.wad
-      #     cat > .env << EOF
-      #     SERVER_URL=https://hydra-doom.sundae.fi
-      #     EOF
-      #     yarn
-      #     yarn build
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./holding-page/yarn.lock
+
+      - name: Install dependencies
+        run: yarn install
+        working-directory: ./holding-page
+
+      - name: Build
+        run: yarn build
+        working-directory: ./holding-page
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "./holding-page"
+          path: './holding-page/dist'
 
       - name: Deploy to GitHub Pages
         id: deployment

holding-page/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

holding-page/README.md

@@ -0,0 +1,48 @@
+# Holding Page
+
+This project contains the source code for the holding page of our application. The holding page is a simple static site built with modern web technologies.
+
+## Project Structure
+
+- `index.html`: The main HTML file for the holding page.
+- `src/`: Contains the source code for the holding page.
+- `public/`: Contains public assets such as images and fonts.
+- `package.json`: Contains the project dependencies and scripts.
+- `yarn.lock`: Contains the exact versions of the project dependencies.
+
+## Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+- You have installed [Node.js](https://nodejs.org/) (version 20 or higher).
+- You have installed [Yarn](https://yarnpkg.com/) package manager.
+
+## Installation
+
+To install the project dependencies, run the following command in the `holding-page` directory:
+
+```sh
+yarn install
+```
+
+## Building the Project
+
+To build the project, run the following command in the holding-page directory:
+
+```sh
+yarn build
+```
+
+This will generate the static files in the `dist` directory.
+
+## Running the Project Locally
+
+To run the project locally for development, run the following command in the `holding-page` directory:
+
+```sh
+yarn start
+```
+
+## Deployment
+
+The holding page is automatically deployed to GitHub Pages using a GitHub Actions workflow. The deployment is triggered on every push to the `main` branch.

holding-page/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

holding-page/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hydra Doom</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

holding-page/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "holding-page",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
+  }
+}

holding-page/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

holding-page/src/App.tsx

@@ -0,0 +1,61 @@
+import MainBackground from "./components/MainBackground";
+import hydraLogo from "./assets/images/hydra-logo.png";
+import hydraText from "./assets/images/hydra-text.png";
+import HubspotForm from "./components/HubspotForm";
+
+function App() {
+  return (
+    <main className="relative min-h-screen">
+      <div className="z-20 relative flex flex-col items-center p-10">
+        <a
+          target="_blank"
+          href="https://hydra.family"
+          className="absolute top-16 left-14"
+        >
+          <img className="w-14" src={hydraLogo} alt="Hydra" />
+        </a>
+        <img
+          src={hydraText}
+          alt="Hydra"
+          className="w-full max-w-2xl relative -bottom-12 -mt-12 z-10 pointer-events-none"
+        />
+        <div
+          className="text-yellow-400 text-6xl mt-16 font-[VT323] mb-14"
+          style={{
+            textShadow:
+              "0 0 10px #db1102, 0 0 20px #f2581f, 0 0 50px #f2581f, 0 0 50px rgba(255, 5, 5, 0.25)",
+          }}
+        >
+          HYDRA<sup className="font-sans">®</sup> DOOM TOURNAMENT
+        </div>
+        <div className="flex flex-col gap-6 text-white max-w-2xl text-2xl text-center mb-12">
+          <p>
+            After the initial success of the Hydra Doom demo at Rare Evo 2024,
+            we’re raising hell once again, only this time it’s bigger and badder
+            than ever before.
+          </p>
+          <p>Coming soon ... !</p>
+          <p>
+            To get information and updates regarding the Hydra Doom Tournament,
+            enter your email below.
+          </p>
+          <p>
+            To learn more about how Hydra works visit{" "}
+            <a
+              href="https://hydra.family/head-protocol/"
+              target="_blank"
+              className="text-yellow-400 underline"
+            >
+              hydra.family
+            </a>
+            .
+          </p>
+        </div>
+        <HubspotForm />
+      </div>
+      <MainBackground />
+    </main>
+  );
+}
+
+export default App;

holding-page/src/components/HubspotForm/HubspotForm.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+
+declare global {
+  interface Window {
+    hbspt: {
+      forms: {
+        create: (options: {
+          portalId: string;
+          formId: string;
+          target: string;
+        }) => void;
+      };
+    };
+  }
+}
+
+function HubspotForm() {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "//js.hsforms.net/forms/embed/v2.js";
+    script.type = "text/javascript";
+    script.onload = () => {
+      if (window.hbspt) {
+        window.hbspt.forms.create({
+          portalId: "8848114",
+          formId: "3ee90be5-f30e-4548-affd-d70873e2a739",
+          target: "#hubspotForm",
+        });
+      }
+    };
+    document.body.appendChild(script);
+  }, []);
+
+  return <div id="hubspotForm"></div>;
+}
+
+export default HubspotForm;

holding-page/src/components/HubspotForm/index.ts

@@ -0,0 +1 @@
+export { default } from "./HubspotForm";

holding-page/src/components/MainBackground/MainBackground.tsx

@@ -0,0 +1,37 @@
+import mainBg from "../../assets/images/main-bg.jpg";
+import doomGuy from "../../assets/images/doom-guy.png";
+
+const MainBackground = () => {
+  return (
+    <div className="absolute h-full w-full z-10 inset-0">
+      <img
+        src={mainBg}
+        alt="Background"
+        className="absolute object-cover object-center h-full w-full"
+      />
+      <div className="absolute h-1/2 w-full bottom-0">
+        <img
+          src={doomGuy}
+          alt="Doom Guy"
+          className="absolute object-cover h-full w-full object-top"
+        />
+        <span
+          className="absolute w-full h-full"
+          style={{
+            background:
+              "linear-gradient(180deg, rgba(255, 0, 0, 0) 40%, rgba(255, 0, 0, 0.75) 100%)",
+          }}
+        />
+      </div>
+      <div
+        className="absolute w-full h-full top-0 left-0 pointer-events-none"
+        style={{
+          background:
+            "linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,1) 100%)",
+        }}
+      />
+    </div>
+  );
+};
+
+export default MainBackground;

holding-page/src/components/MainBackground/index.ts

@@ -0,0 +1 @@
+export { default } from "./MainBackground";