Ce landing page events section

components/Alert/Alert.mocks.tsx

@@ -0,0 +1,11 @@
+import { IAlertProps } from '.';
+
+const MockAlert: IAlertProps = {
+  autoClose: true,
+  id: '1',
+  message: 'This is a message',
+  onClose: () => {},
+  type: 'success',
+};
+
+export default MockAlert;

components/Alert/Alert.module.scss

@@ -0,0 +1,30 @@
+.alert {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 60vw;
+  border-radius: 10px;
+  padding: 15px;
+  margin: 10px;
+  color: black;
+
+  span {
+    p {
+      color: black;
+    }
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  button {
+    background-color: white;
+    border-radius: 5px;
+    padding: 5px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 2px 2px 2px grey;
+    color: black;
+  }
+}

components/Alert/Alert.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Alert, { IAlertProps } from '.';
+import MockAlert from './Alert.mocks';
+
+export default {
+  title: 'Components/Alert',
+  component: Alert,
+  argTypes: {},
+} as ComponentMeta<typeof Alert>;
+
+const Template: ComponentStory<typeof Alert> = (args) => <Alert {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  ...MockAlert,
+} as IAlertProps;

components/Alert/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button } from '..';
+import styles from './Alert.module.scss';
+
+export interface IAlertProps {
+  id: string;
+  message: string;
+  autoClose: boolean;
+  type: string;
+  onClose: (id: string) => void;
+}
+
+function getBgColor(type: string) {
+  switch (type) {
+    case 'success':
+      return 'lightgreen';
+    case 'error':
+      return 'lightred';
+    case 'warning':
+      return 'lightyellow';
+    case 'info':
+      return 'lightblue';
+    default:
+      return 'lightblue';
+  }
+}
+const Alert: React.FC<IAlertProps> = ({
+  id,
+  message,
+  autoClose,
+  type,
+  onClose,
+}) => {
+  const bgcolor = getBgColor(type);
+  return (
+    <div className={styles.alert} style={{ backgroundColor: bgcolor }}>
+      <span>
+        <p>{type}</p> :<p>{message}</p>
+      </span>
+      {!autoClose && (
+        <Button
+          title="Close"
+          onClick={() => {
+            onClose(id);
+          }}
+        >
+          close
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Alert;

components/Landing Page/EventsSection/EventSection.module.scss

@@ -0,0 +1,74 @@
+@import '../../../styles/commons.scss';
+
+.event_section {
+  @extend .flexRow;
+  height: 100vh;
+  background-color: black;
+  color: white;
+
+  .left_section,
+  .right_section {
+    height: 100%;
+    width: 50%;
+  }
+
+  .left_section {
+    position: relative;
+    @extend .flexCol;
+    h1 {
+      font-family: serif;
+    }
+    .college_name {
+      position: absolute;
+      top: 33%;
+      left: 20%;
+      color: #ffffff80;
+    }
+  }
+
+  .right_section {
+    @extend .flexRow;
+    gap: 15px;
+    position: relative;
+    overflow: hidden;
+    .column_one,
+    .column_two,
+    .column_three {
+      overflow: hidden;
+      position: absolute;
+      @extend .flexCol;
+      width: 35%;
+      height: 100vh;
+      gap: 15px;
+      .halfcard {
+        height: 50%;
+        width: 100%;
+        background-color: #ffffff30;
+        border-radius: 20px;
+      }
+      .card {
+        height: 550px;
+        width: 100%;
+        background-color: #ffffff30;
+        border-radius: 20px;
+        span {
+          height: 100% !important;
+          width: 100% !important;
+        }
+      }
+      top: 0;
+      left: 0;
+    }
+    .column_one {
+      top: 80px;
+      left: 4%;
+    }
+    .column_two {
+      top: -80px;
+      left: 42%;
+    }
+    .column_three {
+      left: 80%;
+    }
+  }
+}

components/Landing Page/EventsSection/EventSection.tsx

@@ -0,0 +1,59 @@
+import { motion, useScroll, useTransform } from 'framer-motion';
+import Image from 'next/image';
+import { useRef } from 'react';
+import imageOne from '../../../public/Images/IET_EVENTS/IET_EVENTS_IMG1.png';
+import imageTwo from '../../../public/Images/IET_EVENTS/IET_EVENTS_IMG2.png';
+import imageThree from '../../../public/Images/IET_EVENTS/IET_EVENTS_IMG3.png';
+
+import styles from './EventSection.module.scss';
+
+type Props = {};
+
+const EventSection = (props: Props) => {
+  const ref = useRef(null);
+  const scrollRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end end'],
+  });
+  const x = useTransform(scrollYProgress, [0, 1], [0, 150]);
+  const y1 = useTransform(scrollYProgress, [0, 1], [-500, -50]);
+  const y2 = useTransform(scrollYProgress, [0, 1], [-100, 50]);
+  const y3 = useTransform(scrollYProgress, [0, 1], [-100, 250]);
+  return (
+    <div ref={ref} className={styles.event_section}>
+      <div className={styles.left_section}>
+        <motion.h1 style={{ x }} className={styles.college_name}>
+          IET
+        </motion.h1>
+        <h1 className={styles.college_event}>Events</h1>
+      </div>
+      <div className={styles.right_section}>
+        <motion.div style={{ y: y1 }} className={styles.column_one}>
+          <div className={styles.halfcard} />
+          <div className={styles.card}>
+            <Image src={imageOne} className={styles.image} />
+          </div>
+          <div className={styles.halfcard} />
+        </motion.div>
+        <motion.div style={{ y: y2 }} className={styles.column_two}>
+          <div className={styles.halfcard} />
+          <div className={styles.card}>
+            <Image src={imageTwo} className={styles.image} />
+          </div>
+          <div className={styles.card}>
+            <Image src={imageThree} className={styles.image} />
+          </div>
+          <div className={styles.halfcard} />
+        </motion.div>
+        <motion.div style={{ y: y1 }} className={styles.column_three}>
+          <div className={styles.halfcard} />
+          <div className={styles.card} />
+          <div className={styles.halfcard} />
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default EventSection;

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "^1.1.3",
     "clsx": "^1.2.1",
+    "framer-motion": "^9.0.1",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

pages/Home.module.scss

@@ -2,6 +2,5 @@
 
 .main {
   @extend .flexCol;
-  width: 100vw;
-  min-height: 100vh;
+  height: 100vh;
 }

pages/_app.tsx

@@ -1,9 +1,14 @@
 import type { AppProps } from 'next/app';
 import '../styles/globals.scss';
+import AlertContextProvider from '../utils/contexts/AlertContext';
 
 // eslint-disable-next-line react/function-component-definition
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
+const MyApp = ({ Component, pageProps }: AppProps) => {
+  return (
+    <AlertContextProvider>
+      <Component {...pageProps} />
+    </AlertContextProvider>
+  );
+};
 
 export default MyApp;

pages/index.tsx

@@ -1,20 +1,24 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
+import EventSection from '../components/Landing Page/EventsSection/EventSection';
 import styles from './Home.module.scss';
 
-const Home: NextPage = () => (
-  <div className={styles.container}>
-    <Head>
-      <title>IET DAVV</title>
-      <meta name="description" content="IET DAVV Website Client" />
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
+const Home: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>IET DAVV</title>
+        <meta name="description" content="IET DAVV Website Client" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
 
-    <main className={styles.main}>
-      <h1>IET DAVV Website</h1>
-      <h2 className="hello">hello</h2>
-    </main>
-  </div>
-);
+      <main className={styles.main}>
+        <h1>IET DAVV Website</h1>
+        <h2 className="hello">hello</h2>
+      </main>
+      <EventSection />
+    </div>
+  );
+};
 
 export default Home;