Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed UI bugs. #358

Merged
merged 1 commit into from
Jul 4, 2024
Merged

Fixed UI bugs. #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/AboutUs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,9 @@ img {
.flex {
flex-direction: column !important;
}

.socials {
flex-direction: row !important;
}
.image-container-one {
order: -1;
}
Expand Down
35 changes: 22 additions & 13 deletions src/components/ContactUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SectionWrapper } from "./hoc";
import { slideIn } from "../utils/motions";
import FireFliesBackground from "./FireFlies";
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import "react-toastify/dist/ReactToastify.css";

const Contact = () => {
const [name, setName] = useState("");
Expand All @@ -22,9 +22,8 @@ const Contact = () => {
const formData = new FormData(event.target);
formData.append("access_key", "b31a0b0f-6a98-4f98-a62b-c6c6b05ae9ee");


const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
const validEmailDomains = ["com", "net", "org", "in"];
const validEmailDomains = ["com", "net", "org", "in"];
const enteredDomain = email.split(".")[1];

if (!emailPattern.test(email)) {
Expand Down Expand Up @@ -156,7 +155,8 @@ const Contact = () => {
onChange={(e) => setEmail(e.target.value)}
placeholder="What's your web address?"
className={`bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium bg-[#1e1e1e] ${
emailError ? "border-red-500" : "" }`}
emailError ? "border-red-500" : ""
}`}
required
/>
{emailError && (
Expand Down Expand Up @@ -209,8 +209,8 @@ const Contact = () => {
</div>
<div className="static-info">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="md:col-span-1">
<div className="bg-gray-200 h-64 md:h-full">
<div className="md:col-span-1 mb-52">
<div className="bg-gray-200 h-64 mb-4">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9353078.84733098!2d-106.48813274672541!3d39.49054996305706!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2sin!4v1717736058924!5m2!1sen!2sin"
width="100%"
Expand All @@ -225,7 +225,9 @@ const Contact = () => {
<div className="md:col-span-1">
<div className="bg-gray-300 h-64 md:h-full">
<div className="bg-gray-300 p-6 ">
<h2 className="text-black text-2xl font-bold mb-4">Contact Us</h2>
<h2 className="text-black text-2xl font-bold mb-4">
Contact Us
</h2>
<div className="rounded-md border p-4">
<div className="flex items-center mb-2">
<i className="fas fa-envelope mr-2 text-black"></i>
Expand All @@ -242,21 +244,28 @@ const Contact = () => {
</div>
<div className="mt-4">
<p className="text-black">
Feel free to reach out to us for any inquiries or assistance.
Feel free to reach out to us for any inquiries or
assistance.
</p>
</div>
<div className="mt-4">
<h3 className="text-lg font-bold mb-2 text-black">Opening Hours</h3>
<h3 className="text-lg font-bold mb-2 text-black">
Opening Hours
</h3>
<ul>
<li className="text-black">Monday - Friday: 9:00 AM - 6:00 PM</li>
<li className="text-black">
Monday - Friday: 9:00 AM - 6:00 PM
</li>
<li className="text-black">Saturday: 10:00 AM - 4:00 PM</li>
<li className="text-black">Sunday: Closed</li>
</ul>
</div>
<div className="mt-4">
<h3 className="text-lg font-bold mb-2 text-black">Follow Us</h3>
<div className="flex space-x-4 xs:hidden">
<a href="#" className="text-blue-500 hover:text-blue-700 sm:ml-4">
<h3 className="text-lg font-bold mb-2 text-black">
Follow Us
</h3>
<div className="flex space-x-4 socials ">
<a href="#" className="text-blue-500 hover:text-blue-700 ">
<i className="fab fa-facebook"></i>
</a>
<a href="#" className="text-blue-500 hover:text-blue-700">
Expand Down
58 changes: 30 additions & 28 deletions src/components/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import ParticleRing from "./ParticleRing.jsx";
import TypewriterEffect from "./Typewriter.jsx";
import Preloader from "./Preloader.jsx";


const Home = () => {
useEffect(() => {
initParticlesEngine(async (engine) => {
Expand Down Expand Up @@ -72,36 +71,39 @@ const Home = () => {
color: "#fff", // White font color on hover
};

// State to manage button hover
const [isButtonHovered, setIsButtonHovered] = useState(false);
// State to manage button hover
const [isButtonHovered, setIsButtonHovered] = useState(false);
return (
<div>
<div className="container">
{/* keep particles at top */}
{/* <Particles id="tsparticles" options={useMemo(() => lines)} /> */}
<ParticleRing className="z-20"/>
<div style={newTextStyles} className="main-text">
<p style={{ ...newTextStyles, margin: 0 }}>TimeWarp</p>
<div className="container">
{/* keep particles at top */}
{/* <Particles id="tsparticles" options={useMemo(() => lines)} /> */}
<ParticleRing className="z-20" />
<div style={newTextStyles} className="main-text">
<p style={{ ...newTextStyles, margin: 0 }}>TimeWarp</p>
</div>
<p style={paragraphStyles} className="text-xl w-screen">
{/* Understanding history, embracing the present, and envisioning the future */}
<TypewriterEffect
text="Understanding history, embracing the present, and envisioning the future"
speed={40}
/>
</p>
<a href="/AboutUs" style={{ textDecoration: "none" }}>
<button
style={{
...buttonStyles,
...(isButtonHovered ? buttonHoverStyles : {}),
}}
onMouseEnter={() => setIsButtonHovered(true)}
onMouseLeave={() => setIsButtonHovered(false)}
className="mx-0"
>
Know more
</button>
</a>
</div>
<p style={paragraphStyles} className="text-xl w-screen">
{/* Understanding history, embracing the present, and envisioning the future */}
<TypewriterEffect text="Understanding history, embracing the present, and envisioning the future" speed={40} />
</p>
<a href="/AboutUs" style={{ textDecoration: "none" }}>
<button
style={{
...buttonStyles,
...(isButtonHovered ? buttonHoverStyles : {}),
}}
onMouseEnter={() => setIsButtonHovered(true)}
onMouseLeave={() => setIsButtonHovered(false)}
>
Know more
</button>
</a>

</div>
<Preloader />
<Preloader />
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const Navbar = () => {
{`@import url('https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css');`}
</style>
<button
className="block md:hidden p-2 mx-0 my-0"
className="block md:hidden p-2 mx-0 my-0 w-full"
onClick={() => setMenuOpen(!isMenuOpen)}
aria-label="Toggle navigation menu"
>
Expand Down