Merge branch 'main' of https://github.com/Shay2Shay/locallywbd

AMAN-GUPTA29 · May 1, 2024 · f739de0 · f739de0
2 parents 0e7e40a + a93b50d
commit f739de0
Show file tree

Hide file tree

Showing 15 changed files with 405 additions and 36 deletions.
diff --git a/client/index.html b/client/index.html
@@ -5,6 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <link rel="stylesheet" href=
+    "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.3",
+    "animate.css": "^4.1.1",
     "axios": "^1.6.8",
     "chart.js": "^4.4.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",
+    "react-animated-css-onscroll": "^1.2.1",
     "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",

diff --git a/client/src/components/landingpageComponent/Company.jsx b/client/src/components/landingpageComponent/Company.jsx
@@ -1,36 +1,72 @@
 import React from "react";
+import 'animate.css';
+import { AnimatedOnScroll } from "react-animated-css-onscroll";
 
 const FeaturedSection = () => {
   return (
     <section className="section-featured-ag slidetrans-ag tochangesize-ag">
       <div className="container-ag tochangesize-ag">
         <h2 className="heading-featured-in-ag tochangesize-ag">As featured in</h2>
         <div className="logos-ag tochangesize-ag">
-          <img
-            className="logo-ag slidetrans-ag tochangesize-ag"
-            src="../src/assets/images/img/logos/techcrunch.png"
-            alt="Techcrunch logo"
-          />
+          <AnimatedOnScroll animationIn="animate__animated animate__swing">
+            {
+              <img
+              className="logo-ag slidetrans-ag tochangesize-ag animate__animated animate__shakeX"
+              src="../src/assets/images/img/logos/techcrunch.png"
+              alt="Techcrunch logo"
+            />
+            }
+          </AnimatedOnScroll>
+          <AnimatedOnScroll animationIn="animate__animated animate__swing">
+            {
           <img
             className="logo-ag slidetransl-ag tochangesize-ag"
             src="../src/assets/images/img/logos/business-insider.png"
             alt="Business Insider logo"
           />
-          <img
+            }
+          </AnimatedOnScroll>
+
+          <AnimatedOnScroll animationIn="animate__animated animate__shakeX">{
+
+            <img
             className="logo-ag slidetrans-ag tochangesize-ag"
             src="../src/assets/images/img/logos/the-new-york-times.png"
             alt="The New York Times logo"
-          />
-          <img
-            className="logo-ag slidetransl-ag tochangesize-ag"
-            src="../src/assets/images/img/logos/forbes.png"
-            alt="Forbes logo"
-          />
-          <img
-            className="logo-ag slidetrans-ag tochangesize-ag"
-            src="../src/assets/images/img/logos/usa-today.png"
-            alt="USA Today logo"
-          />
+            />
+
+            }
+          </AnimatedOnScroll>
+
+          <AnimatedOnScroll animationIn="animate__animated animate__swing">
+
+            {
+               <img
+               className="logo-ag slidetransl-ag tochangesize-ag"
+              src="../src/assets/images/img/logos/forbes.png"
+              alt="Forbes logo"
+              />
+              }
+
+
+          </AnimatedOnScroll>
+          {/* <AnimatedOnScroll animationIn="animate__animated animate__shakeX"> */}
+
+            {
+             <img
+             className="logo-ag slidetrans-ag tochangesize-ag"
+             src="../src/assets/images/img/logos/usa-today.png"
+             alt="USA Today logo"
+           />
+            }
+
+
+          {/* </AnimatedOnScroll> */}
+
+
+
+
+
         </div>
       </div>
     </section>

diff --git a/client/src/components/landingpageComponent/Hero.jsx b/client/src/components/landingpageComponent/Hero.jsx
@@ -7,7 +7,7 @@ const HeroSection = () => {
       <div className="hero-ag tochangesize-ag">
         <div className="hero-white-ag tochangesize-ag">
           <div className="hero-text-box-ag tochangesize-ag">
-            <h1 className="heading-primary-ag heading-main-ag tochangesize-ag">
+            <h1 className="heading-primary-ag heading-main-ag tochangesize-ag head-small-size">
               Get things done with our trusted local professionals
             </h1>
             <p className="hero-description-ag discription-main-ag tochangesize-ag">

diff --git a/client/src/components/landingpageComponent/LandingPage.css b/client/src/components/landingpageComponent/LandingPage.css
@@ -22,7 +22,7 @@
 } */
 
 .toAll{
-  padding: 0;
+  padding: 0%;
   margin: 0;
   box-sizing: border-box;
   /* font-size: 62.5%; */
@@ -40,11 +40,18 @@
 
 /****************GENRAL**************************/
 
+
+
+
 .tochangesize-ag {
   font-size: 62.5%;
   zoom: 90%;
 }
 
+.head-small-size{
+  zoom:80%;
+}
+
 .tochangesize2-ag {
   font-size: 62.5%;
   zoom: 80%;
@@ -126,6 +133,8 @@
   transition-delay: 600ms;
 } */
 
+
+
 .slidetrans-ag {       
   opacity: 100;
   /* filter: blur(5px); */
@@ -140,6 +149,10 @@
   transition: all 1s; */
 }
 
+.testimoniallandeval{
+  zoom:90%;
+}
+
 .show-ag {
   opacity: 1;
   filter: blur(0);
@@ -236,7 +249,7 @@
 }
 
 .logo-ag {
-  height: 6rem;
+  height: 3rem;
 }
 /******************************************/
 .heaader-ag {
@@ -401,7 +414,7 @@
   display: flex;
   align-items: center;
   gap: 1.6rem;
-  margin-top: 8rem;
+  margin-top: 6rem;
   padding-left: 10%;
 }
 
@@ -440,7 +453,7 @@
 }
 
 .butt-main-ag {
-  padding-left: 0%;
+  padding-left: 30%;
 }
 
 .delivered-text-ag {
@@ -454,7 +467,7 @@
 }
 
 .section-featured-ag {
-  padding: 4.8rem 0 3.2rem 0;
+  padding: 20rem 0 20rem 0;
 }
 
 .heading-featured-in-ag {
@@ -1137,3 +1150,13 @@ footer .wave-ag#wave4 {
     padding: 3.2rem;
   }
 }
+
+
+.buttonsellerlogin{
+  padding-left: 40%;
+  padding-bottom: 10%;
+}
+
+.sellermarginedown{
+  margin-bottom: 10%;
+}
diff --git a/client/src/components/landingpageComponent/Services.jsx b/client/src/components/landingpageComponent/Services.jsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { AnimatedOnScroll } from "react-animated-css-onscroll";
+import 'animate.css';
 
 const ServicesSection = () => {
   return (
@@ -13,6 +15,7 @@ const ServicesSection = () => {
 
         <div className="notflex-ag conntainer-ag grid-ag grid--2-cols-ag grid--center-v-ag tochangesize-ag">
           {/* STEP 01 */}
+          <AnimatedOnScroll animationIn="animate__animated animate__backInLeft">
           <div className="step-text-box-ag slidetrans-ag">
             <p className="step-number-ag">01</p>
             <h3 className="heading-tertiary-ag">
@@ -26,23 +29,29 @@ const ServicesSection = () => {
               and get back on the road with confidence.
             </p>
           </div>
+          </AnimatedOnScroll>
 
+          <AnimatedOnScroll animationIn="animate__animated animate__backInRight">
           <div className="step-img-box-ag slidetrans1-ag">
             <img
               src="../src/assets/images/image/service3/outdoor.jpg"
               className="step-img-ag"
               alt="Outdoor services"
             />
           </div>
+          </AnimatedOnScroll>
 
           {/* STEP 02 */}
+          <AnimatedOnScroll animationIn="animate__animated animate__backInLeft">
           <div className="step-img-box-ag slidetrans1-ag">
             <img
               src="../src/assets/images/image/service3/indoor.jpg"
               className="step-img-ag"
               alt="Indoor services"
             />
           </div>
+          </AnimatedOnScroll>
+          <AnimatedOnScroll animationIn="animate__animated animate__backInRight">
           <div className="step-text-box-ag slidetrans-ag">
             <p className="step-number-ag">02</p>
             <h3 className="heading-tertiary-ag">Indoor services provided by us</h3>
@@ -55,8 +64,10 @@ const ServicesSection = () => {
               your household all with just a click.
             </p>
           </div>
+          </AnimatedOnScroll>
 
           {/* STEP 03 */}
+          <AnimatedOnScroll animationIn="animate__animated animate__backInLeft">
           <div className="step-text-box-ag slidetrans-ag">
             <p className="step-number-ag">03</p>
             <h3 className="heading-tertiary-ag">
@@ -72,13 +83,16 @@ const ServicesSection = () => {
               fingertips
             </p>
           </div>
+          </AnimatedOnScroll>
+          <AnimatedOnScroll animationIn="animate__animated animate__backInRight">
           <div className="step-img-box-ag slidetrans1-ag">
             <img
               src="../src/assets/images/image/service3/miscellinious.jpg"
               className="step-img-ag"
               alt="Miscellaneous services"
             />
           </div>
+          </AnimatedOnScroll>
         </div>
       </section>
     </section>

diff --git a/client/src/components/landingpageComponent/footer.jsx b/client/src/components/landingpageComponent/footer.jsx
@@ -19,6 +19,11 @@ const Footerland = () => {
             <div className="loggo-col">
               <a href="#" className="footeer-logoo">
                 {/* <img className="loggo" src={logo} alt="logo" /> */}
+                <img
+          className="logo-ag"
+          alt="Startup logo"
+          src="../src/assets/images/logo.png"
+        />
               </a>
 
               <ul className="sociaal-links">

diff --git a/client/src/components/landingpageComponent/rating.jsx b/client/src/components/landingpageComponent/rating.jsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { AnimatedOnScroll } from "react-animated-css-onscroll";
+import 'animate.css';
 
 const TestimonialsSection = () => {
   return (
@@ -14,22 +16,24 @@ const TestimonialsSection = () => {
           </h2>
 
           <div className="testimonials-ag tochangesize-ag">
+          <AnimatedOnScroll animationIn="animate__animated animate__backInLeft">
             <div className="testi-background-ag slidetrans-ag ">
               <figure className="testimonial-ag ">
                 <img
                   className="testimonial-img-ag"
                   alt="Photo of customer Dave Bryson"
                   src="../src/assets/images/img/customers/dave.jpg"
                 />
-                <blockquote className="testimonial-text-ag ">
+                <blockquote className="testimonial-text-ag testimoniallandeval">
                   {
                     "Exceptional service! The team was punctual and efficient. Our home looks amazing. Highly recommend this locally."
                   }
                 </blockquote>
                 <p className="testimonial-name-ag">&mdash; Dave Bryson</p>
               </figure>
             </div>
-
+            </AnimatedOnScroll>
+            <AnimatedOnScroll animationIn="animate__animated animate__backInLeft">
             <div className="testi-background-ag slidetrans-ag">
               <figure className="testimonial-ag">
                 <img
@@ -45,7 +49,8 @@ const TestimonialsSection = () => {
                 <p className="testimonial-name-ag">&mdash; Ben Hadley</p>
               </figure>
             </div>
-
+            </AnimatedOnScroll>
+            <AnimatedOnScroll animationIn="animate__animated animate__backInLeft">
             <div className="testi-background-ag slidetrans-ag">
               <figure className="testimonial-ag">
                 <img
@@ -55,13 +60,14 @@ const TestimonialsSection = () => {
                 />
                 <blockquote className="testimonial-text-ag">
                   {
-                    "Reliable childcare support. Our nanny is wonderful and trustworthy. A true blessing for busy parents in our community."
+                    "Reliable childcare support. Our nanny is wonderful and trustworthy."
                   }
                 </blockquote>
                 <p className="testimonial-name-ag">&mdash; Steve Miller</p>
               </figure>
             </div>
-
+            </AnimatedOnScroll>
+            <AnimatedOnScroll animationIn="animate__animated animate__backInLeft">
             <div className="testi-background-ag slidetrans-ag">
               <figure className="testimonial-ag">
                 <img
@@ -71,18 +77,21 @@ const TestimonialsSection = () => {
                 />
                 <blockquote className="testimonial-text-ag">
                   {
-                    "Great local eats! The restaurant offers delicious dishes and warm ambiance. A must-visit spot in our neighborhood."
+                    "Great local eats! The restaurant offers delicious dishes and warm ambiance."
                   }
                 </blockquote>
                 <p className="testimonial-name-ag">&mdash; Hannah Smith</p>
               </figure>
             </div>
+            </AnimatedOnScroll>
           </div>
         </div>
       </div>
       <div className="part22-ag tochangesize-ag">
+      <AnimatedOnScroll animationIn="animate__animated animate__backInRight">
         <div className="gallery-ag tochangesize-ag">
-          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((index) => (
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13,14,15].map((index) => (
+
             <figure
               className="gallery-item-ag slidetrans-ag tochangesize-ag"
               key={index}
@@ -94,6 +103,7 @@ const TestimonialsSection = () => {
             </figure>
           ))}
         </div>
+        </AnimatedOnScroll>
       </div>
     </section>
   );