feat(ui):added navbar

anj20 · Jun 21, 2024 · a42f4dd · a42f4dd
1 parent 1e9fdfe
commit a42f4dd
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 348 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,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`.
     -->
-    <title>React App</title>
+    <title>SpringFlare</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,16 @@
 import React from 'react';
 import Routing from './routes';
+import Navbar from './components/Navbar/Navbar';
+import { BrowserRouter } from 'react-router-dom';
 
 function App() {
   return (
-    <div className="App">
-      <Routing />
-    </div>
+    <BrowserRouter>
+      <div className="App">
+        <Navbar/>
+        <Routing />
+      </div>
+    </BrowserRouter>
   );
 }
 

diff --git a/src/components/Home/HomePage.css b/src/components/Home/HomePage.css
@@ -1,184 +1,48 @@
-/* General Styles */
-body {
-  background-color: #121212;
-  color: #ffffff;
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
+/* Home.css */
 
-button {
-  cursor: pointer;
-}
-
-/* Home Page */
 .home-page {
-  position: relative;
-}
-
-/* Header */
-.home-header {
-  background-color: #1c1c1c;
-  padding: 20px;
+  font-family: Arial, sans-serif;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
+  height: 100vh; 
 }
 
-.home-header .logo {
-  font-size: 1.5em;
-  font-weight: bold;
-}
-
-.home-header .nav-links {
-  list-style: none;
-  display: flex;
-  gap: 20px;
-}
-
-.home-header .nav-links li {
-  display: inline;
-}
-
-.home-header .nav-links a {
-  color: #ffffff;
-}
-
-.home-header .contact-button {
-  background-color: #ff5722;
-  color: #ffffff;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-/* Hero Section */
 .hero-section {
-  position: relative;
+  background-color: #f0f0f0;
+  padding: 4rem 2rem;
   text-align: center;
-  padding: 50px 20px;
+  max-width: 100%; /* Maximum width relative to the parent (80% of its container) */
+  margin-bottom: 2em;
 }
 
-.hero-section img {
-  width: 100%;
-  max-height: 500px;
-  object-fit: cover;
+.hero-section h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
 }
 
-.hero-section .hero-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #ffffff;
+.hero-section p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
 }
 
-.hero-section .shop-now-button {
-  background-color: #ff5722;
-  color: #ffffff;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-/* Features Section */
-.features-section {
-  padding: 40px 20px;
-}
 
-.features-section .features {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
+.explore-button:hover {
+  background-color: #45a049;
 }
 
-.features-section .feature {
-  background-color: #1c1c1c;
-  padding: 20px;
-  border-radius: 8px;
-  flex: 1;
-}
 
-/* Products Section */
-.products-section {
-  padding: 40px 20px;
-}
 
-.products-section .product-list {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-}
-
-.products-section .product-item {
-  background-color: #1c1c1c;
-  padding: 20px;
-  border-radius: 8px;
-  flex: 1;
-  text-align: center;
-}
-
-.products-section .shop-now-button {
-  background-color: #ff5722;
-  color: #ffffff;
+.explore-button {
+  background-color: #4CAF50;
+  color: white;
   border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-/* Testimonials Section */
-.testimonials-section {
-  padding: 40px 20px;
-}
-
-.testimonials-section .testimonials {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.testimonials-section .testimonial {
-  background-color: #1c1c1c;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-/* FAQ Section */
-.faq-section {
-  padding: 40px 20px;
-}
-
-.faq-section .faqs {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.faq-section .faq {
-  background-color: #1c1c1c;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-/* Footer */
-.home-footer {
-  background-color: #1c1c1c;
-  padding: 20px;
+  padding: 1em 2em; /* Padding in em units */
   text-align: center;
-}
-
-.home-footer .social-media {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  margin-top: 10px;
-}
-
-.home-footer .social-media a {
-  color: #ffffff;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1.2em; /* Font size in em units */
+  margin-top: 2em; /* Margin top in em units */
+  cursor: pointer;
 }