Footer section

client/src/app/(home)/page.tsx

@@ -50,7 +50,7 @@ export default function HomePage() {
 
       {/* Medium */}
       <div className="medium flex items-start justify-center hidden">
-        <h1 className="hidden text-white text-5xl font-bold">Medium</h1>
+        <h1 className="hidden text-white text-5xl font-bold">Medium TEST ESTTEUHEUFHE</h1>
       </div>
 
       {/* Footer - temporarily using the dashboard one */}

client/src/components/footer.tsx

@@ -1,48 +1,102 @@
 import Link from "next/link"
+import { CloudsFooterGraphic } from "./graphics/clouds-footer"
+import { cn } from "@/lib/utils"
+import Image from "next/image";
+import { patrickHand, spaceGrotesk } from "@/lib/google-fonts"
+import { siteConfig } from "@/config/site";
 
-export function Footer() {
+function SocialsBar() {
+  return (
+    <div className="flex gap-1 sm:gap-1 md:gap-1 items-center justify-center mt-4">
+      {siteConfig.socials.map((social) => {
+        const Icon = social.icon;
+        return (
+          <Link
+            key={social.key}
+            href={social.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-1 sm:p-2 md:p-3 rounded-full"
+          >
+            <Icon className="w-4 h-4 sm:w-6 sm:h-6 md:w-8 md:h-8 text-[#006793]" />
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+export function Footer ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   const mlhCodeOfConduct = (
-    <Link className="underline" href="https://mlh.io/code-of-conduct">
+    <Link className="underline text-[#3CA3BC]" href="https://mlh.io/code-of-conduct">
       MLH Code of Conduct
     </Link>
   )
-  const compsoc = (
-    <Link className="underline" href="https://compsoc.tech">
+  const CompSoc = (
+    <Link className="underline text-[#3CA3BC]" href="https://compsoc.tech">
       compsoc.tech
     </Link>
   )
-  const durhamStudentsUnion = (
-    <Link className="underline" href="https://durhamsu.com">
+  const StudentUnion = (
+    <Link className="underline text-[#3CA3BC]" href="https://durhamsu.com">
       durhamsu.com
     </Link>
   )
-  const durhamStudentsUnionCompany = (
-    <Link className="underline" href="https://find-and-update.company-information.service.gov.uk/company/07689815">
-      07689815
-    </Link>
-  )
-  const durhamStudentsUnionCharity = (
-    <Link
-      className="underline"
-      href="https://register-of-charities.charitycommission.gov.uk/en/charity-search/-/charity-details/5023833"
+  return (
+    <div
+      className={cn(
+        "footer h-[calc(40rem+25vw)] sm:h-180 md:h-185 lg:h-180 xl:h-180 2xl:h-200 relative flex items-start justify-center overflow-hidden",
+        className,
+      )}
+      {...props}
     >
-      1145400
-    </Link>
-  )
+      <div className="absolute h-full w-full">
+        <CloudsFooterGraphic className="absolute top-5 w-full" />
+      </div>
 
-  return (
-    <footer className="border-muted-foreground border-t py-6 md:px-8 md:py-0 bg-[rgba(29,25,52,1)]">
-      <div className="container flex flex-col items-center text-center justify-between gap-4 md:py-4">
-        <p>DurHack follows the {mlhCodeOfConduct}.</p>
-        <p>
-          DurHack is an event hosted by Durham University Computing Society ({compsoc}), which is a student society
-          affiliated with Durham Students' Union ({durhamStudentsUnion}). Durham Students' Union is registered in
-          England as a company limited by guarantee ({durhamStudentsUnionCompany}) and a charity (
-          {durhamStudentsUnionCharity}), with VAT number 119733690 and registered office Dunelm House, New Elvet, Durham
-          DH1 3AN.
-        </p>
+      <div className="relative z-10 rounded-3xl w-[90%] h-[90%] translate-y-32 flex flex-col items-center px-8 py-12 sm:py-16" style={{ backgroundColor: "#DCF4FF" }}>
+
+        <div>
+          <Image
+            src="/assets/graphics/DurhackLogo.svg"
+            alt="Durhack Logo"
+            width={416}
+            height={115}
+            className="absolute left-[10%] top-[20%] w-1/4 max-w-150"
+          />
+
+          <div className="absolute items-center text-center right-[10%] top-[10%] max-w-250">
+            <h2 className={cn(
+              patrickHand.className,
+              "section-header text-[#006793] uppercase text-2xl sm:text-2xl md:text-4xl lg:text-5xl font-bold w-fit",
+              className,
+            )} style={{ color: "#006793" }}>CONTACT US!</h2>
+            <br></br>
+            <h1 className="text-2xl sm:text-2xl md:text-3xl lg:text-4xl" style={{ color: "#006793" }}>[email protected]</h1>
+            <div>
+              <SocialsBar />
+            </div>
+          </div>
+        </div>
+        <div className="w-3/4 h-[1px] bg-gray-300 mt-65"></div>
+          <div className="relative items-center text-center bottom-[-10%]">
+            <p className={cn(
+              spaceGrotesk.className,
+              "text-[#006793] text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl font-normal px-6",
+            )}>
+              DurHack follows the {mlhCodeOfConduct}. Photos and videos taken at events in 2024.
+            </p>
+            <br></br>
+            <p className={cn(
+              spaceGrotesk.className,
+              "text-[#006793] text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl font-normal px-6",
+            )}>
+              DurHack is an event hosted by Durham University Computing Society ({CompSoc}), which is a student society affiliated with Durham Students' Union ({StudentUnion}). Durham Students' Union is registered in England as a company limited by guarantee (07689815) and a charity (1145400), with VAT number 119733690 and registered office Dunelm House, New Elvet, Durham DH1 3AN.
+            </p>
+        </div>
+
       </div>
-    </footer>
+    </div>
   )
 }
 

client/src/components/graphics/clouds-footer.tsx

@@ -0,0 +1,31 @@
+import type * as React from "react"
+
+export function CloudsFooterGraphic({ ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={1920}
+      height={1395}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="url(#a)"
+        d="M2372 5.59c49.24 16.105 78.56 62.223 66.68 103.973 84.04 56.031 127.36 148.107 100.29 230.882-34.22 104.628-167.97 154.774-298.73 112.004a313.395 313.395 0 0 1-32.13-12.494c55.55 84.969 111.09 89.086 80.57 153.695 111.96 78.833 32.07 118.222-110.43 74.437 8.37 17.677 15.55 34.701 21.33 50.627 56.43 155.459 277.24 705.816-21.38 760.126-298.62 54.32-1003.58-407.98-1060.01-563.442-2.48-6.832-3.94-14.043-4.45-21.591-27.81 12.589-72.18 12.671-118.077-2.339-63.555-20.788-107.659-63.203-104.117-98.092-37.194-16.936-77.181-38.96-108.486-60.576-30.121 79.638-96.362 134.13-168.367 145.561 39.284 100.654 45.441 213.629 9.795 322.609-84.087 257.08-368.94 394.62-636.238 307.19-267.297-87.43-415.818-366.71-331.731-623.794C-290.088 721.126-155.75 606.088 3.64 566.234c-15.209-21.912-4.345-58.013 26.458-83.98 19.654-16.569 43.023-25.3 63.145-25.299-.743-2.782-.526-5.197.789-7.094 5.808-8.38 35.274-7.742 66.436 19.514 17.987-24.446 55.764-34.454 92.829-22.331 44.124 14.433 70.529 54.764 58.978 90.083-3.237 9.894-9.11 18.344-16.857 25.067 1.97 2.624 2.979 5.757 2.717 8.881 11.508-.411 26.134 4.224 39.289 13.347 7.732 5.363 13.886 11.535 18.115 17.741a250.831 250.831 0 0 1 17.468 5.029c13.846 4.529 26.408 9.919 36.758 15.525a254.559 254.559 0 0 1 6.18-22.249c4.987-15.246 11.274-29.649 18.665-43.093-5.689-8.457-7.774-17.692-5.012-26.136 3.445-10.534 13.702-17.607 27.027-20.18-10.308-18.671-13.185-41.101-6.154-62.599 13.725-41.963 60-64.485 103.357-50.303a85.81 85.81 0 0 1 12.488 5.2c1.726-7.119 6.647-12.13 13.371-12.521a14.6 14.6 0 0 1 1.725.003c4.179-10.115 11.339-17.064 21.224-19.281 12.888-2.891 28.064 2.785 42.413 14.387 16.56-10.737 35.448-14.475 53.017-8.729 28.528 9.331 45.082 40.895 43.36 76.871 11.53-7.496 27.064-9.75 42.163-4.812 24.943 8.158 39.25 32.857 31.953 55.165-3.575 10.932-11.677 19.258-21.943 23.95 2.809 2.289 5.517 5.123 7.88 8.373 7.839 10.781 8.915 22.048 2.404 25.167a7.608 7.608 0 0 1-1.205.455c6.352 6.939 10.863 15.445 13.114 24.666a75.833 75.833 0 0 1 11.437 2.483c13.69-9.812 34.697-12.607 55.534-5.792 27.796 9.091 45.73 32.159 43.102 53.732 4.001 4.031 6.314 8.123 6.536 12.245 46.042-16.428 99.559-11.952 116.879 20.594a182.036 182.036 0 0 1 19.85-8.191c4.39-1.514 8.79-2.853 13.19-4.019-1.29-13.432-.92-27.317 1.32-41.37 13.18-82.926 86.11-140.256 162.89-128.05 20.07 3.19 37.98 10.084 53.25 20.005 5.07-28.888 23.64-52.222 51.78-60.16 8.42-2.375 19.91-.154 33.16 5.354 5.76-34.173 24.72-70.048 56.25-100.974 69.19-67.868 172.69-86.203 231.18-40.952 7.46 5.772 13.6 12.189 18.5 19.131 3.24-9.895 6.6-19.38 10.71-27.728 4.4-40.921 35.49-81.567 86.47-105.676 73.12-34.58 161.11-22.823 203.65 25.313l.96-.907c22.02-20.232 39.09-13.047 65.92-3.763 1.2-11.013 3.54-21.97 7.07-32.767 24.48-74.858 99.91-121.827 188.75-126.832.46-2.043 1.03-4.08 1.69-6.103 13.87-42.417 65.87-63.475 116.13-47.035Z"
+      />
+      <defs>
+        <linearGradient
+          id="a"
+          x1={2380.3}
+          x2={2119.63}
+          y1={1729.09}
+          y2={-277.707}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#A0DFFF" stopOpacity={0} />
+          <stop offset={0.885} stopColor="#fff" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

client/src/components/icons.tsx

@@ -73,3 +73,16 @@ export function GitHubIcon(props: IconProps) {
     </svg>
   )
 }
+
+
+/**
+ * @see https://simpleicons.org/?q=medium
+ */
+export function MediumIcon(props: IconProps) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Medium</title>
+      <path d="M4.21 0A4.201 4.201 0 0 0 0 4.21v15.58A4.201 4.201 0 0 0 4.21 24h15.58A4.201 4.201 0 0 0 24 19.79v-1.093c-.137.013-.278.02-.422.02-2.577 0-4.027-2.146-4.09-4.832a7.592 7.592 0 0 1 .022-.708c.093-1.186.475-2.241 1.105-3.022a3.885 3.885 0 0 1 1.395-1.1c.468-.237 1.127-.367 1.664-.367h.023c.101 0 .202.004.303.01V4.211A4.201 4.201 0 0 0 19.79 0Zm.198 5.583h4.165l3.588 8.435 3.59-8.435h3.864v.146l-.019.004c-.705.16-1.063.397-1.063 1.254h-.003l.003 10.274c.06.676.424.885 1.063 1.03l.02.004v.145h-4.923v-.145l.019-.005c.639-.144.994-.353 1.054-1.03V7.267l-4.745 11.15h-.261L6.15 7.569v9.445c0 .857.358 1.094 1.063 1.253l.02.004v.147H4.405v-.147l.019-.004c.705-.16 1.065-.397 1.065-1.253V6.987c0-.857-.358-1.094-1.064-1.254l-.018-.004zm19.25 3.668c-1.086.023-1.733 1.323-1.813 3.124H24V9.298a1.378 1.378 0 0 0-.342-.047Zm-1.862 3.632c-.1 1.756.86 3.239 2.204 3.634v-3.634z"/>
+    </svg>
+  )
+}

client/src/config/site.ts

@@ -1,6 +1,6 @@
 import type * as React from "react"
 
-import { FacebookIcon, GitHubIcon, InstagramIcon, LinkedInIcon, TikTokIcon, XIcon } from "@/components/icons"
+import { FacebookIcon, GitHubIcon, InstagramIcon, LinkedInIcon, MediumIcon, TikTokIcon, XIcon } from "@/components/icons"
 import { isDevelopment, isStaging, noLocalServer } from "@/lib/environment"
 
 type socialLink = { key: string; href: string; icon: React.FC }
@@ -21,6 +21,7 @@ export const siteConfig = {
     { key: "tiktok", href: "https://www.tiktok.com/@durhack", icon: TikTokIcon },
     { key: "linkedin", href: "https://www.linkedin.com/company/durhack/mycompany/", icon: LinkedInIcon },
     { key: "x", href: "https://x.com/durhackevent", icon: XIcon },
+    { key: "medium", href: "https://medium.com/@DurHack_press", icon: MediumIcon },
   ] as const satisfies readonly socialLink[],
   sessionCookieName: "__Secure-durhack-session",
 }

client/src/lib/google-fonts.ts

@@ -1,6 +1,7 @@
-import { Audiowide, Darker_Grotesque, Electrolize, Space_Grotesk } from "next/font/google"
+import { Audiowide, Darker_Grotesque, Electrolize, Space_Grotesk, Patrick_Hand } from "next/font/google"
 
 export const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] })
 export const audiowide = Audiowide({ weight: "400", subsets: ["latin"], fallback: ["sans-serif"] })
 export const electrolize = Electrolize({ weight: "400", subsets: ["latin"] })
 export const darkerGrotesk = Darker_Grotesque({ weight: "variable", subsets: ["latin"] })
+export const patrickHand = Patrick_Hand({ weight: "400", subsets: ["latin"] })