Skip to content

Commit

Permalink
Redesigned Coming Soon Page (#705)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gauravsingh1281
gauravsingh1281 authored Feb 28, 2025
2 parents b5170c6 + 0301036 commit 1cd9517
Showing 1 changed file with 63 additions and 107 deletions.
170 changes: 63 additions & 107 deletions src/pages/ComingSoon.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,72 @@
// /c:/Users/Asus/OneDrive/Desktop/Open Source Contribution/Rentalog.in--Frontend/src/pages/ComingSoon.jsx
import React, { useState,useEffect } from 'react';
import { FaClock, FaTools, FaFacebook, FaTwitter, FaInstagram, FaEnvelope } from 'react-icons/fa';
import RentNavbar from '@/components/Header-section/RentNavbar';
import Footer from '@/components/Footer-section/Footer';

import React from 'react';
import { FaClock, FaTools } from 'react-icons/fa';
import { FaFacebook, FaTwitter, FaInstagram, FaEnvelope } from 'react-icons/fa';
// import './ComingSoon.css';
const ComingSoon = () => {
const [email, setEmail] = useState('');
const [submitted, setSubmitted] = useState(false);

const styles = {
comingSoonContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
textAlign: 'center',
backgroundColor: '#f2c4c4',
color: '#333',
},
smallericons: {
fontSize: '2rem',
color: '#316FF6',
},
instagram: {
fontSize: '2rem',
color: '#4c68d7',
},
icon: {
fontSize: '4rem',
margin: '1rem',
},
heading: {
fontSize: '2.5rem',
margin: '1rem 0',
},
paragraph: {
fontSize: '1.2rem',
margin: '1rem 0',
},
};
const handleSubmit = (e) => {
e.preventDefault();
setSubmitted(true);
};

const inputStyles = {
inputBox: {
padding: '0.5rem',
fontSize: '1rem',
margin: '1rem 0',
borderRadius: '5px',
border: '1px solid #ccc',
width: '80%',
maxWidth: '400px',
},
button: {
padding: '0.5rem 1rem',
fontSize: '1rem',
margin: '1rem 0',
borderRadius: '5px',
border: 'none',
backgroundColor: '#333',
color: '#fff',
cursor: 'pointer',
},
};
const ComingSoon = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);

const [email, setEmail] = React.useState('');
const [submitted, setSubmitted] = React.useState(false);
return (
<>
<RentNavbar />
<div className="flex flex-col md:flex-row items-center justify-center h-screen text-center bg-gray-100 text-gray-900 p-6 md:space-x-20 mt-[55px]">

const handleSubmit = (e) => {
e.preventDefault();
// Here you can add the logic to handle the email submission, e.g., sending it to a server
setSubmitted(true);
};
<div className="md:w-1/2 flex justify-center">
<img src="https://www.pngkey.com/png/full/953-9530974_flat-build-illustration-website.png" alt="Coming Soon" className="max-w-full h-auto rounded-lg" />
</div>
<div className="bg-white shadow-lg rounded-xl p-8 w-full max-w-lg border border-gray-200 md:w-1/2">
<FaClock className="text-5xl text-customRed mx-auto mb-4" />
<h1 className="text-4xl font-bold mb-2 text-gray-900">Coming Soon</h1>
<p className="text-lg text-gray-700 mb-6">We're working hard to bring you something amazing. Stay tuned!</p>
<FaTools className="text-5xl text-customRed mx-auto mb-6" />

return (
<div style={styles.comingSoonContainer}>
<FaClock style={styles.icon} />
<h1 style={styles.heading}>Coming Soon</h1>
<p style={styles.paragraph}>We're working hard to bring you this page. Stay tuned!</p>
<FaTools style={styles.icon} />
{!submitted ? (
<form onSubmit={handleSubmit}>
<input
type="email"
placeholder="Enter your email to get notified"
value={email}
onChange={(e) => setEmail(e.target.value)}
style={inputStyles.inputBox}
required
/>
<button type="submit" style={inputStyles.button}>Notify Me</button>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}>
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer" style={{ margin: '0 0.5rem' }}>
<FaFacebook style={styles.smallericons} />
</a>
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" style={{ margin: '0 0.5rem' }}>
<FaInstagram style={styles.instagram} />
</a>
<a href="mailto:[email protected]" style={{ margin: '0 0.5rem' }}>
<FaEnvelope style={styles.smallericons} />
</a>
</div>
</form>
) : (
<p style={styles.paragraph}>Thank you! We will notify you when the page is ready.</p>
)}
{/* <div style={styles.comingSoonContainer}>
<FaClock style={styles.icon} />
<h1 style={styles.heading}>Coming Soon</h1>
<p style={styles.paragraph}>We're working hard to bring you this page. Stay tuned!</p>
<FaTools style={styles.icon} />
</div> */}
{!submitted ? (
<form onSubmit={handleSubmit} className="w-full">
<input
type="email"
placeholder="Enter your email to get notified"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-primaryGreen text-textWhite text-lg font-medium p-3 rounded-lg mt-4 hover:bg-blue-600 transition"
>
Notify Me
</button>
</form>
) : (
<p className="text-lg text-blue-600 font-semibold">Thank you! We will notify you when the page is ready.</p>
)}

<div className="flex justify-center space-x-4 mt-6">
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
<FaFacebook className="text-3xl text-gray-900 hover:text-gray-700 transition" />
</a>
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer">
<FaInstagram className="text-3xl text-gray-900 hover:text-gray-700 transition" />
</a>
<a href="mailto:[email protected]">
<FaEnvelope className="text-3xl text-gray-900 hover:text-gray-700 transition" />
</a>
</div>
</div>
</div>
);
};
<Footer/>
</>
);
};

export default ComingSoon;

0 comments on commit 1cd9517

Please sign in to comment.