Finished front-end of website

frontend-v2/components/EventCard.tsx

@@ -8,7 +8,7 @@ import {
     Box,
     Skeleton,
 } from "@chakra-ui/react";
-import { SpecialArrowButton } from "./Parts";
+import { SpecialLinkButton } from "./Parts";
 
 interface IEventCard {
     name: string;
@@ -71,7 +71,7 @@ export default function EventCard(props: IEventCard) {
             </CardBody>
             <CardFooter paddingTop='0px' justifyContent='flex-start'>
                 <Skeleton isLoaded={!loading}>
-                    <SpecialArrowButton path='/events' text='Details' />
+                    <SpecialLinkButton path='/events' text='Details' />
                 </Skeleton>
             </CardFooter>
         </Card>

frontend-v2/components/EventCardFull.tsx

@@ -0,0 +1,79 @@
+import {
+    Image,
+    Text,
+    VStack,
+    Card,
+    CardBody,
+    Box,
+    Skeleton,
+} from "@chakra-ui/react";
+
+interface IEventCardFull {
+    name: string;
+    date: Date;
+    location: string;
+    image: string;
+    description: string;
+    loading: boolean;
+}
+
+export default function EventCardFull(props: IEventCardFull) {
+    const {name, date, location, image, description, loading} = props;
+
+    return (
+        <Card
+            variant='elevated'
+            size='sm'
+            key={name}
+            width='300px'
+            borderRadius='15px'
+            marginX='25px'
+            background='brand.mid_white'
+            color="black"
+        >
+            <CardBody alignContent='flex-start'>
+                <Skeleton isLoaded={!loading}>
+                    <Image
+                        src={image}
+                        alt={name}
+                        borderRadius='15px'
+                        width='100%'
+                        height='300px'
+                        objectFit='cover'
+                    />
+                </Skeleton>
+                <VStack paddingTop='10px' direction='column' spacing='2'>
+                    <Skeleton isLoaded={!loading} width='100%'>
+                        <Box justifyContent='flex-start' width='100%'>
+                            <Text fontSize='xl' fontWeight='bold'>
+                                {name}
+                            </Text>
+                        </Box>
+                    </Skeleton>
+                    <Skeleton isLoaded={!loading} width='100%'>
+                        <Box justifyContent='flex-start' width='100%'>
+                            <Text fontSize='md'>
+                                {date.toLocaleDateString()} •{" "}
+                                {date.toLocaleTimeString()}
+                            </Text>
+                        </Box>
+                    </Skeleton>
+                    <Skeleton isLoaded={!loading} width='100%'>
+                        <Box justifyContent='flex-start' width='100%'>
+                            <Text fontSize='md'>
+                                Location: {location}
+                            </Text>
+                        </Box>
+                    </Skeleton>
+                    <Skeleton isLoaded={!loading} width='100%'>
+                        <Box justifyContent='flex-start' width='100%'>
+                            <Text fontSize='sm'>
+                                {description}
+                            </Text>
+                        </Box>
+                    </Skeleton>
+                </VStack>
+            </CardBody>
+        </Card>
+    );
+}

frontend-v2/components/EventPanel.tsx

@@ -4,6 +4,7 @@ import {
     Flex,
     Text,
     VStack,
+    Spacer,
 } from "@chakra-ui/react";
 
 interface IEventPanel {
@@ -20,7 +21,6 @@ export default function EventPanel(props: IEventPanel) {
     return (
         <Flex
             id='meeting-info'
-            height='450px'
             direction='row'
             width='80vw'
             maxW='1500px'
@@ -29,30 +29,29 @@ export default function EventPanel(props: IEventPanel) {
             alignItems='center'
             marginBottom='50px'
         >
-            <Box width='30vw' maxW='500px'>
+            <Box width='500px' margin='50px'>
                 <Image
                     src={image}
                     alt={name}
                     height='350px'
                     width='350px'
-                    marginLeft='50px'
                     borderRadius='15px'
                     objectFit='cover'
                 />
             </Box>
-            <VStack width='50vw' maxWidth='1000px'>
+            <VStack width='calc(min(80vw, 1500px) - 350px)' paddingRight="50px" marginTop='50px' marginBottom='50px'>
                 <Box justifyContent='flex-start' width='100%'>
-                    <Text fontSize='4xl' fontWeight='bold' color='white'>
+                    <Text fontSize={[ "2xl", "2xl", "4xl" ]} fontWeight='bold' color='white'>
                         {name}
                     </Text>
                 </Box>
                 <Box justifyContent='flex-start' width='100%'>
-                    <Text fontSize='xl' fontWeight='bold' color='white'>
+                    <Text fontSize={[ "md", "md", "xl" ]} fontWeight='bold' color='white'>
                         {date.toLocaleDateString()} • {location}
                     </Text>
                 </Box>
                 <Box justifyContent='flex-start' width='100%'>
-                    <Text fontSize='xl' color='white'>
+                    <Text fontSize={[ "md", "md", "xl" ]} color='white'>
                         {description}
                     </Text>
                 </Box>

frontend-v2/components/Layout.tsx

@@ -69,7 +69,7 @@ export default function Layout({ children }: { children: ReactElement }) {
                 {!isLargerThan1200 && (
                     <Sidebar show={showSide} handleShow={showSidebar} />
                 )}
-                <Box marginTop='150px' width='100vw'>
+                <Box marginTop={isLargerThan1200 ? '150px' : '100px'} width='100vw'>
                     {children}
                 </Box>
                 <Footer />

frontend-v2/components/Parts.tsx

@@ -1,19 +1,34 @@
 import { Button, Text } from "@chakra-ui/react";
-import { ReactElement } from "react";
+import { FormEventHandler, ReactElement } from "react";
 import NextLink from "next/link";
 
 
 interface IButton {
-    path: string;
     text: string;
     textColor?: string;
+}
+
+interface ILinkButton extends IButton {
+    path: string;
     handleShow?: () => void;
 }
 
+interface IIconButton extends ILinkButton {
+    icon: ReactElement;
+}
+
+interface ICallbackButton extends IButton {
+    onClick: FormEventHandler<HTMLButtonElement>;
+}
+
+interface IIconCallbackButton extends ICallbackButton {
+    icon: ReactElement;
+}
+
 /**
  * Header Button (transparent with white border on hover)
  */
-export const HeaderButton = (props: IButton) => {
+export const HeaderButton = (props: ILinkButton) => {
     const { path, text } = props;
 
     return (
@@ -36,7 +51,7 @@ export const HeaderButton = (props: IButton) => {
 /**
  * Special Header Button (purple gradient with white border on hover)
  */
-export const SpecialHeaderButton = (props: IButton) => {
+export const SpecialHeaderButton = (props: ILinkButton) => {
     const { path, text } = props;
 
     return (
@@ -69,10 +84,89 @@ export const SpecialHeaderButton = (props: IButton) => {
     );
 };
 
+/**
+ * Special Header Button (purple gradient with white border on hover)
+ */
+export const SpecialIconButton = (props: IIconButton) => {
+    const { path, text, icon } = props;
+
+    return (
+        <NextLink href={path} target="_blank">
+            <Button
+                rounded="xl"
+                bgGradient="linear(to-b, brand.purple, brand.dark_purple)"
+                color="white"
+                shadow='xl'
+                height='50px'
+                marginLeft='3px'
+                marginRight='3px'
+                _hover={{
+                    border: "3px solid white",
+                    cursor: "pointer",
+                    marginLeft: "0px",
+                    marginRight: "0px",
+                }}
+                rightIcon={icon}
+            >
+                <Text
+                    color='white'
+                    fontSize='xl'
+                    fontWeight='normal'
+                    paddingLeft={5}
+                    paddingBottom={5}
+                    paddingTop={5}
+                    paddingRight={2}
+                >
+                    {text}
+                </Text>
+            </Button>
+        </NextLink>
+    );
+};
+
+/**
+ * Special Header Button (purple gradient with white border on hover)
+ */
+export const SpecialSubmitButton = (props: IIconCallbackButton) => {
+    const { text, onClick, icon } = props;
+
+    return (
+        <Button
+            rounded="xl"
+            bgGradient="linear(to-b, brand.purple, brand.dark_purple)"
+            color="white"
+            shadow='xl'
+            height='50px'
+            marginLeft='3px'
+            marginRight='3px'
+            _hover={{
+                border: "3px solid white",
+                cursor: "pointer",
+                marginLeft: "0px",
+                marginRight: "0px",
+            }}
+            rightIcon={icon}
+            onClick={onClick}
+        >
+            <Text
+                color='white'
+                fontSize='xl'
+                fontWeight='normal'
+                paddingLeft={5}
+                paddingBottom={5}
+                paddingTop={5}
+                marginRight={2}
+            >
+                {text}
+            </Text>
+        </Button>
+    );
+};
+
 /**
  * Sidebar Button (transparent with white border on hover)
  */
-export const SidebarButton = (props: IButton) => {
+export const SidebarButton = (props: ILinkButton) => {
     const { path, text, handleShow } = props;
 
     return (
@@ -97,7 +191,7 @@ export const SidebarButton = (props: IButton) => {
 /**
  * Normal Button (transparent with a border on hover)
  */
-export const NormalButton = (props: IButton) => {
+export const NormalButton = (props: ILinkButton) => {
     const { path, text, textColor } = props;
 
     return (
@@ -123,11 +217,11 @@ export const NormalButton = (props: IButton) => {
 /**
  * Arrow Button (down arrow on home page)
  */
-export const SpecialArrowButton = (props: IButton) => {
+export const SpecialLinkButton = (props: ILinkButton) => {
     const { path, text } = props;
 
     return (
-        <NextLink href={path}>
+        <NextLink href={path} target={path.charAt(0) === "/" ? undefined : "_blank"}>
             <Button
                 rounded="lg"
                 bgGradient="linear(to-b, brand.purple, brand.dark_purple)"

frontend-v2/components/ProjectCard.tsx

@@ -8,7 +8,7 @@ import {
     Box,
     Skeleton,
 } from "@chakra-ui/react";
-import { SpecialArrowButton } from "./Parts";
+import { SpecialLinkButton } from "./Parts";
 
 interface IProjectCard {
     name: string;
@@ -91,7 +91,7 @@ export default function ProjectCard(props: IProjectCard) {
             </CardBody>
             <CardFooter paddingTop='0px' justifyContent='flex-start'>
                 <Skeleton isLoaded={!loading}>
-                    <SpecialArrowButton path={gitLink ?? ""} text='Details' />
+                    <SpecialLinkButton path={gitLink ?? ""} text='Details' />
                 </Skeleton>
             </CardFooter>
         </Card>

frontend-v2/pages/events.tsx

@@ -4,12 +4,15 @@ import {
     VStack,
     Text,
     Spinner,
+    useMediaQuery,
+    SimpleGrid,
 } from "@chakra-ui/react";
 // @ts-ignore
 import { getAllEvents } from "@/utils/api";
 import { lazy, useEffect, useState } from "react";
 import { IEventInfo } from "utils/parsers";
 import EventPanel from "components/EventPanel";
+import EventCardFull from "components/EventCardFull";
 
 const Room = lazy(() => import("components/Room"));
 const inter = Inter({ subsets: ["latin"] });
@@ -29,14 +32,15 @@ function Title() {
     );
 }
 
-
 interface IDisplayProps {
     events: IEventInfo[];
     loading: boolean;
 }
 
 function DisplayEvents(props: IDisplayProps) {
     const { events, loading } = props;
+    const [isSmallerThan1200] = useMediaQuery("(max-width: 1200px)");
+    const [isSmallerThan450] = useMediaQuery("(max-width: 450px)");
 
     if (loading) {
         return (
@@ -49,6 +53,24 @@ function DisplayEvents(props: IDisplayProps) {
         )
     }
 
+    if (isSmallerThan1200) {
+        return (
+            <SimpleGrid columns={isSmallerThan450 ? undefined : [1, 1, 2, 2, 3]} spacing='40px'>
+                {events.map((event) => (
+                    <EventCardFull
+                        key={event.name}
+                        name={event.name}
+                        date={event.date}
+                        location={event.location}
+                        description={event.description}
+                        image={event.image ?? "/HCPLogo.webp"}
+                        loading={loading}
+                    />
+                ))}
+            </SimpleGrid>
+        )
+    }
+
     return (
         <VStack>
             {events.map((event: IEventInfo) =>