Merge pull request #6 from gdg-ibadan01/landing-page

Landing page

app/_module/components/animations/Pills/index.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import Styles from './styles.module.scss';
+
+interface iPills {
+  text: string;
+  bgColor?: string;
+  padding?: string;
+  url?: string;
+  randomAngle: number;
+  handleRoute?: () => void;
+}
+
+const Pills: FC<iPills> = ({
+  text,
+  bgColor,
+  padding,
+  handleRoute,
+  randomAngle,
+}) => {
+  return (
+    <div
+      className={Styles.container}
+      style={{
+        background: bgColor,
+        padding: padding,
+        transform: `rotate(${randomAngle}deg)`,
+      }}
+      onClick={handleRoute}
+    >
+      <p>{text || 'NFT ARTIST'}</p>
+    </div>
+  );
+};
+
+export default Pills;

app/_module/components/animations/Pills/styles.module.scss

@@ -0,0 +1,16 @@
+.container {
+  width: auto;
+  padding: 10px 25px;
+  background-color: var(--primary);
+  color: var(--white);
+  border-radius: 32px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 300;
+  cursor: pointer;
+
+  p {
+    white-space: nowrap;
+  }
+}

app/_module/components/animations/Skills/Skills.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import Pills from '../Pills';
+
+const colorVariables = ['#57caff', '#ff7daf', '#5cdb6d', '#ffd427'];
+const anglesVariables = [
+  -33, -33, 0, -27, 0, -27, 0, -10, 19, 33, 0, 17, 29, -27, -19, -19,
+];
+
+const skills = [
+  'Business Intelligence',
+  'Q.A Testers',
+  'Video Editor',
+  'Mobile Engineers',
+  'Auditors',
+  'Backend Developer',
+  'Community Manager',
+  'Frontend Developer',
+  'Animators',
+  'Digital Marketer',
+  'Content Writer',
+  'Network Administrators',
+  'Data Engineer',
+  'Product Management',
+  'Tech Lawyer',
+  'Devops',
+];
+
+const Skills: React.FC = () => {
+  const [randomColors, setRandomColors] = useState<string[]>([]);
+
+  useEffect(() => {
+    const randomColorArray = Array.from({ length: skills.length }, () => {
+      const randomIndex = Math.floor(Math.random() * colorVariables.length);
+      return colorVariables[randomIndex];
+    });
+    setRandomColors(randomColorArray);
+  }, []);
+
+  return (
+    <div className="flex flex-wrap justify-center items-center w-full gap-4 mt-10 h-[380px] md:h-[300px] overflow-hidden">
+      {skills.map((skill, idx) => (
+        <Pills
+          key={idx}
+          text={skill}
+          bgColor={randomColors[idx]}
+          randomAngle={anglesVariables[idx]}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Skills;

app/_module/components/cards/SpeakerCard/index.tsx

@@ -0,0 +1,32 @@
+import Image, { StaticImageData } from 'next/image';
+import { FC } from 'react';
+import { speakersCardClass as Styles } from './speaker-card';
+
+export type TspeakerProps = {
+  name: string;
+  title: string;
+  src: StaticImageData;
+};
+
+const SpeakerCard: FC<TspeakerProps> = (props) => {
+  const { name, src, title } = props;
+  return (
+    <div className={Styles.wrapper}>
+      <section className={Styles.section}>
+        <Image
+          alt={`${name}-${title}`}
+          src={src}
+          className={Styles.img}
+          width={100}
+          height={100}
+        />
+      </section>
+      <div className={Styles.nameTitleWrapper}>
+        <h1 className={Styles.name}>{name}</h1>
+        <p className={Styles.title}>{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default SpeakerCard;

app/_module/components/cards/SpeakerCard/speaker-card.ts

@@ -0,0 +1,9 @@
+export const speakersCardClass = {
+  wrapper:
+    'flex flex-col overflow-hidden border-2 border-black rounded-2xl cursor-pointer',
+  section: 'w-full h-[294px]',
+  img: 'w-full h-full object-cover',
+  nameTitleWrapper: 'flex flex-col gap-2 p-4 pb-7 bg-white',
+  name: 'text-2xl font-bold',
+  title: 'text-opacity-60 font-light',
+};

app/_module/components/common/DFIfooter/DFIfooter.classes.ts

@@ -0,0 +1,19 @@
+export const footerClass = {
+  footer: 'bg-pastel-yellow pt-56',
+  wrapper: 'container mx-auto flex flex-col gap-4',
+  logoContainer:
+    'flex items-center w-124 h-32 hover:scale-110 transition-transform duration-300 ease-in-out',
+  middle: 'flex flex-col lg:flex-row justify-between items-center gap-20',
+  bottom:
+    'flex flex-col gap-4 lg:gap-0 lg:flex-row justify-between items-center lg:items-start lg:items-end',
+  menuWrapper: 'flex flex-col lg:flex-row justify-between gap-48 lg:gap-80',
+  menu: 'flex flex-col gap-16 text-left',
+  socialsWrapper: 'flex flex-col gap-20 text-center lg:text-left',
+  socials: 'flex justify-around lg:justify-start gap-72',
+  socialLink: 'inline-block h-48 w-48',
+  btn: 'text-sm rounded-3xl hover:bg-core-blue hover:border border-solid border-black order-1 lg:order-2',
+  location: 'max-w-[500px]',
+  pSm: 'text-sm',
+  socialsCopyright:
+    'flex flex-col order-2 lg:order-1 gap-4 text-center lg:text-left',
+};

app/_module/components/common/DFIfooter/index.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { ReactNode, useEffect, useRef } from 'react';
+import { footerClass as styles } from './DFIfooter.classes';
+import {
+  CurlyBraces,
+  DevfestLogo,
+  Instagram,
+  Facebook,
+  Linkedin,
+  Colon,
+  Groundnut,
+  SemiColon,
+  SplittedTag,
+} from '../../icons';
+import { footerItems } from '@/app/_module/config/constants/globals';
+import MenuLink from '../../menulink';
+import { Button } from '../../ui/button';
+import { motion, useAnimation, useInView } from 'framer-motion';
+
+const DFIFooter = (): ReactNode => {
+  const { frameOne, frameTwo, frameThree } = footerItems;
+
+  const controls = useAnimation();
+  const footerRef = useRef(null);
+  const isInView = useInView(footerRef, { once: true });
+
+  useEffect(() => {
+    if (isInView) {
+      controls.start('visible');
+    }
+  }, [isInView, controls]);
+
+  const containerVariants = {
+    hidden: { opacity: 1 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const dropInVariants = {
+    hidden: { y: -50, opacity: 0 },
+    visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
+  };
+
+  return (
+    <footer className={styles.footer} ref={footerRef}>
+      <div className={styles.wrapper}>
+        <div className={styles.logoContainer}>
+          <DevfestLogo fill="fill-black" stroke="stroke-black" />
+        </div>
+        <div className={styles.middle}>
+          <p className={styles.location}>
+            Devfest is taking place on December 3rd, 2024 from 9:00 AM to 5:00
+            PM at Kakanfo Inn & Conference Center - Kakanfo Inn & Conference
+            Center. Kakanfo Inn & Conference Center Conference Center.
+          </p>
+          <div className={styles.menuWrapper}>
+            <ul className={styles.menu}>
+              {frameOne.map(({ label, slur }) => (
+                <MenuLink key={slur} label={label} slur={slur} />
+              ))}
+            </ul>
+            <ul className={styles.menu}>
+              {frameTwo.map(({ label, slur }) => (
+                <MenuLink key={slur} label={label} slur={slur} />
+              ))}
+            </ul>
+            <ul className={styles.menu}>
+              {frameThree.map(({ label, slur }) => (
+                <MenuLink key={slur} label={label} slur={slur} />
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className={styles.bottom}>
+          <div className={styles.socialsCopyright}>
+            <div className={styles.socialsWrapper}>
+              <p className={styles.pSm}>Connect with us on our Social</p>
+              <ul className={styles.socials}>
+                <li>
+                  <a href="" className={styles.socialLink}>
+                    <Instagram color="fill-white" fill="fill-social-dark" />
+                  </a>
+                </li>
+                <li>
+                  <a href="" className={styles.socialLink}>
+                    <Linkedin color="fill-white" fill="fill-social-dark" />
+                  </a>
+                </li>
+                <li>
+                  <a href="" className={styles.socialLink}>
+                    <Facebook color="fill-white" fill="fill-social-dark" />
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <p className={styles.pSm}>@Devfest2024. All Right Reserved</p>
+          </div>
+          <Button className={styles.btn}>Play Puzzle Game</Button>
+        </div>
+      </div>
+      <motion.div
+        className="doodles flex justify-between items-end"
+        initial="hidden"
+        animate={controls}
+        variants={containerVariants}
+      >
+        <motion.div
+          className="doodleContainer w-full lg:w-[240px]"
+          variants={dropInVariants}
+        >
+          <CurlyBraces fill="fill-pastel-green" stroke="stroke-black" />
+        </motion.div>
+        <motion.div
+          className="doodleContainer w-full lg:w-[240px] "
+          variants={dropInVariants}
+        >
+          <Colon fill="fill-core-blue" stroke="stroke-black" />
+        </motion.div>
+        <motion.div
+          className="doodleContainer w-full lg:w-[525px]"
+          variants={dropInVariants}
+        >
+          <Groundnut fill="fill-pastel-red" stroke="stroke-black" />
+        </motion.div>
+        <motion.div
+          className="doodleContainer w-full lg:w-[245px]"
+          variants={dropInVariants}
+        >
+          <SemiColon fill="fill-core-yellow" stroke="stroke-black" />
+        </motion.div>
+        <motion.div
+          className="doodleContainer w-full lg:w-[344px]"
+          variants={dropInVariants}
+        >
+          <SplittedTag fill="fill-halftone-red" stroke="stroke-black" />
+        </motion.div>
+      </motion.div>
+    </footer>
+  );
+};
+
+export default DFIFooter;

app/_module/components/common/DFIheader/DFIheader.classes.ts

@@ -0,0 +1,14 @@
+export const headerClass = {
+  header: 'fixed w-full bg-pastel-yellow lg:bg-transparent py-24 lg:py-36 z-20',
+  wrapper: 'container mx-auto flex justify-between items-center',
+  logoContainer:
+    'flex items-center w-124 h-32 hover:scale-110 transition-transform duration-300 ease-in-out',
+  headerMenu:
+    'w-full pl-0 flex flex-col lg:flex-row items-center sm:gap-1 lg:gap-4 xl:gap-48',
+  showMenu:
+    'bg-pastel-blue absolute top-80 left-0 w-full p-20 flex lg:hidden z-10',
+  toggleMenuBtn:
+    'lg:hidden h-24 w-24 flex justify-center items-center border-none bg-transparent p-0',
+  list: 'text-center my-4',
+  btn: 'text-sm rounded-3xl hover:bg-core-blue hover:border border-solid border-black',
+};