Add content reveal animations

codiumkg · Jan 30, 2024 · c981181 · c981181
1 parent 8ba0d63
commit c981181
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 104 deletions.
diff --git a/components/ContactSection.tsx b/components/ContactSection.tsx
@@ -9,6 +9,7 @@ import Scene from "./Three/Scene";
 import { Canvas } from "@react-three/fiber";
 import { FogExp2, Vector3 } from "three";
 import { isMobile } from "react-device-detect";
+import Reveal from "./Reveal";
 
 export default function ContactSection() {
   return (
@@ -18,33 +19,46 @@ export default function ContactSection() {
     >
       <div className="flex flex-col items-center md:flex-row w-9/12">
         <div className="flex flex-col w-full lg:w-4/12">
-          <div className="my-8 text-4xl">Контакты</div>
+          <Reveal>
+            <div className="my-8 text-4xl">Контакты</div>
+          </Reveal>
+
           <div className="flex flex-col gap-4 w-full">
-            <Link href={SOCIAL_LINKS.instagram} target="_blank">
-              <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
-                <AiFillInstagram className="text-4xl" />
-                <div className="ml-3">codium.kg</div>
-              </div>
-            </Link>
+            <Reveal>
+              <Link href={SOCIAL_LINKS.instagram} target="_blank">
+                <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
+                  <AiFillInstagram className="text-4xl" />
+                  <div className="ml-3">codium.kg</div>
+                </div>
+              </Link>
+            </Reveal>
+
+            <Reveal>
+              <Link href={SOCIAL_LINKS.whatsapp} target="_blank">
+                <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
+                  <BsWhatsapp className="text-4xl" />
+                  <div className="ml-3">+996 504 044 402</div>
+                </div>
+              </Link>
+            </Reveal>
+
+            <Reveal>
+              <Link href="mailto:codiumtokmok@gmail.com" target="_blank">
+                <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
+                  <BiLogoGmail className="text-4xl" />
+                  <div className="ml-3">codiumtokmok@gmail.com</div>
+                </div>
+              </Link>
+            </Reveal>
 
-            <Link href={SOCIAL_LINKS.whatsapp} target="_blank">
-              <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
-                <BsWhatsapp className="text-4xl" />
-                <div className="ml-3">+996 504 044 402</div>
-              </div>
-            </Link>
-            <Link href="mailto:codiumtokmok@gmail.com" target="_blank">
-              <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
-                <BiLogoGmail className="text-4xl" />
-                <div className="ml-3">codiumtokmok@gmail.com</div>
-              </div>
-            </Link>
-            <Link href={SOCIAL_LINKS.tiktok} target="_blank">
-              <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
-                <BsTiktok className="text-3xl" />
-                <div className="ml-3">codium_kg</div>
-              </div>
-            </Link>
+            <Reveal>
+              <Link href={SOCIAL_LINKS.tiktok} target="_blank">
+                <div className="flex items-center p-4 rounded-xl bg-secondary transition border border-primary hover:border-accent-secondary hover:text-accent-secondary">
+                  <BsTiktok className="text-3xl" />
+                  <div className="ml-3">codium_kg</div>
+                </div>
+              </Link>
+            </Reveal>
           </div>
         </div>
 

diff --git a/components/CourseSection.tsx b/components/CourseSection.tsx
@@ -3,6 +3,7 @@ import { HiOutlineRocketLaunch } from "react-icons/hi2";
 import { MdComputer } from "react-icons/md";
 import { FaCode } from "react-icons/fa6";
 import SectionHeader from "./SectionHeader";
+import Reveal from "./Reveal";
 
 export default function CourseSection() {
   return (
@@ -15,32 +16,34 @@ export default function CourseSection() {
       <div className="flex flex-col md:w-4/5">
         {COURSES.map((course) => (
           <div key={course.title} className="flex flex-col p-5 mb-8">
-            <h1 className="w-full flex items-center bg-secondary px-6 py-3 border border-highlight rounded-xl text-xl font-bold mb-8 md:mb-4">
-              <div className="rounded-full bg-secondary border border-highlight shadow-md mr-4 p-3">
-                <HiOutlineRocketLaunch className="text-2xl" />
-              </div>
-              <span className="text-lg md:text-xl">{course.title}</span>
-            </h1>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {course.modules.map((module) => (
-                <div
-                  key={module.title}
-                  className="p-5 bg-secondary rounded-xl border border-highlight hover:border-highlight-secondary transition-colors"
-                >
-                  <div className="flex items-center">
-                    <div className="rounded-full bg-secondary w-12 h-12 shrink-0 mr-3 border border-highlight flex items-center justify-center shadow-md">
-                      <MdComputer className="text-2xl" />
-                    </div>
+            <Reveal>
+              <h1 className="w-full flex items-center bg-secondary px-6 py-3 border border-highlight rounded-xl text-xl font-bold mb-8 md:mb-4">
+                <div className="rounded-full bg-secondary border border-highlight shadow-md mr-4 p-3">
+                  <HiOutlineRocketLaunch className="text-2xl" />
+                </div>
+                <span className="text-lg md:text-xl">{course.title}</span>
+              </h1>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {course.modules.map((module) => (
+                  <div
+                    key={module.title}
+                    className="p-5 bg-secondary rounded-xl border border-highlight hover:border-highlight-secondary transition-colors"
+                  >
+                    <div className="flex items-center">
+                      <div className="rounded-full bg-secondary w-12 h-12 shrink-0 mr-3 border border-highlight flex items-center justify-center shadow-md">
+                        <MdComputer className="text-2xl" />
+                      </div>
 
-                    <h2 className="text-lg font-bold">{module.title}</h2>
-                  </div>
+                      <h2 className="text-lg font-bold">{module.title}</h2>
+                    </div>
 
-                  <div className="mt-4 text-md font-light text-secondary-text">
-                    {module.description}
+                    <div className="mt-4 text-md font-light text-secondary-text">
+                      {module.description}
+                    </div>
                   </div>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            </Reveal>
           </div>
         ))}
       </div>

diff --git a/components/FAQSection.tsx b/components/FAQSection.tsx
@@ -6,47 +6,52 @@ import SectionHeader from "./SectionHeader";
 import { MdQuestionMark } from "react-icons/md";
 import { FaChevronDown } from "react-icons/fa";
 import { FAQ } from "@/constants/constants";
+import Reveal from "./Reveal";
 
 export default function FAQSection() {
   return (
     <section
       className="py-32 w-screen min-h-screen flex flex-col justify-center items-center"
       id="faq"
     >
-      <SectionHeader
-        text="Часто задаваемые вопросы"
-        icon={<MdQuestionMark className="text-2xl" />}
-      />
+      <Reveal>
+        <SectionHeader
+          text="Часто задаваемые вопросы"
+          icon={<MdQuestionMark className="text-2xl" />}
+        />
+      </Reveal>
 
-      <div className="flex justify-center w-full p-5 md:p-0">
-        <Accordion.Root
-          className="mt-10 w-full md:w-3/6"
-          defaultValue="0"
-          type="single"
-          collapsible
-        >
-          {FAQ.map((question, index) => (
-            <Accordion.Item
-              key={index}
-              value={index.toString()}
-              className="group/item overflow-hidden border-b border-highlight last:border-b-0 last:rounded-bl-xl last:rounded-br-xl first:rounded-tl-xl first:rounded-tr-xl bg-secondary"
-            >
-              <Accordion.Header className="p-6">
-                <Accordion.Trigger className="w-full flex justify-between shadow-sm">
-                  <div className="text-md text-left font-bold">
-                    {question.question}
-                  </div>
+      <Reveal>
+        <div className="flex justify-center w-full p-5 md:p-0">
+          <Accordion.Root
+            className="mt-10 w-full md:w-3/6"
+            defaultValue="0"
+            type="single"
+            collapsible
+          >
+            {FAQ.map((question, index) => (
+              <Accordion.Item
+                key={index}
+                value={index.toString()}
+                className="group/item overflow-hidden border-b border-highlight last:border-b-0 last:rounded-bl-xl last:rounded-br-xl first:rounded-tl-xl first:rounded-tr-xl bg-secondary"
+              >
+                <Accordion.Header className="p-6">
+                  <Accordion.Trigger className="w-full flex justify-between shadow-sm">
+                    <div className="text-md text-left font-bold">
+                      {question.question}
+                    </div>
 
-                  <FaChevronDown className="text-md ml-2 mt-1 shrink-0 group-data-[state=open]/item:rotate-180 transition-transform" />
-                </Accordion.Trigger>
-              </Accordion.Header>
-              <Accordion.AccordionContent className="overflow-hidden text-md text-secondary-text font-light p-6 bg-secondary-dark border-t border-highlight group-data-[state=open]/item:animate-appear group-data-[state=close]/item:animate-disappear">
-                {question.answer}
-              </Accordion.AccordionContent>
-            </Accordion.Item>
-          ))}
-        </Accordion.Root>
-      </div>
+                    <FaChevronDown className="text-md ml-2 mt-1 shrink-0 group-data-[state=open]/item:rotate-180 transition-transform" />
+                  </Accordion.Trigger>
+                </Accordion.Header>
+                <Accordion.AccordionContent className="overflow-hidden text-md text-secondary-text font-light p-6 bg-secondary-dark border-t border-highlight group-data-[state=open]/item:animate-appear group-data-[state=close]/item:animate-disappear">
+                  {question.answer}
+                </Accordion.AccordionContent>
+              </Accordion.Item>
+            ))}
+          </Accordion.Root>
+        </div>
+      </Reveal>
     </section>
   );
 }
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Logo from "@/assets/codium_logo_solo.png";
 import RegRequestModal from "./RegRequestModal";
+import Reveal from "./Reveal";
 
 export default function HeroSection() {
   return (
@@ -9,32 +10,39 @@ export default function HeroSection() {
       id="hero"
     >
       <div className="flex flex-col lg:flex-row lg:gap-16 items-center justify-center">
-        <div className="flex-1">
-          <Image
-            src={Logo}
-            alt="Logo"
-            className="my-20 w-60 h-60 md:w-96 md:h-96 lg:my-0 lg:mx-20 shrink-0"
-          />
-        </div>
-
-        <div className="flex flex-col flex-1 w-full text-white text-center lg:text-left text-3xl md:text-5xl items-center px-30 lg:px-0 lg:items-start font-light">
-          <div>
-            <span className="text-xl md:text-3xl font-light">
-              Добро пожаловать в мир{" "}
-            </span>{" "}
-            <br />
-            <span className="text-3xl md:text-5xl text-accent-secondary font-bold">
-              IT
-            </span>
-            <span className="text-2xl md:text-3xl"> где навыки становятся</span>{" "}
-            <br />
-            <span className="text-3xl text-accent font-bold md:text-5xl">
-              возможностями!
-            </span>
+        <Reveal>
+          <div className="flex-1">
+            <Image
+              src={Logo}
+              alt="Logo"
+              className="my-20 w-60 h-60 md:w-96 md:h-96 lg:my-0 lg:mx-20 shrink-0"
+            />
           </div>
+        </Reveal>
+
+        <Reveal>
+          <div className="flex flex-col flex-1 w-full text-white text-center lg:text-left text-3xl md:text-5xl items-center px-30 lg:px-0 lg:items-start font-light">
+            <div>
+              <span className="text-xl md:text-3xl font-light">
+                Добро пожаловать в мир{" "}
+              </span>{" "}
+              <br />
+              <span className="text-3xl md:text-5xl text-accent-secondary font-bold">
+                IT
+              </span>
+              <span className="text-2xl md:text-3xl">
+                {" "}
+                где навыки становятся
+              </span>{" "}
+              <br />
+              <span className="text-3xl text-accent font-bold md:text-5xl">
+                возможностями!
+              </span>
+            </div>
 
-          <RegRequestModal />
-        </div>
+            <RegRequestModal />
+          </div>
+        </Reveal>
       </div>
     </section>
   );

diff --git a/components/Reveal.tsx b/components/Reveal.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { motion, useAnimation, useInView } from "framer-motion";
+import { ReactNode, useEffect, useRef } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+function Reveal({ children }: Props) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-120px" });
+
+  const controls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      controls.start("visible");
+    }
+  }, [isInView, controls]);
+
+  return (
+    <div ref={ref} className="relative">
+      <motion.div
+        className="relative"
+        variants={{
+          hidden: { opacity: 0, top: 100 },
+          visible: { opacity: 1, top: 0 },
+        }}
+        initial="hidden"
+        animate={controls}
+        transition={{ duration: 0.8, delay: 0.05 }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}
+
+export default Reveal;
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@types/p5": "^1.7.4",
     "@types/three": "^0.159.0",
     "autoprefixer": "^10.4.16",
+    "framer-motion": "^11.0.3",
     "next": "14.0.1",
     "p5": "^1.9.0",
     "postcss": "^8.4.31",

diff --git a/yarn.lock b/yarn.lock
@@ -26,6 +26,18 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -2048,6 +2060,15 @@ fraction.js@^4.3.6:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.0.3.tgz#b2a87e7ae166a9e27da33da9cfb50a0db5f94fa7"
+  integrity sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"