added animation in all pages using aos

koders-in · Oct 29, 2022 · 572fec4 · 572fec4
1 parent 0318c97
commit 572fec4
Show file tree

Hide file tree

Showing 21 changed files with 354 additions and 46 deletions.
diff --git a/components/Faq.tsx b/components/Faq.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const Faq = ({ answer, question, onClick, show }: Props) => {
   return (
-    <div>
+    <div data-aos="fade-up">
       <div className="border-b-[1px] pt-2 pb-1 sm:pb-4 mt-3 w-[97%] mx-auto border-b-main-light_white flex justify-between items-center">
         <p className="w-[90%] text-main-white-700 font-miligramLight sm:font-miligramMedium text-[0.8rem] sm:text-[1.4rem]">
           {question}

diff --git a/components/GradientText.tsx b/components/GradientText.tsx
@@ -3,10 +3,14 @@ import React from "react";
 interface Props {
   className?: string;
   text: string;
+  aos?: string;
 }
-const GradientText = ({ className, text }: Props) => {
+const GradientText = ({ className, text, aos }: Props) => {
   return (
-    <h1 className={`${className} font-medium bg-clip-text text-transparent`}>
+    <h1
+      data-aos={aos}
+      className={`${className} font-medium bg-clip-text text-transparent`}
+    >
       {text}
     </h1>
   );

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -62,7 +62,7 @@ const Navbar = () => {
         />
         <Button
           OnClick={() => {
-            handleNavigate("StartProject");
+            handleNavigate("/StartProject");
           }}
           text="Get Started"
           className="font-miligramMedium text-[0.8rem] xxl:text-[1rem] bg-main-greenOpt-200 border-[1px] border-main-lightTeal text-main-lightTeal px-4 py-[0.4rem] sm:py-[0.55rem] sm:px-8 rounded-lg hover:bg-main-lightTeal hover:text-white"

diff --git a/components/pages-components/blog-page-components/Card.tsx b/components/pages-components/blog-page-components/Card.tsx
@@ -14,6 +14,7 @@ const Card = ({ className }: { className?: string }) => {
   const currentPath = router?.pathname; // to get current route
   return (
     <div
+      data-aos="fade-up"
       className={`relative ${className} flex flex-wrap msm:flex-nowrap gap-3 sm:block md:w-1/3`}
     >
       <div

diff --git a/components/pages-components/blog-page-components/MainCard.tsx b/components/pages-components/blog-page-components/MainCard.tsx
@@ -14,10 +14,13 @@ const MainCard = () => {
 
   return (
     <div className="lg:flex mt-16 gap-9">
-      <div className="w-full lg:w-[68%] py-2">
+      <div data-aos="fade-right" className="w-full lg:w-[68%] py-2">
         <Image src={blogMain} alt="blogMain" className="w-full h-full" />
       </div>
-      <div className="w-full lg:w-[32%] mt-2 sm:mt-0 relative pb-14 lg:pb-0">
+      <div
+        data-aos="fade-left"
+        className="w-full lg:w-[32%] mt-2 sm:mt-0 relative pb-14 lg:pb-0"
+      >
         <h1 className="text-white text-[1.4rem] leading-[1.4rem] mt-2  cursor-pointer font-miligrambold">
           Hacking Humans is easier than hacking Computers
         </h1>

diff --git a/components/section-comonents/pricing/PricingCard.tsx b/components/section-comonents/pricing/PricingCard.tsx
@@ -13,9 +13,11 @@ const PricingCard = ({
   isMobile,
   translateX,
   className,
+  aos,
 }: CardObject) => {
   return (
     <div
+      data-aos={aos}
       style={
         isMobile
           ? {

diff --git a/helper/constant.ts b/helper/constant.ts
@@ -106,6 +106,7 @@ export interface CardObject {
   description: string;
   price: string;
   services: Array<string>;
+  aos?: string;
 }
 export const pricingCardData: Array<CardObject> = [
   {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "aos": "^2.3.4",
     "next": "13.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/pages/Blogs/ReadMoreBlog.tsx b/pages/Blogs/ReadMoreBlog.tsx
@@ -1,6 +1,10 @@
 import Head from "next/head";
 import Image from "next/image";
 import React, { useState } from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
+
 import { backAero, blogMain, blogProfile, wideBlog } from "../../assets";
 import { Button, Divider, Footer, Navbar, Tag } from "../../components";
 
@@ -11,6 +15,14 @@ const ReadMoreBlog = () => {
       top: 0,
     });
   }, []);
+
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="bg-main-primary overflow-hidden relative">
       <Head>
@@ -20,27 +32,39 @@ const ReadMoreBlog = () => {
       <div className="py-16 mt-10 w-[91%] mx-auto">
         <Divider className="mt-16" />
         <Divider className="mt-6" />
-        <div className="flex justify-between items-center">
+        <div data-aos="fade-up" className="flex justify-between items-center">
           <span className="text-[1rem] text-main-light_white font-miligramTextMedium">
             SEP 22, 2022
           </span>
         </div>
-        <h1 className="text-white mt-4 text-[1.9rem] font-miligrambold">
+        <h1
+          data-aos="fade-up"
+          className="text-white mt-4 text-[1.9rem] font-miligrambold"
+        >
           Hacking Humans is easier than hacking Computers
         </h1>
-        <div className="flex items-center justify-start gap-3 mt-5">
+        <div
+          data-aos="fade-up"
+          className="flex items-center justify-start gap-3 mt-5"
+        >
           <Tag className="" text="Ethical Hacking" />
           <Tag className="" text="Cyber Security" />
         </div>
         <Divider className="mt-6" />
-        <div className="flex items-center">
+        <div data-aos="fade-up" className="flex items-center">
           <Image src={blogProfile} alt="profile" className="mr-3 h-9" />
           <span className="text-white font-miligramMedium">John Doe</span>
         </div>
         <Divider className="mt-11" />
-        <Image src={wideBlog} alt="blog img" className="w-full md:h-96" />
+        <Image
+          data-aos="fade-up"
+          src={wideBlog}
+          alt="blog img"
+          className="w-full md:h-96"
+        />
         <Divider className="mt-6" />
         <p
+          data-aos="fade-up"
           className="text-main-light_white mt-11 font-miligramTextBook"
           style={
             showMore

diff --git a/pages/Blogs/index.tsx b/pages/Blogs/index.tsx
@@ -1,5 +1,9 @@
 import Head from "next/head";
 import React from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
+
 import {
   Card,
   Divider,
@@ -15,15 +19,23 @@ const Blog = () => {
       top: 0,
     });
   }, []);
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
-    <div className="bg-main-primary px-[6%] overflow-hidden">
+    <div className="bg-main-primary overflow-hidden">
       <Head>
         <title>Blogs</title>
       </Head>
+      <Navbar />
       <div className="pb-10 pt-28 w-[91%] mx-auto relative">
-        <Navbar />
         <Divider className="mt-10" />
         <GradientText
+          aos="fade-up"
           className="w-fit mx-auto text-[2.2rem] leading-none mb-3 md:mb-0 md:leading-normal  sm:text-[2.8rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
           text="Blogs"
         />
@@ -35,10 +47,14 @@ const Blog = () => {
         </div>
         <Divider className="h-20" />
         <GradientText
+          aos="slide-left"
           className="w-fit mx-auto text-[2.2rem] leading-none mb-3 md:mb-0 md:leading-normal  sm:text-[2.8rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold xxl:pt-10"
           text="Wish your blog was here too?"
         />
-        <p className="text-[0.8rem] sm:text-[1.3rem] text-main-light_white text-center font-miligramLight xxl:pb-10">
+        <p
+          data-aos="slide-right"
+          className="text-[0.8rem] sm:text-[1.3rem] text-main-light_white text-center font-miligramLight xxl:pb-10"
+        >
           Submit your blog. Write to us at&nbsp;
           <span
             onClick={() => {

diff --git a/pages/Cancellation.tsx b/pages/Cancellation.tsx
@@ -1,5 +1,9 @@
 import Head from "next/head";
 import React from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
+
 import { Divider, Footer, GradientText, Navbar } from "../components";
 
 const Cancellation = () => {
@@ -8,6 +12,13 @@ const Cancellation = () => {
       top: 0,
     });
   }, []);
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="bg-main-primary overflow-hidden relative">
       <Head>
@@ -16,11 +27,15 @@ const Cancellation = () => {
       <Navbar />
       <div className="py-28 w-[95%] sm:w-[90%] mx-auto">
         <GradientText
+          aos="fade-up"
           className="text-[1.8rem] sm:text-[2.5rem] md:text-[2.8rem] mx-auto w-fit bg-gradient-to-r from-white to-main-teal font-miligrambold mt-16"
           text="Cancellation and Refund Policy"
         />
         <Divider className="mt-8" />
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify"
+        >
           All the services provided by Koders including Web Design, Web
           Development, Mobile Application Development, Software Development,
           Website Maintenance are accepted and carried out after a thorough
@@ -47,7 +62,10 @@ const Cancellation = () => {
           then we will act only refund or cancel services according to the
           following guidelines:
         </p>
-        <ul className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify list-disc pl-10 mt-3">
+        <ul
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify list-disc pl-10 mt-3"
+        >
           <li>
             Koders will refund you, in full, if a project has not started within
             30 days of making payment.
@@ -82,7 +100,10 @@ const Cancellation = () => {
             causes any loss to Koders.
           </li>
         </ul>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify mt-10">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify mt-10"
+        >
           We are eager to collaborate with you, and once we receive confirmation
           from you, we immediately take action and send your work in progress.
           As a result, if you alter your steps after confirmation, the amount