Skip to content

Commit

Permalink
major refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@suvanbanerjee
suvanbanerjee committed Sep 26, 2024
1 parent 381627a commit 0ec33fa
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 121 deletions.
60 changes: 32 additions & 28 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,19 @@ export default function Home() {
return (
<div className="space-y-12">
{/* Section 1: Stay Informed */}
<div className="flex items-center justify-center bg-gray-100 pb-12">
<div className="flex items-center justify-center pb-12">
<div className="relative w-full">
<img
src="https://images.pexels.com/photos/942560/pexels-photo-942560.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
<video
src="bg.mp4"
alt="Disaster Awareness"
className="w-full h-96 object-cover object-center filter brightness-50 contrast-110"
className="w-full h-screen object-cover object-center filter brightness-50 contrast-110"
autoPlay
loop
muted
controls={false}
/>
<div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-b from-black to-transparent text-white">
<h1 className="text-4xl md:text-6xl font-extrabold mb-6">
<div className="absolute inset-0 flex flex-col items-center justify-center text-white">
<h1 className="text-5xl md:text-6xl font-extrabold mb-6 p-4">
Stay Informed, Stay Safe
</h1>
<p className="text-lg md:text-2xl text-center max-w-lg">
Expand All @@ -23,17 +27,10 @@ export default function Home() {
</div>
</div>
</div>
<div className="flex items-center px-6 bg-gray-100">
<div className="flex-shrink-0 w-2/5">
<img
src="/logo/logo.png"
alt="Logo"
className="w-full object-contain"
/>
</div>
<div className="w-3/5 pl-6">
<h2 className="text-4xl font-bold mb-4">RescueRing</h2>
<p className="text-lg text-gray-700">
<div className="flex items-center md:p-16 p-8 md:flex-row flex-col">
<div className="">
<h2 className="md:text-5xl text-3xl font-black mb-8">RescueRing</h2>
<p className="md:text-xl text-gray-700 mb-4">
RescueRing is a disaster management solution that combines a mobile
app for real-time community support during emergencies and a website
for pre-disaster education and preparedness. The app helps users
Expand All @@ -42,20 +39,27 @@ export default function Home() {
causes, and offering solutions, promoting awareness and readiness.
</p>
</div>
<div className="flex w-1/1 items-center justify-center">
<img
src="/logo/logo.png"
alt="Logo"
className="object-contain w-3/5"
/>
</div>
</div>
{/* Section 2: Disaster Preparedness Tips */}
<div className="flex items-center justify-center bg-gray-100 pb-12">
<div className="flex items-center justify-center">
<div className="relative w-full">
<img
src="https://images.pexels.com/photos/70573/fireman-firefighter-rubble-9-11-70573.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
src="dis_bg.jpg"
alt="Disaster Preparedness"
className="w-full h-96 object-cover object-right-top"
className="w-full h-96 object-right-top object-cover object-center filter brightness-50 contrast-110"
/>
<div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-b from-black to-transparent text-white">
<h1 className="text-4xl md:text-6xl font-extrabold mb-6">
<h1 className="text-4xl md:text-6xl font-extrabold mb-6 p-4">
Disaster Preparedness Tips
</h1>
<p className="text-lg md:text-2xl text-center max-w-lg">
<p className="text-lg md:text-2xl text-center p-4">
Learn key strategies and steps to protect yourself and your loved
ones before a disaster strikes.
</p>
Expand All @@ -65,25 +69,25 @@ export default function Home() {

{/* Important Links Section */}
<div className="text-center">
<h1 className="text-4xl md:text-6xl font-extrabold mb-8">
IMPORTANT LINKS
</h1>
<DisasterBoard />
<p className="text-center text-gray-600 mb-4">
You will be redirected to the official government website
</p>
</div>

{/* Section 3: Connect and Share */}
<div className="flex items-center justify-center bg-gray-100 pt-12">
<div className="flex items-center justify-center pt-12">
<div className="relative w-full">
<img
src="https://images.pexels.com/photos/28307967/pexels-photo-28307967/free-photo-of-a-fire-is-burning-in-the-dark-with-a-black-background.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Connect and Share"
className="w-full h-96 object-cover object-center filter brightness-50 contrast-110"
/>
<div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-b from-black to-transparent text-white">
<h1 className="text-4xl md:text-6xl font-extrabold mb-6">
<h1 className="text-4xl md:text-6xl font-black mb-6 p-4 mx-auto">
Connect, Share, Prepare
</h1>
<p className="text-lg md:text-2xl text-center max-w-lg">
<p className="text-lg md:text-2xl font-bold text-center max-w-lg">
Join Our Community Today
</p>
</div>
Expand Down
14 changes: 6 additions & 8 deletions components/DisasterBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,37 +103,35 @@ const DisasterBoard: React.FC = () => {
};

return (
<div className="p-4">
<div className="p-8">
{/* Category buttons centered */}
<div className="flex justify-center flex-wrap gap-2 mb-6">
{categories.map((category) => (
<button
key={category}
className={`px-4 py-2 rounded bg-blue-500 text-white focus:outline-none transition-transform transform-gpu hover:scale-105 ${
selectedCategory === category ? "bg-blue-700" : "bg-blue-500"
className={`px-4 py-2 rounded focus:outline-none transition-transform transform-gpu hover:scale-105 ${
selectedCategory === category ? "bg-stone-300 text-black font-bold" : "bg-black text-white"
}`}
onClick={() => handleCategoryClick(category)}
>
{category.charAt(0).toUpperCase() + category.slice(1)}
</button>
))}
</div>

{/* Centered heading */}
<div className="text-center">
<h2 className="text-2xl font-bold mb-4 capitalize">
{selectedCategory} Resources
</h2>
</div>

{/* Display relevant content for the selected category */}
<div className="bg-gray-100 p-6 rounded shadow-lg">
<div className="space-y-4">
<div className="bg-gray-100 p-4 rounded shadow-lg">
<div className="md:grid md:grid-cols-2 md:gap-4">
{data[selectedCategory as keyof typeof data]?.map((item) =>
item ? (
<div
key={item.title}
className="p-4 bg-white rounded shadow hover:bg-gray-50 transition-all transform hover:scale-105 cursor-pointer"
className="p-4 bg-white rounded shadow hover:bg-gray-50 transition-all transform hover:scale-105 cursor-pointer mb-2"
onClick={() => window.open(item.link, "_blank")}
>
<h3 className="text-xl font-semibold">{item.title}</h3>
Expand Down
207 changes: 122 additions & 85 deletions components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,99 +41,136 @@ const Navbar: React.FC = () => {
return (
<nav
ref={navbarRef}
className="bg-[#0B2F9F] text-white shadow-lg z-50 sticky top-0"
className="text-white shadow-lg z-50 sticky top-0 bg-black bg-opacity-90"
>
<div className="container mx-0 flex items-center justify-between p-4 ">
{/* Logo and Main Links for Desktop */}
<div className="flex items-center space-x-6 flex-grow">
{/* Logo and Name */}
<div className="flex items-center space-x-6">
<img src="/logo/logo.png" alt="logo" width={40} />
<Link
href="/"
className="text-2xl font-bold "
className="text-2xl font-bold"
onClick={() => setIsMenuOpen(false)}
>
{/* Replace with your logo */}
RescueRing
</Link>
<img src="/logo/logo.png" alt="logo" width={40} />
<div className="hidden md:flex space-x-6">
<div className="relative">
<button
onClick={() => toggleDropdown("resources")}
className="hover:text-gray-300 transition-colors duration-300"
>
Resources ▼
</button>
{dropdown === "resources" && (
<div className="absolute top-full left-0 mt-2 bg-white text-black py-2 rounded shadow-md w-48 z-50">
<Link
href="/preparedness"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Preparedness
</Link>
<Link
href="/governmentschemes"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Government Schemes
</Link>
<Link
href="/educate"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Educate Yourself
</Link>
</div>
)}
</div>
<div className="relative">
<button
onClick={() => toggleDropdown("community")}
className="hover:text-gray-300 transition-colors duration-300"
>
Community ▼
</button>
{dropdown === "community" && (
<div className="absolute top-full left-0 mt-2 bg-white text-black py-2 rounded shadow-md w-48 z-50">
<Link
href="/volunteers"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Volunteers
</Link>
<Link
href="/"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Community Initiatives
</Link>
</div>
)}
</div>
<div className="relative">
<button
onClick={() => toggleDropdown("about")}
className="hover:text-gray-300 transition-colors duration-300"
>
About ▼
</button>
{dropdown === "about" && (
<div className="absolute top-full left-0 mt-2 bg-white text-black py-2 rounded shadow-md w-48 z-50">
<Link
href="/"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
About Our App
</Link>
</div>
)}
</div>
</div>

{/* Main Links for Desktop */}
<div className="hidden md:flex space-x-6 ml-auto">
<div className="relative">
<button
onClick={() => toggleDropdown("resources")}
className="hover:text-gray-300 transition-colors duration-300"
>
<div className="flex items-center gap-1">
Resources{" "}
<svg
fill="#ffffff"
width="20px"
height="20px"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
stroke="#ffffff"
>
<path d="M11.125 16.313l7.688-7.688 3.594 3.719-11.094 11.063-11.313-11.313 3.5-3.531z"></path>
</svg>
</div>
</button>
{dropdown === "resources" && (
<div className="absolute top-full left-0 mt-2 bg-white text-black py-2 rounded shadow-md w-48 z-50">
<Link
href="/preparedness"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Preparedness
</Link>
<Link
href="/governmentschemes"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Government Schemes
</Link>
<Link
href="/educate"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Educate Yourself
</Link>
</div>
)}
</div>
<div className="relative">
<button
onClick={() => toggleDropdown("community")}
className="hover:text-gray-300 transition-colors duration-300"
>
<div className="flex items-center gap-1">
Community{" "}
<svg
fill="#ffffff"
width="20px"
height="20px"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
stroke="#ffffff"
>
<path d="M11.125 16.313l7.688-7.688 3.594 3.719-11.094 11.063-11.313-11.313 3.5-3.531z"></path>
</svg>
</div>
</button>
{dropdown === "community" && (
<div className="absolute top-full left-0 mt-2 bg-white text-black py-2 rounded shadow-md w-48 z-50">
<Link
href="/volunteers"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Volunteers
</Link>
<Link
href="/"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
Community Initiatives
</Link>
</div>
)}
</div>
<div className="relative">
<button
onClick={() => toggleDropdown("about")}
className="hover:text-gray-300 transition-colors duration-300"
>
<div className="flex items-center gap-1">
About{" "}
<svg
fill="#ffffff"
width="20px"
height="20px"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
stroke="#ffffff"
>
<path d="M11.125 16.313l7.688-7.688 3.594 3.719-11.094 11.063-11.313-11.313 3.5-3.531z"></path>
</svg>
</div>
</button>
{dropdown === "about" && (
<div className="absolute top-full left-0 mt-2 bg-white text-black py-2 rounded shadow-md w-48 z-50">
<Link
href="/"
className="block px-4 py-2 hover:bg-gray-100 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
About Our App
</Link>
</div>
)}
</div>
</div>

Expand Down
Binary file added public/bg.mp4
View file
Binary file not shown.
Binary file added public/dis_bg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0ec33fa

Please sign in to comment.