Scribd
Upload
8 views

homepage

The document is a React component for a homepage that includes sections for home, about, and contact, with a form for user inquiries. It utilizes state management for form data and visibility of sections based on scroll position, and handles form submission using Axios to send data to a server. The component also includes styling for a responsive and interactive user interface.

Uploaded by

forads684
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views

homepage

The document is a React component for a homepage that includes sections for home, about, and contact, with a form for user inquiries. It utilizes state management for form data and visibility of sections based on scroll position, and handles form submission using Axios to send data to a server. The component also includes styling for a responsive and interactive user interface.

Uploaded by

forads684
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

import React, { useState, useEffect } from 'react';

import { Link } from 'react-router-dom';


import axios from 'axios';

const HomePage = () => {


const [formData, setFormData] = useState({ name: '', email: '', phone: '',
message: '' });
const [statusMessage, setStatusMessage] = useState('');
const [visibleSections, setVisibleSections] = useState({ home: false, about:
false, contact: false });

useEffect(() => {
const handleScroll = () => {
const scrollPosition = window.scrollY + window.innerHeight;
setVisibleSections({
home: scrollPosition > document.getElementById("home").offsetTop + 200,
about: scrollPosition > document.getElementById("aboutus").offsetTop + 200,
contact: scrollPosition > document.getElementById("contactus").offsetTop +
200
});
};

window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

const handleChange = (e) => {


setFormData({ ...formData, [e.target.name]: e.target.value });
};

const handleSubmit = async (e) => {


e.preventDefault();
try {
const response = await axios.post('http://localhost:5000/contact/submit',
formData);
setStatusMessage(response.data.message);
setFormData({ name: '', email: '', phone: '', message: '' });
} catch (error) {
setStatusMessage('❌ Error submitting form. Try again!');
}
};

return (
<div>
<nav className="navbar">
<a href="#home">Home</a>
<a href="#aboutus">About</a>
<a href="#contactus">Contact</a>
</nav>

<div id="home" className={`homepage-container ${visibleSections.home ? 'fade-


in' : ''}`}>
<div className="text-section">
<h1>Smart Video Feed and Stream Interaction</h1>
<p>Our platform leverages cutting-edge technologies to provide real-time
video streaming with intelligent features.</p>
<Link to="/register">
<button className="cta-button">Register</button>
</Link>
</div>
</div>

<div id="aboutus" className={`about-section ${visibleSections.about ? 'fade-


in' : ''}`}>
<div className="about-content">
<h2>ABOUT US</h2>
<p>We provide a platform to upload the videos you teach and get answers
to queries.</p>
</div>
<div className="about-images">
<img src="/about1.png" alt="About 1" className="zoom-in" />
<img src="/about2.png" alt="About 2" className="zoom-in" />
<img src="/about3.png" alt="About 3" className="zoom-in" />
</div>
</div>

<div id="contactus" className={`contact-section ${visibleSections.contact ?


'fade-in' : ''}`}>
<h1>CONTACT US</h1>
<p>If you need help or have a question, we are here for you.</p>

<form className="contact-form" onSubmit={handleSubmit}>


<input type="text" name="name" placeholder="Your Name"
value={formData.name} onChange={handleChange} required />
<input type="email" name="email" placeholder="Your Email"
value={formData.email} onChange={handleChange} required />
<input type="tel" name="phone" placeholder="Your Phone Number"
value={formData.phone} onChange={handleChange} required />
<textarea name="message" placeholder="Your Message" rows="4"
value={formData.message} onChange={handleChange} required />
<button type="submit">Submit</button>
</form>

{statusMessage && <p className="status-message">{statusMessage}</p>}


</div>

<style>
{`
html, body {
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
}

::-webkit-scrollbar {
display: none;
}

.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(240, 240, 240, 0.2);
backdrop-filter: blur(100px);
-webkit-backdrop-filter: blur(10px);
border-radius: 5px;
padding: 15px 0;
text-align: center;
z-index: 1000;
transition: background 0.3s ease-in-out;
}

.navbar.scrolled {
background: rgba(0, 0, 0, 0.6);
}

.navbar a {
color: white;
text-decoration: none;
margin: 0 20px;
font-size: 18px;
transition: color 0.3s ease;
display: inline-block;
}

.navbar a:hover {
color: rgb(0, 0, 0);
transform: translateY(-3px);
}

.homepage-container, .about-section, .contact-section {


height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
color: white;
background-size: cover;
background-position: center;
}

.homepage-container {
background-image: url('./background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: overlay;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
}

.text-section h1 {
font-size: 40px;
margin-bottom: 10px;
}

.text-section p {
font-size: 18px;
margin-bottom: 20px;
}

.cta-button {
padding: 12px 24px;
font-size: 18px;
border: none;
background: white;
color: black;
cursor: pointer;
transition: transform 0.3s ease, background 0.3s ease;
}

.cta-button:hover {
background: rgb(55, 140, 55);
transform: scale(1.05);
}

.about-section {
background-image: url('./background.jpg');
display: flex;
flex-direction: column;
text-align: center;
padding: 50px;
}

.about-content h2 {
font-size: 36px;
margin-bottom: 15px;
}

.about-images img {
width: 200px;
margin: 10px;
transition: transform 0.3s ease-in-out;
}

.about-images img:hover {
transform: scale(1.1);
}

.contact-form {
display: flex;
flex-direction: column;
width: 50%;
font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.contact-form input, .contact-form textarea {


padding: 10px;
margin-bottom: 15px;
border: none;
border-radius: 5px;
}

.contact-form button {
padding: 12px;
background: white;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
color: black;
}

.contact-form button:hover {
background: rgb(59, 101, 59);
transform: scale(1.05);
}

.fade-in {
opacity: 1;
transform: translateY(0);
transition: opacity 1s ease-out, transform 1s ease-out;
}

.zoom-in {
transition: transform 0.3s ease-in-out;
}

.zoom-in:hover {
transform: scale(1.1);
}

.status-message {
margin-top: 10px;
color: yellow;
}
`}
</style>
</div>
);
};

export default HomePage;

You might also like