Merge pull request JiyaGupta-cs#26 from prasukjain07/master

Conflict Resolve
swetasingh8844 · Jan 28, 2024 · 81225c3 · 81225c3
2 parents 3e1f4ea + 05e3c32
commit 81225c3
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 38 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "master",
+        "master"
+    ]
+}
diff --git a/public/index.html b/public/index.html
@@ -27,6 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <title>ShopNex</title>
   </head>
   <body>
@@ -42,5 +43,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+  </body>
   </body>
 </html>
diff --git a/src/About.js b/src/About.js
diff --git a/src/App.js b/src/App.js
@@ -1,44 +1,38 @@
-import "./App.css";
-import Navbar from "./Components/Navbar/Navbar";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Shop from "./Pages/Shop";
-import ShopCategory from "./Pages/ShopCategory";
-import Product from "./Pages/Product";
-import Cart from "./Pages/Cart";
-import LoginSignup from "./Pages/LoginSignup";
-import Footer from "./Components/Footer/Footer";
-import men_banner from "./Components/Assets/banner_mens.png";
-import women_banner from "./Components/Assets/banner_women.png";
-import kids_banner from "./Components/Assets/banner_kids.png";
-import ScrollUpButton from "./Components/ScrollUpButton/ScrollUpButton";
+
+import './App.css';
+import Navbar from './Components/Navbar/Navbar';
+import { BrowserRouter,Routes,Route } from 'react-router-dom';
+import Shop from './Pages/Shop';
+import ShopCategory from './Pages/ShopCategory';
+import Product from './Pages/Product';
+import Cart from './Pages/Cart';
+import LoginSignup from './Pages/LoginSignup';
+import Footer from './Components/Footer/Footer';
+import men_banner from './Components/Assets/banner_mens.png'
+import women_banner from './Components/Assets/banner_women.png'
+import kids_banner from './Components/Assets/banner_kids.png'
+import About from './Pages/About';
+import Contact from './Pages/Contact';
 
 function App() {
   return (
     <div>
       <BrowserRouter>
-        <Navbar />
-        <Routes>
-          <Route path="/" element={<Shop />} />
-          <Route
-            path="/men"
-            element={<ShopCategory banner={men_banner} category="men" />}
-          />
-          <Route
-            path="/women"
-            element={<ShopCategory banner={women_banner} category="women" />}
-          />
-          <Route
-            path="/kids"
-            element={<ShopCategory banner={kids_banner} category="kids" />}
-          />
-          <Route path="/product" element={<Product />}>
-            <Route path=":productId" element={<Product />} />
-          </Route>
-          <Route path="/cart" element={<Cart />} />
-          <Route path="/login" element={<LoginSignup />} />
-        </Routes>
-        <ScrollUpButton />
-        <Footer />
+      <Navbar/>
+      <Routes>
+        <Route path='/' element={<Shop/>} />
+        <Route path='/men' element={<ShopCategory banner={men_banner} category="men"/>} />
+        <Route path='/women' element={<ShopCategory banner={women_banner} category="women"/>} />
+        <Route path='/kids' element={<ShopCategory banner={kids_banner} category="kids"/>} />
+        <Route path='/product' element={<Product/>}>
+          <Route path=':productId' element={<Product/>}/>
+        </Route>
+        <Route path='/cart' element={<Cart/>} />
+        <Route path='/login' element={<LoginSignup/>} />
+        <Route path='/about' element={<About/>} />
+        <Route path='/contact' element={<Contact/>} />
+      </Routes>
+      <Footer/>
       </BrowserRouter>
     </div>
   );

diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
@@ -60,4 +60,8 @@
     border-radius: 10px;
     height: 3px;
     background:#c7c7c7;
+}
+.link{
+    text-decoration: none;
+    color: #1a1a1a;
 }
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
@@ -4,6 +4,7 @@ import footer_logo from '../Assets/logo_big.png'
 import instagram_icon from '../Assets/instagram_icon.png'
 import pintester_icon from '../Assets/pintester_icon.png'
 import whatsapp_icon from '../Assets/whatsapp_icon.png'
+import { Link } from 'react-router-dom'
 
 const Footer = () => {
     return (
@@ -16,8 +17,8 @@ const Footer = () => {
                 <li>Company</li>
                 <li>Products</li>
                 <li>Offices</li>
-                <li>About</li>
-                <li>Contact</li>
+                <li> <Link className="link" to='/about'>About</Link></li>
+                <li> <Link className="link" to='/contact'>Contact Us</Link></li>
             </ul>
             <div className="footer-social-icon">
                 <div className="footer-icons-container">

diff --git a/src/Pages/About.jsx b/src/Pages/About.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import './CSS/About.css'
+
+const About = () => {
+  return (
+    <>
+    <div className="container-my">
+      <h1 id = "aboutheading">About Us</h1>
+      <div className="content">
+      <p className="txt">
+      The ShopNex app revolutionizes the way you shop for clothing, providing an immersive and convenient experience that caters to the diverse fashion needs of individuals and families alike. Seamlessly blending cutting-edge technology with a user-friendly interface, our app serves as a virtual fashion haven where the latest trends in men's, women's, and kids' apparel are just a tap away. Navigating through the app is a breeze, allowing you to explore curated collections, discover new arrivals, and effortlessly make secure purchases with confidence. The app's intuitive features provide a personalized touch, offering tailored recommendations and exclusive deals based on your preferences. Embracing the ethos of ShopNex, the app is not merely a transactional platform but a dynamic space for self-expression and discovery. It encapsulates the essence of a modern, tech-savvy wardrobe upgrade, where every click opens the door to a world of style possibilities. Your fashion journey begins with the ShopNex app – download it today to witness the seamless convergence of style, technology, and unparalleled shopping satisfaction.
+      </p>
+    </div>
+    </div>
+    <div className='container-2'>
+      <div class="accordion" id="accordionExample">
+      <div class="accordion-item">
+        <h2 class="accordion-header">
+          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          Affordable Online Shopping at Your Fingertips
+          </button>
+        </h2>
+        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+          There are many benefits of shopping online. You can take your time and look at different options to find exactly what you want. It's easy to compare prices online and find exactly what you are looking for. And now with Meesho, you can shop for anything you want at the lowest prices in the market. Even if you want to shop for cool gifts for your friends and family, there are many options that you can find on the Internet.
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <h2 class="accordion-header">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+          A Huge Collection of Clothes Across All Categories
+          </button>
+        </h2>
+        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            We have a very wide range of clothes in all categories. For men, women and kids.  In our latest collections, you will find all the popular items at an affordable price, so you can be confident you're getting the best deal. 
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+    </>
+  );
+};
+
+export default About;
diff --git a/src/Pages/CSS/About.css b/src/Pages/CSS/About.css
@@ -0,0 +1,27 @@
+.container-my{
+    margin: 40px;
+    margin-left: 60px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#aboutheading{
+    width: 100%;
+    font-size: 5vw;
+    align-content: center;
+    margin-bottom: 30px;
+}
+.content{
+    margin-top: 0;
+    flex-shrink: 1;
+    max-width: 70vw;
+    display: flex;
+    flex-wrap: wrap;
+}
+.txt{
+    font-size: large;
+}
+.container-2{
+    margin: 5px 40px 5px 40px;
+
+}
diff --git a/src/Pages/CSS/Contact.css b/src/Pages/CSS/Contact.css
@@ -0,0 +1,23 @@
+.container-my{
+    margin: 40px;
+    margin-left: 60px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#myheading{
+    width: 100%;
+    align-content: center;
+    margin-bottom: 30px;
+}
+.content{
+    margin-top: 0;
+    flex-shrink: 1;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.list{
+    flex-wrap: wrap;
+    width: 400px;
+}
diff --git a/src/Pages/Contact.jsx b/src/Pages/Contact.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import './CSS/Contact.css'
+
+const Contact = () => {
+  return (
+    <div className="container-my">
+      <h1 id="myheading">
+        Contact Us
+      </h1>
+      <p>
+      This is the official page of Shopnix, where you can share all your queries, feedback, complaints, or any concern you may have about our products.
+      </p>
+      <p>
+      In Case of any grievance, don't hesitate to get in touch with us on our official contact number xxxxxxxxxx. Or you can write to us at xyz@gmail.com.
+      </p>
+
+      </div>
+  );
+};
+
+export default Contact;