💄 added the current page highlight to the hamburger menu

strapi/src/api/index/content-types/index/schema.json

@@ -61,6 +61,15 @@
         }
       },
       "type": "text"
+    },
+    "blocks": {
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
+      },
+      "type": "dynamiczone",
+      "components": []
     }
   }
 }

web/.netlify/deploy/v1/config.json

@@ -1,5 +1 @@
-{
-  "images": {
-    "remote_images": ["https?://wdcc-website\\.fly\\.storage\\.tigris\\.dev/.*"]
-  }
-}
+{"images":{"remote_images":["https?://wdcc-website\\.fly\\.storage\\.tigris\\.dev/.*"]}}

web/astro.config.mjs

@@ -17,4 +17,3 @@ export default defineConfig({
     domains: ["wdcc-website.fly.storage.tigris.dev"],
   },
 });
-

web/components.json

@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

web/src/components/ResponsiveImage.tsx

@@ -0,0 +1,16 @@
+interface ResponsiveImageProps {
+  imageUrl: string;
+  imageAlt: string;
+}
+
+const ResponsiveImage = ({ imageUrl, imageAlt }: ResponsiveImageProps) => {
+  return (
+    <img
+      className="max-w-xs sm:max-w-xl md:max-w-2xl lg:max-w-3xl rounded-lg"
+      src={imageUrl}
+      alt={imageAlt}
+    />
+  );
+};
+
+export default ResponsiveImage;

web/src/components/home/Hero.tsx

@@ -0,0 +1,40 @@
+import ResponsiveImage from "../ResponsiveImage";
+import { Button } from "../ui/button";
+
+interface HeroProps {
+  intro: string;
+  subIntro: string;
+  imageUrl: string;
+  imageAlt: string;
+  linkHref: string;
+  linkText: string;
+}
+
+const Hero = ({
+  intro,
+  subIntro,
+  imageUrl,
+  imageAlt,
+  linkHref,
+  linkText,
+}: HeroProps) => {
+  return (
+    <div className="flex flex-col items-center gap-6 lg:gap-8">
+      <Button variant="skyblue" className="rounded-full px-8 cursor-default">
+        The University of Auckland
+      </Button>
+      <h1 className="text-center leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-4xl md:text-5xl lg:text-6xl">
+        {intro}
+      </h1>
+      <p className="max-w-md overflow-hidden flex items-center justify-center text-center">
+        {subIntro}
+      </p>
+      <Button asChild>
+        <a href={linkHref}>{linkText}</a>
+      </Button>
+      <ResponsiveImage imageUrl={imageUrl} imageAlt={imageAlt} />
+    </div>
+  );
+};
+
+export default Hero;

web/src/components/navigation/Header.tsx

@@ -68,7 +68,11 @@ const Header = () => {
           >
             <div className="p-8 flex flex-col justify-center items-center gap-8 text-3xl">
               {navItemsCenter.concat(navItemsRight).map((item, index) => (
-                <a href={item.route} key={index}>
+                <a
+                  href={item.route}
+                  key={index}
+                  className={`${currentPath === item.route ? "text-primary highlight underline underline-offset-8 decoration-2" : ""} `}
+                >
                   {item.name}
                 </a>
               ))}

web/src/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -18,6 +18,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        skyblue: "drop-shadow-lg bg-skyblue text-black",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -30,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -49,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

web/src/global.css

@@ -24,6 +24,8 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 210 94% 49%;
     --radius: 0.5rem;
+    --skyblue: 195, 100%, 90%;
+    --skyblue-foreground: 195, 100%, 30%;
   }
 
   .dark {

web/src/lib/strapi.ts

@@ -24,13 +24,13 @@ export default async function fetchApi<T>({
   }
 
   const url = new URL(`${import.meta.env.STRAPI_URL}/api/${endpoint}`);
-
   if (query) {
     Object.entries(query).forEach(([key, value]) => {
       url.searchParams.append(key, value);
     });
   }
   const res = await fetch(url.toString());
+  console.log(url.toString());
   let data = await res.json();
 
   if (wrappedByKey) {

web/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

web/src/pages/index.astro

@@ -1,25 +1,37 @@
 ---
-import { Button } from "@/components/ui/button";
+import Hero from "@/components/home/Hero";
 import "@/global.css";
-import Layout from '../layouts/layout.astro';
+import Layout from "../layouts/layout.astro";
 import fetchApi from "../lib/strapi";
 
+const STRAPI_URL = import.meta.env.STRAPI_URL;
+
 const index = await fetchApi<any>({
   endpoint: "index?populate=*",
   wrappedByKey: "data",
 });
 
-// const introContent = index.attributes.intro && await marked.parse(index.attributes.intro);
-// const subIntroContent = index.attributes.subIntro && await marked.parse(index.attributes.subIntro);
+const intro = index.attributes.intro;
+const subIntro = index.attributes.subintro;
+const imageUrl =
+  STRAPI_URL + index.attributes.gallery.data[0].attributes.formats.large.url;
+const imageAlt = index.attributes.gallery.data[0].attributes.alternativeText;
+const linkHref = index.attributes.links[0].href;
+const linkText = index.attributes.links[0].value;
 ---
 
-<Layout title='WDCC' description="The Web Development & Consulting Club @ The University of Auckland">
-  <h1>Test H1</h1>
-  <h2>Test H2</h2>
-  <h3>Test H3</h3>
-  <h4>Test H4</h4>
-  <p>Test P</p>
-  <p class="text-sm">Text xs</p>
-  <Button>Hello</Button>
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <Hero
+      intro={intro}
+      subIntro={subIntro}
+      imageUrl={imageUrl}
+      imageAlt={imageAlt}
+      linkHref={linkHref}
+      linkText={linkText}
+    />
+  </div>
 </Layout>
-

web/tailwind.config.mjs

@@ -66,8 +66,11 @@ module.exports = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        skyblue: {
+          DEFAULT: "hsl(var(--skyblue))",
+          foreground: "hsl(var(--skyblue-foreground))",
+        },
       },
-
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",