Shop page update

Changed Shop to socials page

src/App.js

@@ -4,6 +4,7 @@ import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import Home from "./pages/Home";
 import Shop from "./pages/Shop";
+import Socials from "./pages/Socials";
 import About from "./pages/About";
 import Contact from "./pages/Contact";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
@@ -25,6 +26,8 @@ function App() {
           
           <Route path="/shop" exact element={<Shop />} />
 
+          <Route path="/socials" exact element={<Socials />} />
+          
           <Route path="/about" exact element={<About />} />
          
           <Route path="/contact" exact element={<Contact />} />

src/components/Navbar.js

@@ -17,14 +17,14 @@ function Navbar() {
             <img src={Logo} />
             <div className='hiddenLinks'>        
             <NavLink to="/"> Home </NavLink>
-            <NavLink to="/shop"> Shop </NavLink>
+            <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
             <NavLink to="/contact"> Contact </NavLink>
             </div>
         </div>
         <div className='rightSide'>
             <NavLink to="/"> Home </NavLink>
-            <NavLink to="/shop"> Shop </NavLink>
+            <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
             <NavLink to="/contact"> Contact </NavLink>
           <button onClick={toggleNavbar}>

src/pages/Socials.js

@@ -0,0 +1,37 @@
+import React from "react";
+import "../styles/Socials.css";
+
+function Socials() {
+  return (
+    <div className="socialBody">
+        <div className="social1">
+        
+        <h1> Just A Test </h1>
+        <p> Test Paragraph</p>  
+        
+        <div className="socialButton1">
+
+            <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank">Join the Cord!</a>
+
+        </div>
+
+        </div>
+        
+        <div className="social2">
+
+            <h1> Just A Test 2</h1>
+            <p> Test Paragraph 2</p>
+
+            <div className="socialButton2">
+
+            <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank">Join the Cord2!</a>
+            
+            </div>
+
+        </div>
+
+        </div>
+  );
+}
+
+export default Socials;

src/styles/Socials.css

@@ -0,0 +1,25 @@
+.socialBody {
+    width: 100svw;
+    height: 90vh;
+    display: flex;
+    justify-content: center;
+    padding-left: 150px;
+    flex-direction: column;
+    background-color: gray;
+}
+
+.social1 {
+    border-radius: 15px;
+    height: auto;
+    width: 100px;
+    padding: 16px;
+    background-color: rgba(255, 0, 0, 0.16);
+}
+
+.social2 {
+    border-radius: 15px;
+    height: auto;
+    width: 100px;
+    padding: 16px;
+    background-color: rgba(255, 0, 0, 0.16);
+}