Next JS Upgrade

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -8,17 +8,29 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

components/About.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import Link from 'next/link';
+
+type Props = {};
+
+const About = (props: Props) => {
+  return (
+    <main id="about" className="w-full sm:h-screen relative p-10 sm:p-40">
+      <Image
+        src="/assets/background/bgClean2.png"
+        alt="Home Background 2"
+        fill
+        className="absolute -z-10 left-0 top-0 hidden sm:block"
+      />
+
+      <Image
+        src="/assets/creatures/wave.png"
+        alt="Wave"
+        width={1920}
+        height={1440}
+        className="absolute z-20 left-0 opacity-80 -bottom-20 hidden sm:block"
+      />
+
+      <div className="flex flex-col justify-center sm:absolute z-30 text-white space-y-8 sm:space-y-20">
+        <motion.h1
+          whileInView={{ y: [50, 0] }}
+          transition={{
+            ease: 'easeInOut',
+            duration: 1,
+          }}
+          viewport={{ once: true }}
+          className="heading"
+        >
+          ABOUT WOC
+        </motion.h1>
+        <motion.div
+          whileInView={{ y: [50, 0] }}
+          transition={{
+            delay: 0.2,
+            ease: 'easeInOut',
+            duration: 1,
+          }}
+          viewport={{ once: true }}
+          className="text-xl space-x-2 text-justify sm:w-3/4 sm:text-2xl sm:text-left"
+        >
+          <span>
+            GDSC IIIT Kalyani brings to you, yet again, its open-source program
+            Winter of Code 3.0 with collaborative efforts from 30+ Google
+            Developer Student Clubs. The program will last for a period of 45
+            days and is based on the lines of GSoC. Student applicants are
+            required to send their proposals to organizations to work on their
+            open-source projects while their mentor evaluate them over a course
+            of the event. If you dont have a resume here is a template that you
+            may use:
+          </span>
+          <Link
+            className="text-blue-400"
+            href="https://docs.google.com/document/d/1AsopS8xBI1QAAjJpsdConQvZSLT62ZfrqhIGcPgxAUw/edit?usp=sharing"
+            rel="noreffer"
+            target="_blank"
+          >
+            Resume Template
+          </Link>
+        </motion.div>
+      </div>
+    </main>
+  );
+};
+
+export default About;

components/CommunityPatners.tsx

@@ -0,0 +1,54 @@
+import Image from 'next/image';
+import React from 'react';
+import { motion } from 'framer-motion';
+type Props = {};
+
+const CommunityPatners = (props: Props) => {
+  return (
+    <main
+      id="communityPatners"
+      className="w-full text-white sm:h-screen relative py-10 sm:p-10"
+    >
+      <Image
+        src="/assets/background/CommunityPartner.gif"
+        alt="Community Partner BG"
+        className="-z-10"
+        fill
+      />
+
+      <motion.h1
+        whileInView={{ y: [50, 0] }}
+        transition={{
+          ease: 'easeInOut',
+          duration: 1,
+        }}
+        viewport={{ once: true }}
+        className="heading text-center"
+      >
+        Community Partners
+      </motion.h1>
+
+      <div className="py-10 sm:p-10">
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-4 h-96 px-8 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/50 scrollbar-track-slate-200">
+          {Array.from(Array(40).keys()).map((i) => {
+            return (
+              <div
+                className="max-w-xs h-40 relative rounded-2xl overflow-hidden bg-white bg-opacity-70"
+                key={i}
+              >
+                <Image
+                  src={`/assets/community/Partner (${i + 1}).png`}
+                  alt={`Partner ${i}`}
+                  loading="lazy"
+                  fill
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default CommunityPatners;

components/FAQ.tsx

@@ -0,0 +1,76 @@
+import Image from 'next/image';
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import faqData from '@/lib/FAQ';
+
+type Props = {};
+type FAQ = {
+  question: string;
+  answer: string;
+};
+
+const FAQ = (props: Props) => {
+  const FAQCard = ({
+    faq,
+    number,
+    handleClick,
+  }: {
+    faq: FAQ;
+    number: number;
+    handleClick: () => void;
+  }) => {
+    const { answer, question } = faq;
+    return (
+      <details open={currentOpen === number} onClick={handleClick}>
+        <summary className="py-2 outline-none text-xl font-bold cursor-pointer focus:underline">
+          {question}
+        </summary>
+        <div className="px-4 pb-4">
+          <p>{answer}</p>
+        </div>
+      </details>
+    );
+  };
+
+  const [currentOpen, setCurrentOpen] = useState<number>();
+
+  return (
+    <main
+      id="faqs"
+      className="w-full sm:h-screen relative text-white p-10 sm:px-20"
+    >
+      <Image
+        src="/assets/background/FAQ.gif"
+        className="-z-10 object-cover"
+        alt="FAQ BG"
+        fill
+      />
+
+      <div className="flex flex-col sm:flex-row justify-between items-center">
+        <div className="sm:w-1/2 flex flex-col sm:h-screen">
+          <h1 className="heading">Frequently</h1>
+          <h3 className="text-2xl sm:text-5xl">Asked Questions</h3>
+        </div>
+
+        <div className="sm:w-1/2 flex flex-col sm:h-screen py-10 sm:py-0">
+          <div className="flex flex-col divide-y sm:px-8 lg:px-12 xl:px-32 divide-gray-700">
+            {faqData.map((faq, idx) => {
+              return (
+                <FAQCard
+                  faq={faq}
+                  key={idx}
+                  number={idx}
+                  handleClick={() => {
+                    setCurrentOpen(idx);
+                  }}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default FAQ;