Merge pull request #39 from UoaWDCC/03_hero

#3: [Home] hero
UoaWDCC · Jun 25, 2024 · 124835c · 124835c
2 parents 8070804 + e957e79
commit 124835c
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 36 deletions.
diff --git a/strapi/src/api/index/content-types/index/schema.json b/strapi/src/api/index/content-types/index/schema.json
@@ -61,6 +61,15 @@
         }
       },
       "type": "text"
+    },
+    "blocks": {
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
+      },
+      "type": "dynamiczone",
+      "components": []
     }
   }
 }
diff --git a/web/astro.config.mjs b/web/astro.config.mjs
@@ -17,4 +17,3 @@ export default defineConfig({
     domains: ["wdcc-website.fly.storage.tigris.dev"],
   },
 });
-
diff --git a/web/components.json b/web/components.json
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}
diff --git a/web/public/images/hero-img-compressed.JPG b/web/public/images/hero-img-compressed.JPG
diff --git a/web/src/components/ResponsiveImage.tsx b/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;
diff --git a/web/src/components/home/Hero.tsx b/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;
diff --git a/web/src/components/ui/button.tsx b/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";
 

diff --git a/web/src/global.css b/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 {

diff --git a/web/src/layouts/layout.astro b/web/src/layouts/layout.astro
@@ -1,7 +1,7 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
-import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import Header from "../components/Header.astro";
 
 interface Props {
   title: string;
@@ -10,7 +10,7 @@ interface Props {
 
 const { title, description }: Props = Astro.props;
 
-import { Image, getImage } from "astro:assets";
+import { getImage } from "astro:assets";
 
 import TopographicImageSrc from "../../public/Topographic 3.svg";
 const TopographicImage = await getImage({ src: TopographicImageSrc });
@@ -22,9 +22,9 @@ const TopographicImage = await getImage({ src: TopographicImageSrc });
     <BaseHead title={title} description={description} />
   </head>
 
-	<body class="max-h-screen relative bg-slate-100 max-w-[1125px] mx-auto">
-		<Header />
-		<main class="min-h-full static">
+  <body class="max-h-screen relative bg-slate-100 max-w-[1125px] mx-auto">
+    <Header />
+    <main class="min-h-full static">
       <slot />
       <!-- <Image alt="Topographic Wallpaper" width={100} height={200} quality="max" class="w-full absolute top-0 -z-10 opacity-70" src={TopographicImage.src}/>  -->
     </main>

diff --git a/web/src/lib/strapi.ts b/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) {

diff --git a/web/src/lib/utils.ts b/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));
 }
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
@@ -1,32 +1,37 @@
 ---
-import BaseHead from "../components/BaseHead.astro";
-import Header from "../components/Header.astro";
-import Footer from "../components/Footer.astro";
-import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
+import Hero from "@/components/home/Hero";
+import "@/global.css";
+import Layout from "../layouts/layout.astro";
 import fetchApi from "../lib/strapi";
-import type Article from "../interfaces/article";
-import { Image, getImage } from "astro:assets";
-import { marked, parse } from "marked";
-import Layout from '../layouts/layout.astro';
-import { Button } from "@/components/ui/button"
-import "@/global.css"
+
+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>
-
diff --git a/web/tailwind.config.mjs b/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)",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,4 +17,3 @@ export default defineConfig({
		domains: ["wdcc-website.fly.storage.tigris.dev"],
		},
		});
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,4 @@ @@
         "components": "@/components",
         "utils": "@/lib/utils"
       }
-    }
+    }