WIP

components/AboutUs.tsx

@@ -1,6 +1,7 @@
+import Carousel from "../islands/Carousel.tsx";
 
 const AboutUs = () => (
-  <div className="bg-black py-8 md:grid grid-cols-7">
+  <div className="bg-black py-16 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>
@@ -25,6 +26,8 @@ const AboutUs = () => (
           </div>
         </div>
       </div>
+      <h2 className="text-2xl">Look how cute we are 😻</h2>
+      <Carousel />
     </div>
   </div>
 );

components/Card.tsx

@@ -0,0 +1,41 @@
+type CardProps = {
+  type: string;
+  image_path: string;
+  title: string;
+  date: string;
+  description: string;
+};
+
+const Card = (props: CardProps) => {
+  const { type, image_path, title, date, description } = props;
+  function getCardClasses(type: string) {
+    let general_card_class, detail_button_class, date_class;
+
+    if (type === 'event') {
+      general_card_class = "bg-gray-50 rounded-md p-4 flex flex-col gap-4 text-gray-950";
+      detail_button_class = "text-[#ea7af4] text-xl p-2 border-2 border-[#ea7af4] text-center hover:bg-[#ea7af4] hover:text-gray-50";
+      date_class = "text-[#17a398] text-md";
+    } else {
+      general_card_class = "bg-gray-900 rounded-md p-4 flex flex-col gap-4 text-gray-50";
+      detail_button_class = "text-[#17a398] text-xl p-2 border-2 border-[#17a398] text-center";
+      date_class = "text-[#ea7af4] text-md";
+    }
+
+    return { general_card_class, detail_button_class, date_class };
+  }
+
+  const { general_card_class, detail_button_class, date_class } = getCardClasses(type);
+  return (
+    <div className={general_card_class}>
+      <img src={image_path} alt={title} className="rounded-lg" />
+      <h1 className="text-2xl">{title}</h1>
+      <div className="flex flex-col gap-2">
+        <p className={date_class}>Date: {date}</p>
+        <p className="text-sm">{description}</p>
+      </div>
+      <button className={detail_button_class}>View details</button>
+    </div>
+  );
+};
+
+export default Card;

components/Events.tsx

@@ -0,0 +1,50 @@
+import Card from './Card.tsx';
+
+const Events = () => (
+  <section className="md:grid grid-cols-7 bg-gray-200 py-16" id="events">
+    <div className="col-span-1"></div>
+    <div className="col-span-5 flex flex-col gap-4">
+      <h1 className="text-4xl">Events</h1>
+      <div className="grid grid-cols-3 gap-8">
+        <Card 
+          type="event"
+          image_path="https://picsum.photos/560"
+          title="Event 1"
+          date="2023-05-01"
+          description="This is a description of the event."
+        />
+        <Card 
+          type="event"
+          image_path="https://picsum.photos/561"
+          title="Event 2"
+          date="2023-05-01"
+          description="This is a description of the event."
+        />
+        <Card 
+          type="event"
+          image_path="https://picsum.photos/562"
+          title="Event 3"
+          date="2023-05-01"
+          description="This is a description of the event."
+        />
+        <Card 
+          type="event"
+          image_path="https://picsum.photos/563"
+          title="Event 4"
+          date="2023-05-01"
+          description="This is a description of the event."
+        />
+        <Card 
+          type="event"
+          image_path="https://picsum.photos/564"
+          title="Event 5"
+          date="2023-05-01"
+          description="This is a description of the event."
+        />
+      </div>
+    </div>
+    <div className="col-span-1"></div>
+  </section>
+)
+
+export default Events;

components/Footer.tsx

@@ -0,0 +1,42 @@
+const Footer = () => (
+  <footer className="flex flex-col gap-8 bg-black py-8 text-gray-50 font-light">
+    <div className="md:grid grid-cols-7">
+      <div className="col-span-1"></div>
+      <div className="col-span-1">
+        <img src="/logo.png" alt="ET logo" width="200px" />
+      </div>
+      <div className="col-span-1"></div>
+      <div className="col-span-3 flex flex-row gap-8 justify-end">
+        <div className="flex flex-col gap-8">
+          <p>English theater improv club</p>
+          <div className="flex flex-col gap-2">
+            <a href="#events" title="Jump to events" className="hover:text-gray-500">Events</a>
+            <a href="#productions" title="Jump to productions" className="hover:text-gray-500">Productions</a>
+          </div>
+        </div>
+        <div className="flex flex-col gap-8">
+          <p>Contact</p>
+          <div className="flex flex-col">
+            <a href="mailto:email@email.com" className="hover:text-gray-500">email@email.com</a>
+            <a href="tel:+1234567890" className="hover:text-gray-500">+1234567890</a>
+          </div>
+          <div>
+            <p>Instagram:</p>
+            <a href="http://instagram.com" className="hover:text-gray-500">@account</a>
+          </div>
+        </div>
+      </div>
+      <div className="col-span-1"></div>
+    </div>
+    <div className="mx-16 h-[1px] bg-[#303C64]"></div>
+    <div className="mx-16 flex justify-end">
+      <p>Made with ❤️ by&nbsp;
+        <a href="https://www.linkedin.com/in/yan-zhang-899960244/" className="hover:text-gray-500">Yan Zhang (Designer)</a>
+        &nbsp;&&nbsp;
+        <a href="https://perpinya.eu/en" className="hover:text-gray-500">Enric Perpinyà (Programmer)</a> 
+      </p>
+    </div>
+  </footer>
+)
+
+export default Footer;

components/Landing.tsx

@@ -12,11 +12,11 @@ const Landing = () => (
           <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>
+              <p className="text-[#159288] hover:bg-[#159288] hover:text-gray-50 absolute top-5 left-12 text-2xl font-semibold w-full">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>
+              <p className="text-[#b961c1] hover:text-[#ffce5f] absolute top-5 left-12 text-2xl font-semibold">Join us</p>
             </a>
           </div>
         <div className="col-span-1"></div>

components/Productions.tsx

@@ -0,0 +1,57 @@
+import Card from './Card.tsx';
+
+const Productions = () => (
+  <section className="md:grid grid-cols-7 bg-black py-16 text-gray-50" id="productions">
+    <div className="col-span-1"></div>
+    <div className="col-span-5 flex flex-col gap-4">
+      <h1 className="text-4xl">Productions</h1>
+      <div className="grid grid-cols-3 gap-8">
+        <Card
+          type="production"
+          image_path="https://picsum.photos/700"
+          title="Production 1"
+          date="2023-05-01"
+          description="This is a description of the production."
+        />
+        <Card
+          type="production"
+          image_path="https://picsum.photos/701"
+          title="Production 2"
+          date="2023-05-01"
+          description="This is a description of the production."
+        />
+        <Card
+          type="production"
+          image_path="https://picsum.photos/702"
+          title="Production 3"
+          date="2023-05-01"
+          description="This is a description of the production."
+        />
+        <Card
+          type="production"
+          image_path="https://picsum.photos/703"
+          title="Production 4"
+          date="2023-05-01"
+          description="This is a description of the production."
+        />
+        <Card
+          type="production"
+          image_path="https://picsum.photos/704"
+          title="Production 5"
+          date="2023-05-01"
+          description="This is a description of the production."
+        />
+        <Card
+          type="production"
+          image_path="https://picsum.photos/700"
+          title="Production Ramon"
+          date="2023-05-01"
+          description="This is a description of the production."
+        />
+      </div>
+    </div>
+    <div className="col-span-1"></div>
+  </section>
+)
+
+export default Productions;

components/Sessions.tsx

@@ -0,0 +1,13 @@
+const Sessions = () => (
+  <div className="py-32 bg-fill bg-no-repeat md:grid grid-cols-7" style="background-image: url('actors.webp')">
+    <div className="col-span-1"></div>
+    <div className="col-span-5 flex flex-col justify-center items-center gap-8 text-gray-50">
+      <p className="text-8xl text-center text-balance">Improv Sessions every Wednesday!</p>
+      <p className="text-center text-2xl">It's open to everyone, come join us in Nymble, Drottning Kristinas väg 15-19, 3rd floor!</p>
+      <a className="bg-[#ea7af4] py-4 px-8 text-4xl hover:bg-[#ffd461]" href="/">Sign up!</a>
+    </div>
+    <div className="col-span-1"></div>
+  </div>
+)
+
+export default Sessions;

fresh.gen.ts

@@ -5,7 +5,7 @@
 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 * as $Carousel from "./islands/Carousel.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -15,7 +15,7 @@ const manifest = {
     "./routes/index.tsx": $index,
   },
   islands: {
-    "./islands/Counter.tsx": $Counter,
+    "./islands/Carousel.tsx": $Carousel,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;