Modified landing and about page

.github/workflows/deploy.yaml

@@ -0,0 +1,33 @@
+name: Deploy
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: master
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+
+    permissions:
+      id-token: write # Needed for auth with Deno Deploy
+      contents: read # Needed to clone the repository
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Build step
+        run: "deno task build" # 📝 Update the build command(s) if necessary
+
+      - name: Upload to Deno Deploy
+        uses: denoland/deployctl@v1
+        with:
+          project: "evilmonkey19-cv" # 📝 Update the deploy project name if necessary
+          entrypoint: "./main.ts" # 📝 Update the entrypoint if necessary

.gitignore

@@ -7,3 +7,5 @@
 
 # Fresh build directory
 _fresh/
+.DS_Store
+node_modules/

components/AboutUs.tsx

@@ -1,17 +1,31 @@
-import { apply } from 'twind';
-
-const span = `font-bold`;
 
 const AboutUs = () => (
-  <div className="flex flex-col pb-20">
-    <h1 className="text-3xl font-bold uppercase">About Us</h1>
-    <p className="text-lg font-light">
-      We are a theater association based in Stockholm, Sweden. We try to bring the <span className={span}>joy</span> of <span className={span}>improv</span> and <span className={span}>theater</span> to <span className={span}>local and international students</span>.
-      Whether you're a <span className={span}>seasoned performer</span> or a <span className={span}>complete novice</span>, our improv sessions offer a supportive environment to explore your creativity, sharpen your acting skills, and <span className={span}>unleash your imagination</span>.
-      We take <span className={span}>pride</span> in our <span className={span}>annual show production</span>, bringing you a <span className={span}>unique</span> and <span className={span}>interactive</span> theatrical experience.
-      We make the <span className={span}>Swedish spex tradition</span> accessible to international students through performances in English, promoting <span className={span}>cultural exchange</span> and creating <span className={span}>memorable experiences</span> for all.
-      Join us at The English Theater Improv Club and discover the <span className={span}>magic</span> of improv, the excitement of live performance, and the <span className={span}>joy</span> of being part of a <span className={span}>vibrant theater community</span>!
-    </p>
+  <div className="bg-black py-8 md:grid grid-cols-7">
+    <div className="col-span-1"></div>
+    <div className="col-span-5 text-gray-50 font-light flex flex-col gap-8">
+      <h1 className="text-6xl text-left font-light">About Us</h1>
+      <div className="md:grid grid-cols-3 gap-8">
+        <div className="flex flex-row gap-4">
+          <img src="/icons/location-marker.svg" alt="Location marker of where we are." className="self-start" />
+          <div className="flex flex-col gap-4 text-lg">
+            <p className="text-balance">Hey there! We're the cool cats from the English Theater Improv Club, chilling out</p>
+            <p className="font-bold">Stockholm, Sweden.</p>
+          </div>
+        </div>
+        <div className="flex flex-row gap-4">
+          <img src="/icons/emoji-happy.svg" alt="A happy emoji like us." className="self-start" />
+          <div className="flex flex-col gap-4 text-lg">
+            <p className="text-balance">Our mission? Simple – spreading the joy of improv and theater to both local and international students.</p>
+          </div>
+        </div>
+        <div className="flex flex-row gap-4">
+          <img src="/icons/sparkles.svg" alt="Sparkles of joy to meet you soon." className="self-start" />
+          <div className="flex flex-col gap-4 text-lg">
+            <p className="text-balance">We throw an <span className="font-bold">annual show</span>. It's unique, it's interactive, and it's so much fun, your laughter might be mistaken for applause.</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 );
 

components/Header.tsx

@@ -0,0 +1,13 @@
+export default function Header() {
+  return (
+    <header className="fixed w-full px-16 py-1 flex justify-between items-center bg-gray-50 z-50">
+      <a className="text-2xl font-bold" href="/" title="Jump to the beginning">
+        <img src="/logo.png" alt="Logo from ET English Theater" width="40px" height="40px" />
+      </a>
+      <div className="flex gap-16 text-xl text-black-950 font-light">
+        <a href="#events" title="Jump to events">Events</a>
+        <a href="#productions" title="Jump to productions">Productions</a>
+      </div>
+    </header>
+  );
+}

components/Landing.tsx

@@ -0,0 +1,28 @@
+const Landing = () => (
+  <div className="h-svh bg-contain bg-right bg-no-repeat bg-black md:grid grid-cols-7" style="background-image: url('background_landing.webp')">
+        <div className="col-span-1"></div>
+        <div className="col-span-5 h-svh flex flex-col justify-center items-left gap-8 text-gray-50">
+          <div className="md:h-16"></div>
+          <p className="text-8xl text-left text-balance">English Theater Improv Club</p>
+          <div className="flex gap-4 w-max-32">
+            <p className="font-rye text-8xl text-[#5063a1] self-place-top h-24">“</p>
+            <p className="text-balance font-light leading-loose self-center text-lg">We are a theater association based in Stockholm, Sweden. 
+            We try to bring the joy of <span className="font-bold">improv and theater</span> to local and international students.</p>
+          </div>
+          <div className="flex gap-4 text-xl">
+            <a href="/" className="relative">
+              <img className="w-full" src="/icons/union_green.svg" />
+              <p className="text-[#159288] absolute top-5 left-12 text-2xl font-semibold">Hire us</p>
+            </a>
+            <a href="/" className="relative">
+              <img className="w-full" src="/icons/union_pink.svg" />
+              <p className="text-[#b961c1] absolute top-5 left-12 text-2xl font-semibold">Join us</p>
+            </a>
+          </div>
+        <div className="col-span-1"></div>
+      </div>
+      <div className="absolute bottom-0 h-32 w-full bg-gradient-to-b from-transparent to-black z-10 text-white"></div>
+  </div>
+);
+
+export default Landing;

deno.json

@@ -7,30 +7,20 @@
     "preview": "deno run -A main.ts",
     "update": "deno run -A -r https://fresh.deno.dev/update ."
   },
-  "lint": {
-    "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
-    }
-  },
-  "exclude": [
-    "**/_fresh/*"
-  ],
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"],
+  "nodeModulesDir": true,
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.5.2/",
-    "preact": "https://esm.sh/preact@10.18.1",
-    "preact/": "https://esm.sh/preact@10.18.1/",
+    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
+    "preact": "https://esm.sh/preact@10.19.6",
+    "preact/": "https://esm.sh/preact@10.19.6/",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
-    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
-    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
-    "twind": "https://esm.sh/twind@0.16.19",
-    "twind/": "https://esm.sh/twind@0.16.19/",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "tailwindcss": "npm:tailwindcss@3.4.3",
+    "tailwindcss/": "npm:/tailwindcss@3.4.3/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.4.3/plugin.js",
     "$std/": "https://deno.land/std@0.193.0/"
   },
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
-  }
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" }
 }

fresh.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "$fresh/server.ts";
-import twindPlugin from "$fresh/plugins/twind.ts";
-import twindConfig from "./twind.config.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
 
 export default defineConfig({
-  plugins: [twindPlugin(twindConfig)],
+  plugins: [tailwind()],
 });

fresh.gen.ts

@@ -2,27 +2,22 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $0 from "./routes/_404.tsx";
-import * as $1 from "./routes/_app.tsx";
-import * as $2 from "./routes/_layout.tsx";
-import * as $3 from "./routes/api/joke.ts";
-import * as $4 from "./routes/greet/[name].tsx";
-import * as $5 from "./routes/index.tsx";
-import * as $$0 from "./islands/Counter.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $_layout from "./routes/_layout.tsx";
+import * as $index from "./routes/index.tsx";
+import * as $Counter from "./islands/Counter.tsx";
+import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
-    "./routes/_404.tsx": $0,
-    "./routes/_app.tsx": $1,
-    "./routes/_layout.tsx": $2,
-    "./routes/api/joke.ts": $3,
-    "./routes/greet/[name].tsx": $4,
-    "./routes/index.tsx": $5,
+    "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
+    "./routes/index.tsx": $index,
   },
   islands: {
-    "./islands/Counter.tsx": $$0,
+    "./islands/Counter.tsx": $Counter,
   },
   baseUrl: import.meta.url,
-};
+} satisfies Manifest;
 
 export default manifest;

routes/_app.tsx

@@ -1,11 +1,18 @@
-import { AppProps } from "$fresh/server.ts";
+import { PageProps } from "$fresh/server.ts";
 
-export default function App({ Component }: AppProps) {
+export default function App({ Component }: PageProps) {
   return (
     <html>
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The ET Improv Club" />
+        <meta name="author" content="Enric Perpinyà Pitarch" />
+        <meta name="keywords" content="improv, theater, english, club" />
+        <link rel="preload" href="/fonts/Montserrat-Thin.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
+        <link rel="preload" href="/fonts/Rye-Regular.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
+        <link rel="preload" href="/background_landing.webp" as="image" type="image/webp" crossOrigin="anonymous" />
+        <link rel="stylesheet" href="/styles.css" />
         <title>The ET Improv Club</title>
       </head>
       <body className="bg-[#020c2e]">

routes/_layout.tsx

@@ -1,16 +1,12 @@
-import { LayoutProps } from "$fresh/server.ts";
-// import Footer from "../components/footer.tsx";
 
-export default function Layout({ Component, state }: LayoutProps) {
+import { PageProps } from "$fresh/server.ts";
+import Header from "../components/Header.tsx";
+
+export default function Layout({ Component, state }: PageProps) {
   return (
     <div className="mx-4 md:mx-0">
-      <div className="md:grid grid-cols-7">
-        <div className="col-span-1"></div>
-        <div className="col-start-2 col-span-5">
-          <Component {...state} />
-        </div>
-        <div className="col-span-1"></div>
-      </div>
+      <Header></Header>
+      <Component {...state} />
       {/* <Footer translation={translation.footer}/> */}
     </div>
   )

routes/index.tsx

@@ -1,10 +1,10 @@
-import FrontPage from "../components/Frontpage.tsx";
+import Landing from "../components/Landing.tsx";
 import AboutUs from "../components/AboutUs.tsx";
 
 export default function Home() {
   return (
-    <div className="flex flex-col text-white gap-4">
-      <FrontPage />
+    <div>
+      <Landing />
       <AboutUs />
     </div>
   );

static/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts

@@ -0,0 +1,13 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+  theme: {
+    fontFamily: {
+      rye: ['"Rye"'],
+      sans: ['Montserrat', 'sans-serif'],
+    },
+  }
+} satisfies Config;