Merge pull request #48 from TartejBrothers/Updates

Updated: Button Scroll
TartejBrothers · Jun 1, 2024 · a19d61f · a19d61f
2 parents 7647731 + e1998d9
commit a19d61f
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.js b/src/App.js
@@ -1,3 +1,4 @@
+import React from "react";
 import "./App.css";
 import Home from "./components/home";
 import Expertise from "./components/expertise";
@@ -6,16 +7,31 @@ import Designs from "./components/designs";
 import Testimonial from "./components/testimonial";
 import Contact from "./components/contact";
 import Footer from "./components/footer";
+
 function App() {
   return (
     <div className="App">
-      <Home />
-      <Expertise />
-      <Showcase />
-      <Designs />
-      <Testimonial />
-      <Contact />
-      <Footer />
+      <div id="home" className="section">
+        <Home />
+      </div>
+      <div id="expertise" className="section">
+        <Expertise />
+      </div>
+      <div id="showcase" className="section">
+        <Showcase />
+      </div>
+      <div id="designs" className="section">
+        <Designs />
+      </div>
+      <div id="testimonial" className="section">
+        <Testimonial />
+      </div>
+      <div id="contact" className="section">
+        <Contact />
+      </div>
+      <div id="footer" className="section">
+        <Footer />
+      </div>
     </div>
   );
 }

diff --git a/src/components/contact.jsx b/src/components/contact.jsx
@@ -2,6 +2,13 @@ import React from "react";
 import "./styles/contact.css";
 import footertop from "./assests/icons/footertop.svg";
 export default function contact() {
+  const scrollToSection = (sectionId) => {
+    const section = document.getElementById(sectionId);
+
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+    }
+  };
   return (
     <div className="contactmainwhole">
       <div className="contactmain">
@@ -16,8 +23,15 @@ export default function contact() {
           partner in success, every step of the way - anytime, anywhere
         </p>
         <div className="contactbuttons">
-          <button className="booknow">Book Meeting Now</button>
-          <button className="bookservices">Check Out Services</button>
+          <a href="https://calendly.com/advalstudios" target="blank">
+            <button className="booknow">Book Meeting Now</button>
+          </a>
+          <button
+            className="bookservices"
+            onClick={() => scrollToSection("expertise")}
+          >
+            Check Out Services
+          </button>
         </div>
       </div>
       <img src={footertop} className="footertopimg" alt="Footer Design" />

diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import "./styles/footer.css";
 import logo from "./assests/icons/logo.png";
 import arrowsubmit from "./assests/icons/arrowsubmit.svg";
@@ -9,6 +9,13 @@ import linkedin from "./assests/icons/linkedin.svg";
 import instagram from "./assests/icons/instagram.svg";
 
 export default function Footer() {
+  const scrollToSection = (sectionId) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <div>
       <div className="footerwork" id="contact">
@@ -31,21 +38,19 @@ export default function Footer() {
             <div className="footerworkrightheader">WHO WE ARE</div>
             <hr className="footerworkrightsplitter" />
             <ul>
-              <a href="#home">
-                <li>{">"} Home</li>
-              </a>
-              <a href="#services">
-                <li>{">"} Services</li>
-              </a>
-              <a href="#portfolio">
-                <li>{">"} Portfolio</li>
-              </a>
-              <a href="#work">
-                <li>{">"} Reviews</li>
-              </a>
-              <a href="#contact">
-                <li>{">"} Book a Meeting</li>
-              </a>
+              <li onClick={() => scrollToSection("home")}>{">"} Home</li>
+              <li onClick={() => scrollToSection("expertise")}>
+                {">"} Services
+              </li>
+              <li onClick={() => scrollToSection("showcase")}>
+                {">"} Portfolio
+              </li>
+              <li onClick={() => scrollToSection("testimonial")}>
+                {">"} Reviews
+              </li>
+              <li onClick={() => scrollToSection("contact")}>
+                {">"} Book a Meeting
+              </li>
             </ul>
           </div>
           <div className="footerworkrightbody">
@@ -56,7 +61,6 @@ export default function Footer() {
                 <img src={phone} alt="phone" />
                 +91 9952613793
               </li>
-
               <li>
                 <img src={email} alt="mail" id="mailicon" />
                 [email protected]

diff --git a/src/components/home.jsx b/src/components/home.jsx
@@ -20,6 +20,14 @@ export default function Home() {
     setDropdownVisible(!dropdownVisible);
   };
 
+  const scrollToSection = (sectionId) => {
+    const section = document.getElementById(sectionId);
+    setDropdownVisible(false);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <div>
       <div className="homemain">
@@ -32,11 +40,11 @@ export default function Home() {
           </div>
           <div className="navright">
             <ul>
-              <li>Home</li>
-              <li>Services</li>
-              <li>Portfolio</li>
-              <li>Reviews</li>
-              <li>About</li>
+              <li onClick={() => scrollToSection("home")}>Home</li>
+              <li onClick={() => scrollToSection("expertise")}>Services</li>
+              <li onClick={() => scrollToSection("showcase")}>Portfolio</li>
+              <li onClick={() => scrollToSection("testimonial")}>Reviews</li>
+              <li onClick={() => scrollToSection("contact")}>About</li>
               <li>
                 <a href="https://calendly.com/advalstudios" target="blank">
                   <button className="contactbtn">Contact</button>
@@ -63,23 +71,23 @@ export default function Home() {
             </div>
           </div>
           <ul className="navrightmobiledrop">
-            <li>
+            <li onClick={() => scrollToSection("home")}>
               <img src={home} alt="Navigation Items" />
               Home
             </li>
-            <li>
+            <li onClick={() => scrollToSection("expertise")}>
               <img src={servicesnav} alt="Navigation Items" />
               Services
             </li>
-            <li>
+            <li onClick={() => scrollToSection("showcase")}>
               <img src={portfolionav} alt="Navigation Items" />
               Portfolio
             </li>
-            <li>
+            <li onClick={() => scrollToSection("testimonial")}>
               <img src={reviewsnav} alt="Navigation Items" />
               Reviews
             </li>
-            <li>
+            <li onClick={() => scrollToSection("contact")}>
               <img src={mic} alt="Navigation Items" />
               About
             </li>
@@ -112,12 +120,25 @@ export default function Home() {
             <button className="homecenterbutton">Free Consultation</button>
           </a>
           <div className="homebottommobile">
-            <button className="homebutton1">Our Portfolio</button>
+            <button
+              className="homebutton1"
+              onClick={() => scrollToSection("showcase")}
+            >
+              Our Portfolio
+            </button>
           </div>
         </div>
         <div className="homebottom">
-          <button className="homebutton1">Our Portfolio</button>
-          <button className="homebutton2">
+          <button
+            className="homebutton1"
+            onClick={() => scrollToSection("showcase")}
+          >
+            Our Portfolio
+          </button>
+          <button
+            className="homebutton2"
+            onClick={() => scrollToSection("showcase")}
+          >
             <img src={arrow} alt="Arrow" />
           </button>
         </div>

diff --git a/src/components/styles/testimonial.css b/src/components/styles/testimonial.css
@@ -81,7 +81,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 640px;
-  overflow-x: clip;
+  overflow-x: hidden;
   overflow-y: visible;
   padding: 10px;
   gap: 40px;