Added animation through out the website

Bitbox-Connect · Oct 26, 2024 · 416b435 · 416b435
1 parent ca85ca7
commit 416b435
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 34 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -25,6 +25,7 @@
     "@splinetool/runtime": "^1.0.67",
     "@splinetool/viewer": "^1.0.67",
     "antd": "^5.21.3",
+    "aos": "^3.0.0-beta.6",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -38,6 +38,8 @@ import NotFound from "./component/NotFound";
 // import MiniChatbot from "./component/MiniChatbot";
 import ProgressBar from "./component/ProgressBar/ProgressBar";
 import ProtectedRoute from '../../client/src/component/ProtectedRoute'
+import AOS from 'aos';
+import 'aos/dist/aos.css';
 
 // Main Layout Component
 
@@ -125,6 +127,10 @@ function App() {
     }
   };
 
+  useEffect(() => {
+    AOS.init();
+  }, [])
+
   return (
     <div className="h-full w-screen">
       <ProjectState>

diff --git a/client/src/component/About.jsx b/client/src/component/About.jsx
@@ -31,15 +31,15 @@ export default function About(props) {
 
   return (
     <div>
-     <div
-      className="about-content container h-[100vh] px-[2rem] mt-[10vh]"
-      style={{
-        background: props.mode === "dark" ? "#121212" : "#ffffff",
-        color: props.mode === "dark" ? "white" : "black",
-      }}
-    >
+      <div
+        className="about-content container h-[100vh] px-[2rem] mt-[10vh]"
+        style={{
+          background: props.mode === "dark" ? "#121212" : "#ffffff",
+          color: props.mode === "dark" ? "white" : "black",
+        }}
+      >
         <section className="about-main-section">
-          <div className="about-content-left">
+          <div className="about-content-left" data-aos="fade-right" data-aos-duration="1300">
             <h2 className="Heading-Page !bg-gradient-to-r from-cyan-500 to-blue-500 !bg-clip-text !text-transparent  ">About Us</h2>
             <div className="about-section-desc w-[70%] text-sm leading-relaxed mx-auto fs-4">
               Bitbox is like a friendly community where people working on
@@ -83,7 +83,7 @@ export default function About(props) {
                 <div className="tracker tr-23"></div>
                 <div className="tracker tr-24"></div>
                 <div className="tracker tr-25"></div>
-                <div id="card">
+                <div id="card" data-aos="fade-left" data-aos-duration="1300">
                   <img src={AboutImgHero} id="propmpt" alt="aboutVectorImg" />
                 </div>
               </div>
@@ -97,12 +97,12 @@ export default function About(props) {
       <div className="Team-Sec">
         <div className="px-[2.5rem] m-0 text-center">
           <div className="team-content">
-            <h2 className="Heading-Page">
+            <h2 className="Heading-Page" data-aos="zoom-in" data-aos-duration="1400">
               Our <span className="!bg-gradient-to-r from-cyan-500 to-blue-500 !bg-clip-text !text-transparent ">Team</span>
             </h2>
             <div className="team-grid container ">
               {/* card 1 */}
-              <div className="team-card">
+              <div className="team-card" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="100">
                 <div className="team-text" style={{ color: props.mode === 'dark' ? 'white' : 'black' }}>
                   <b>Anuj Verma</b> is a tech-savvy person who loves working with AI and building websites. He&apos;s gained experience through internships and projects, showing that he&apos;s ready to do great things in the tech world.
                 </div>
@@ -127,7 +127,7 @@ export default function About(props) {
                 </div>
               </div>
               {/* card 2 */}
-              <div className="team-card">
+              <div className="team-card" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="300">
                 <div className="team-text" style={{ color: props.mode === 'dark' ? 'white' : 'black' }}>
                   <b>Jitendra Kumar</b>: Tech enthusiast skilled in web development and database management, showcasing expertise in projects like weather app and algorithm analyzer, poised for impactful contributions in the tech industry.
                 </div>
@@ -152,7 +152,7 @@ export default function About(props) {
                 </div>
               </div>
               {/* card 3  */}
-              <div className="team-card">
+              <div className="team-card" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="500">
                 <div className="team-text" style={{ color: props.mode === 'dark' ? 'white' : 'black' }}>
                   <b>Harshit Singh</b>: Entry-level software engineer skilled in C, C++, Python, HTML, CSS, and JavaScript. Eager to leverage abilities in problem-solving and project development for organizational growth.
                 </div>
@@ -186,12 +186,12 @@ export default function About(props) {
       <div className="Team-Sec">
         <div className="visitors-container">
           <div className="visitors-content">
-            <h2 className="Heading-Page">
+            <h2 className="Heading-Page" data-aos='zoom-in'>
               Visitors
             </h2>
             <div className="container">
               <div className="row">
-                <div className="col-md-3 col-sm-6">
+                <div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="100">
                   <div className="counter">
                     <div className="counter-icon">
                       <FontAwesomeIcon icon={faUser} />
@@ -200,7 +200,7 @@ export default function About(props) {
                     <h3>VisitorCount</h3>
                   </div>
                 </div>
-                <div className="col-md-3 col-sm-6">
+                <div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="300">
                   <div className="counter blue">
                     <div className="counter-icon" style={{ color: props.mode === 'dark' ? 'white' : '#4accdb' }}>
                       {/* <i className="fa fa-youtube"></i> */}
@@ -210,7 +210,7 @@ export default function About(props) {
                     <h3 style={{ color: props.mode === 'dark' ? 'white' : '#4accdb' }}>Registrations</h3>
                   </div>
                 </div>
-                <div className="col-md-3 col-sm-6">
+                <div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="500">
                   <div className="counter">
                     <div className="counter-icon">
                       <i className="fa-solid fa-user-group"></i>
@@ -219,7 +219,7 @@ export default function About(props) {
                     <h3>Participants</h3>
                   </div>
                 </div>
-                <div className="col-md-3 col-sm-6">
+                <div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="700">
                   <div className="counter blue">
                     <div className="counter-icon" style={{ color: props.mode === 'dark' ? 'white' : '#4accdb' }}>
                       {/* <i className="fa fa-rocket"></i> */}
@@ -237,14 +237,14 @@ export default function About(props) {
       {/* FAQ */}
       <div className="accordion-container">
 
-        <div className="faq-section">
+        <div className="faq-section" data-aos="fade-up" data-aos-duration="1700">
           <div className="container">
             <h2 className="Heading-Page mb-7">Frequently Asked <span className="!bg-gradient-to-r from-cyan-500 to-blue-500 !bg-clip-text !text-transparent ">Questions</span></h2>
             <section>
               <div className="accordion" id="accordionExample">
                 <div className="accordion-item">
                   <h2 className="accordion-header flex justify-center">
-                    <button className="accordion-button collapsed fs-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style={{background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
+                    <button className="accordion-button collapsed fs-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
                       Will a beginner, with absolutely no knowledge of github, gain
                       anything fruitful?
                     </button>

diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx
@@ -88,7 +88,7 @@ const Footer = (props) => {
             {/* Footer container with dynamic background color */}
             <div className="Footer" style={{ backgroundColor: props.mode === 'dark' ? '#0B192C' : 'white' }}>
                 <div className="container">
-                    <div className='mb-4'>
+                    <div className='mb-4' data-aos="fade-up" data-aos-duration='1500'>
                         <h4 className="text-3xl font-semibold text-center text-black mb-4">Subscribe to our Newsletter</h4>
                         <form
                             className="flex flex-col items-center gap-4 md:flex-row md:justify-center"
@@ -117,7 +117,7 @@ const Footer = (props) => {
                     </div>
                     <div className="row">
                         {/* Left section with branding and social icons */}
-                        <div className="col-md-6 col-lg-5 col-12 ft-1">
+                        <div className="col-md-6 col-lg-5 col-12 ft-1" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1800">
                             <h3 style={{ fontFamily: "medium", fontSize: "2.5rem" }}>
                                 BIT<span className='code' style={{ color: "#0D92F4" }}>BOX</span>
                             </h3>
@@ -143,7 +143,7 @@ const Footer = (props) => {
                         </div>
 
                         {/* Middle section with About links */}
-                        <div className="col-md-6 col-lg-3 col-12 ft-2">
+                        <div className="col-md-6 col-lg-3 col-12 ft-2" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1800">
                             <h5>About</h5>
                             <ul>
                                 <li className="nav-item">
@@ -156,7 +156,7 @@ const Footer = (props) => {
                         </div>
 
                         {/* Right section with Legal links */}
-                        <div className="col-md-7 col-lg-4 col-13 ft-3">
+                        <div className="col-md-7 col-lg-4 col-13 ft-3" data-aos="fade-up" data-aos-delay='500' data-aos-duration="1800">
                             <h5>Legals</h5>
                             <ul>
                                 <li className="nav-item">
@@ -176,7 +176,7 @@ const Footer = (props) => {
 
             {/* Last footer section with copyright info */}
             <div className='Last-footer'>
-                <p className='copy-content'>
+                <p className='copy-content' data-aos="fade-up" data-aos-offset="30">
                     © 2024 Bitbox.&nbsp; Made with 🤍 by Bitbox India.&nbsp; All rights reserved.
                 </p>
             </div>

diff --git a/client/src/component/Home.jsx b/client/src/component/Home.jsx
@@ -213,7 +213,7 @@ const Home = (props) => {
             <CardsPage />
 
             {/* Service Section */}
-            <div className="service-section" style={{ marginTop: "5rem", background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
+            <div className="service-section" style={{ marginTop: "5rem", background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }} data-aos="fade-up" data-aos-duration='1600'>
                 <div className='text-center' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>We&apos;re Still</div>
                 <h1 className="service-heading text-center" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Cooking Our Service</h1>
                 <div className="service-description text-center" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>We are going to launch our service Very Soon,</div>
@@ -224,7 +224,7 @@ const Home = (props) => {
             </div>
             {/* Works Section */}
             <div className="work-Sec mb-2" style={{ background: props.mode === 'dark' ? 'black' : '#f7f7f7', color: props.mode === 'dark' ? 'white' : 'black' }}>
-                <h2 className='work-heading' style={{ textAlign: 'center', marginBottom: '1rem', fontWeight: 'bold', textTransform: 'uppercase' }}>
+                <h2 className='work-heading' style={{ textAlign: 'center', marginBottom: '1rem', fontWeight: 'bold', textTransform: 'uppercase' }} data-aos="zoom-out">
                     What We Work On
                 </h2>
 
@@ -236,6 +236,9 @@ const Home = (props) => {
                             <div
                                 key={index}
                                 className="py-16 px-3 rounded-2xl border-blue-main border-2 space-y-3 transition-transform duration-300 ease-in-out transform hover:scale-105 hover:bg-blue-main hover:shadow-lg group"
+                                data-aos='zoom-in'
+                                data-aos-delay={100 * index}
+                                data-aos-duration='1700'
                             >
                                 <h3 className="font-semibold text-[28px] text-center text-blue-main group-hover:text-white">
                                     {word.title}
@@ -278,8 +281,8 @@ const Home = (props) => {
             {/* Technology Section */}
             <div className='Technology-Sec' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
                 <div className="Technology-Container">
-                    <h2 className='Heading-Page mb-4' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Project Technology</h2>
-                    <div className="content">
+                    <h2 className='Heading-Page mb-4' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }} data-aos="zoom-out">Project Technology</h2>
+                    <div className="content" data-aos="zoom-in" data-aos-duration="1700">
                         <div className="benefits">
                             <div className="basic-marquee basic-marquee-1">
                                 <a className="social-media-link" href="#">

diff --git a/client/src/component/HomePage/Card.jsx b/client/src/component/HomePage/Card.jsx
@@ -28,6 +28,7 @@ const CardsPage = (props) => {
         <h2
           className="font-bold text-blue-main text-4xl md:text-5xl lg:text-[3.5rem] pt-16"
           style={{ color: props.mode === "dark" ? "white" : "" }}
+          data-aos='zoom-out'
         >
           Be a part of Bitbox Community
         </h2>
@@ -37,6 +38,9 @@ const CardsPage = (props) => {
               <div
                 key={index}
                 className="py-16 px-5 rounded-2xl border-blue-main border-2 space-y-3 transition-transform duration-300 ease-in-out transform hover:scale-105 hover:bg-blue-main hover:shadow-lg group"
+                data-aos='zoom-in'
+                data-aos-delay={100 * index}
+                data-aos-duration='1700'
               >
                 <h3 className="font-semibold text-[28px] text-center text-blue-main group-hover:text-white">
                   {card.title}

diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx
@@ -72,7 +72,7 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
   }
 
   return (
-    <div className="h-screen flex items-center justify-center">
+    <div className="h-screen flex items-center justify-center" data-aos="zoom-in" data-aos-duration="1800">
       {userLoggedIn && navigate('/')}
       <div
         className="wrapper h-3/4 mt-10"
@@ -136,7 +136,7 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
 
           <button className="submit" type="submit" disabled={loading}>
             {loading ? <Spin size="small" /> : "Login"}
-           </Button>
+          </button>
           <button
             disabled={isloggedin}
             onClick={(e) => { onGoogleSignIn(e) }}
@@ -155,7 +155,7 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
               </defs>
             </svg>
             {isloggedin ? 'Signing In...' : 'Continue with Google'}
- 
+
           </button>
 
           <p

diff --git a/client/src/component/Testimonial.jsx b/client/src/component/Testimonial.jsx
@@ -85,11 +85,13 @@ const Testimonial = () => {
 
     return (
         <div>
-            <h1 className='text-center text-5xl'>
+            <h1 className='text-center text-5xl' data-aos="zoom-out">
                 See What our client say&apos;s about us !
             </h1>
 
-            <div className="slider" style={{ position: 'relative', marginTop: '100px', width: '100%', height: '550px', overflow: 'hidden' }}>
+            <div className="slider" style={{ position: 'relative', marginTop: '100px', width: '100%', height: '550px', overflow: 'hidden' }}
+                data-aos='zoom-in'
+                data-aos-duration='1700'>
                 {items.map((item, index) => (
                     <div className="item max-sm:!w-[300px] max-sm:!h-[430px] bg-blue-700 text-white" key={index} style={{
                         position: 'absolute',