You can now see only one FAQ at a time

alisamadiii · Apr 24, 2023 · 54bd861 · 54bd861 · vercel · Apr 24, 2023
1 parent cbaf28f
commit 54bd861
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 40 deletions.
diff --git a/src/assets/Banner-bg.tsx b/src/assets/Banner-bg.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+type Props = {};
+
+export default function BannerBG({}: Props) {
+  return (
+    <div className="absolute top-0 left-0 hidden w-full lg:block">
+      <svg
+        width="1636px"
+        height="1000px"
+        className="mx-auto"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_359_32)">
+          <path
+            opacity="0.11"
+            d="M0 607.406C0 607.406 100.43 847.35 401.206 798.883C701.982 750.416 843.274 808.46 938.836 913.824C1034.4 1019.19 1290.93 1008.15 1519.82 966.198C1748.72 924.243 1882.99 1007.99 1920.18 1075.64C1920.2 1075.65 1919.81 0.0269775 1919.81 0.0269775L0.0440063 0L0 607.406Z"
+            fill="url(#paint0_linear_359_32)"
+          />
+          <path
+            d="M0.0581055 607.558C0.0581055 607.558 95.3271 811.751 401.268 768.705C707.209 725.659 820.924 736.605 945.456 865.597C1069.99 994.589 1289.43 973.137 1518.37 932.663C1747.3 892.189 1878.56 1000.82 1920.16 1075.63C1920.2 1073.23 1920.08 0.00997925 1920.08 0.00997925L0.0811157 0.0209961L0.0581055 607.558Z"
+            fill="url(#paint1_linear_359_32)"
+          />
+          <mask
+            id="mask0_359_32"
+            // style="mask-type:luminance"
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="1921"
+            height="1076"
+          >
+            <path
+              d="M0.0581055 607.558C0.0581055 607.558 95.3271 811.751 401.268 768.705C707.209 725.659 820.924 736.605 945.456 865.597C1069.99 994.589 1289.43 973.137 1518.37 932.663C1747.3 892.189 1878.56 1000.82 1920.16 1075.63C1920.2 1073.23 1920.08 0.00997925 1920.08 0.00997925L0.0811157 0.0209961L0.0581055 607.558Z"
+              fill="white"
+            />
+          </mask>
+          <g mask="url(#mask0_359_32)">
+            <path
+              opacity="0.14"
+              d="M25.7212 687.743C25.7212 687.743 199.963 295.697 843.154 432.711C1486.35 569.725 1712.57 510.178 1899.32 -31.271"
+              stroke="#361CC1"
+              stroke-width="128"
+            />
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_359_32"
+            x1="960.092"
+            y1="0"
+            x2="960.092"
+            y2="1075.64"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#FFC700" />
+            <stop offset="1" stop-color="#FFDE6B" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_359_32"
+            x1="960.111"
+            y1="0.00997925"
+            x2="960.111"
+            y2="1075.63"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#FFC700" />
+            <stop offset="1" stop-color="#FFDE6B" />
+          </linearGradient>
+          <clipPath id="clip0_359_32">
+            <rect width="1920.18" height="1075.64" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/assets/banner-bg.svg b/src/assets/banner-bg.svg
diff --git a/src/components/FAQ.tsx b/src/components/FAQ.tsx
@@ -3,11 +3,13 @@ import { AnimatePresence, motion } from "framer-motion";
 
 type Props = {
   faq: { num: number; question: string; answer: string };
+  faqNum: number;
+  setFaqNum: (a: number) => void;
 };
 
 import { AiOutlinePlus, AiOutlineMinus } from "react-icons/ai";
 
-export default function FAQ({ faq }: Props) {
+export default function FAQ({ faq, faqNum, setFaqNum }: Props) {
   const { num, question, answer } = faq;
   const [toggle, setToggle] = useState(false);
 
@@ -16,27 +18,30 @@ export default function FAQ({ faq }: Props) {
       className={`w-full max-w-[800px] mx-auto rounded-md mb-4 bg-slate-500/10 overflow-hidden text-xl`}
     >
       <div
-        onClick={() => setToggle(!toggle)}
+        onClick={() => setFaqNum(num)}
         className={`flex justify-between items-center p-4 font-semibold duration-150 cursor-pointer ${
-          toggle && "text-slate-900 bg-slate-500/20"
+          faqNum == num && "text-slate-900 bg-slate-500/20"
         }`}
       >
         <h3>{question}</h3>
-        {toggle ? <AiOutlineMinus /> : <AiOutlinePlus />}
+        {faqNum == num ? <AiOutlineMinus /> : <AiOutlinePlus />}
       </div>
       <AnimatePresence mode="wait">
-        {toggle && (
-          <div className={`duration-500 overflow-hidden text-lg p-4 `}>
-            <motion.p
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.9 }}
-              transition={{ duration: 0.3 }}
-              className="p-2 border-l-2 border-slate-300"
-            >
-              {answer}
-            </motion.p>
-          </div>
+        {faqNum == num && (
+          <motion.p
+            initial={{ opacity: 0, height: 0, marginTop: 0, marginBottom: 0 }}
+            animate={{
+              opacity: 1,
+              height: "auto",
+              marginTop: "20px",
+              marginBottom: "20px",
+            }}
+            exit={{ opacity: 0, height: 0, marginTop: 0, marginBottom: 0 }}
+            transition={{ duration: 0.3 }}
+            className="px-4 overflow-hidden"
+          >
+            {answer}
+          </motion.p>
         )}
       </AnimatePresence>
     </div>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { motion, AnimatePresence, Variants } from "framer-motion";
 
@@ -12,13 +12,32 @@ import Logo from "@/assets/Icons/Logo";
 import { AiFillGithub } from "react-icons/ai";
 
 export default function Navbar({}: Props) {
+  const [navbarDesign, setNavbarDesign] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("scroll", (e) => {
+      if (window.scrollY > 50) {
+        setNavbarDesign(true);
+      } else {
+        setNavbarDesign(false);
+      }
+    });
+  });
+
   return (
-    <nav className="fixed top-0 left-0 z-50 w-full px-4 font-medium bg-white bg-opacity-60 backdrop-blur-md">
-      <Container className="items-center justify-between hidden h-20 md:flex">
-        <Link
-          href={"/"}
-          className="flex items-center gap-1 text-xl font-bold text-slate-700 dark:text-white"
-        >
+    <nav
+      className={`fixed top-0 left-0 z-50 w-full px-4 font-medium duration-200 ${
+        navbarDesign
+          ? "bg-white bg-opacity-60 backdrop-blur-md"
+          : "text-slate-500"
+      }`}
+    >
+      <Container
+        className={`items-center justify-between hidden md:flex duration-200 ${
+          navbarDesign ? "h-16" : "h-20"
+        }`}
+      >
+        <Link href={"/"} className="flex items-center gap-1 text-xl font-bold">
           <Logo size="30" /> niLearn.dev
         </Link>
         <ul className="items-center hidden gap-8 md:flex">
@@ -29,22 +48,13 @@ export default function Navbar({}: Props) {
           >
             <AiFillGithub />
           </a>
-          <a
-            href="#preview"
-            className={`hover:text-slate-700 dark:hover:text-dark-primary`}
-          >
+          <a href="#preview" className={`hover:text-slate-700`}>
             Preview
           </a>
-          <a
-            href="#pricing"
-            className={`hover:text-slate-700 dark:hover:text-dark-primary`}
-          >
+          <a href="#pricing" className={`hover:text-slate-700`}>
             Pricing
           </a>
-          <a
-            href="#faq"
-            className={`hover:text-slate-700 dark:hover:text-dark-primary`}
-          >
+          <a href="#faq" className={`hover:text-slate-700`}>
             FAQ
           </a>
         </ul>
@@ -71,7 +81,7 @@ const NavbarSmall = () => {
   const [isNavOpen, setIsNavOpen] = useState<boolean>(false);
 
   return (
-    <Container className="grid items-center justify-between h-20 grid-cols-3 md:hidden">
+    <Container className="grid items-center justify-between h-20 grid-cols-3 md:hidden text-slate-500">
       <div
         className="p-2 rounded-lg justify-self-start bg-slate-100 text-slate-400 hover:text-slate-500 dark:bg-dark-primary dark:text-black"
         onClick={() => setIsNavOpen(true)}

diff --git a/src/components/Pricing.tsx b/src/components/Pricing.tsx
@@ -22,7 +22,7 @@ export default function Pricing({}: Props) {
         <motion.div
           initial={{ y: 100, opacity: 0 }}
           whileInView={{ y: 0, opacity: 1 }}
-          viewport={{ once: true, margin: "-200px" }}
+          viewport={{ once: true, margin: "-100px" }}
           transition={{ duration: 1, delay: 0.05 * index }}
           key={pricing.level}
           className="flex flex-col grow basis-[300px] bg-slate-100 p-4 rounded-xl shadow-anilearn overflow-hidden"

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Image from "next/image";
 import { TwitterVideoEmbed } from "react-twitter-embed";
 import Masonry from "react-masonry-css";
@@ -23,6 +23,7 @@ import { FAQ_DATA } from "@/contents/FAQ";
 import Pricing from "@/components/Pricing";
 import { TESTIMONIAL } from "@/contents/Testimonial";
 import Testimonial from "@/components/Testimonial";
+import BannerBG from "@/assets/Banner-bg";
 
 const breakpointColumnsObj = {
   default: 3,
@@ -32,9 +33,12 @@ const breakpointColumnsObj = {
 };
 
 export default function Index({}: Props) {
+  const [faqNum, setFaqNum] = useState<number>(1);
+
   return (
     <>
-      <Container className="flex flex-col items-center px-4 pt-36">
+      {/* <BannerBG /> */}
+      <Container className="relative flex flex-col items-center px-4 pt-36">
         <header className="relative text-center" id="hero-section">
           <motion.p
             initial={{ opacity: 0, y: 50 }}
@@ -166,7 +170,12 @@ export default function Index({}: Props) {
         </h2>
         <Container className="px-4 pb-24">
           {FAQ_DATA.map((faq) => (
-            <FAQ key={faq.num} faq={faq} />
+            <FAQ
+              key={faq.num}
+              faq={faq}
+              faqNum={faqNum}
+              setFaqNum={setFaqNum}
+            />
           ))}
         </Container>
       </section>