navbar:
import React from 'react';
import './NavBar.css';
const NavBar = () => {
return (
<header className="navBar">
<div className="logo">MEDIASURED</div>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<button className="quote-button">Get a Quote</button>
</header>
);
};
export default NavBar;
navbar css
.navBar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333; /* Dark background for the header */
color: white;
}
.navBar .logo {
font-size: 24px;
font-weight: bold;
}
.navBar nav ul {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.navBar nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
.navBar nav ul li a:hover {
text-decoration: underline;
}
.quote-button {
padding: 10px 20px;
background-color: #f44336; /* Red button */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.quote-button:hover {
background-color: #d32f2f; /* Darker red on hover */
}
footer
import React from 'react';
import './Footer.css';
const Footer = () => {
return (
<footer className="footer">
<div className="footer-content">
<p>© 2024 Mediasured. All rights reserved.</p>
<nav>
<ul className="footer-links">
<li><a href="#about">About</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
</ul>
</nav>
</div>
</footer>
);
};
export default Footer;
footer css
/* Footer.css */
.footer {
background-color: #1c1c1c; /* Dark background matching the overall theme */
color: white;
padding: 20px 50px; /* Space around the footer */
text-align: center; /* Center all text */
font-family: 'Arial', sans-serif; /* Ensure consistent font */
}
.footer-content {
max-width: 1200px; /* Keep footer content centered and contained */
margin: 0 auto; /* Center the content horizontally */
}
.footer p {
margin: 0;
font-size: 14px;
color: #bdc3c7; /* Light grey text color */
}
.footer nav {
margin-top: 10px; /* Space between the text and the nav links */
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 30px; /* Space out the links evenly */
}
.footer-links li {
display: inline;
}
.footer-links li a {
color: white;
text-decoration: none;
font-size: 14px;
}
.footer-links li a:hover {
text-decoration: underline;
}
Hero CSS
/* Hero.css */
.hero {
background-color: #2c3e50; /* Dark blue background */
color: white;
padding: 120px 20px; /* Padding for top/bottom and sides */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh; /* Takes up most of the viewport height */
}
.hero-content {
max-width: 800px; /* Limit the width of the content */
}
.hero h1 {
font-size: 48px; /* Large font for the main headline */
font-weight: 700; /* Bold */
margin-bottom: 20px; /* Space below the headline */
line-height: 1.2; /* Tighten the line height for a cleaner look */
}
.hero p {
font-size: 24px; /* Medium font for the subheadline */
margin-bottom: 40px; /* Space below the subheadline */
line-height: 1.5; /* Slightly more relaxed line height */
color: #bdc3c7; /* Light gray text for subheadline */
}
.cta-button {
padding: 15px 30px; /* Size of the button */
background-color: #e74c3c; /* Bright red button */
color: white;
border: none;
border-radius: 5px; /* Slightly rounded corners */
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
}
.cta-button:hover {
background-color: #c0392b; /* Darker red on hover */
transform: scale(1.05); /* Slight zoom effect on hover */
}
HERO JS
import React from 'react';
import './Hero.css';
import { Link } from 'react-router-dom';
const Hero = () => {
return (
<section className="hero">
<div className="hero-content">
<h1>Securing your digital presence with us.</h1>
<p>The most secure marketplace for buying and selling unique crypto assets.</p>
<Link to="/Signup">
<button className="cta-button">Get Your Quote</button>
</Link>
</div>
</section>
);
};
export default Hero;
index.js (home page)
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import NavBar from '../../components/ui/NavBar';
import Footer from '../../components/ui/Footer';
import Hero from './Hero';
import Signup from '../Signup';
function Home() {
return (
<Router>
<div>
<NavBar />
<Routes>
<Route path="/" element={<Hero />} />
<Route path="/signup" element={<Signup />} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default Home;
signup page (testing but this is were the error is happeneing
import React from 'react';
const Signup = () => {
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Hello World</h1>
</div>
);
};
export default Signup;
app.js (official)
import React from 'react';
import Home from './pages/Home/index';
function App() {
return (
<div>
<Home />
</div>
);
}
export default App;
index js official
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './app';
const rootElement = document.getElementById('root'); // Make sure this isn't null
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
index html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediaSured</title>
</head>
<body>
<div id="root"></div> <!-- Ensure this exists -->
</body>
</html>
sorry for it being so long i need help
i thoughout it would display the website ive been coding (doesnt anymore i had it up)
i was trying to link sign up and home.
im sorry im new to react i need help thx alot