Redesigned homepage with large animated hero

DEVxNetwork · Aug 24, 2024 · 6782761 · 6782761
1 parent 3fa19e2
commit 6782761
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 27 deletions.
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -22,7 +22,7 @@ const Header = () => {
 						</div>
 						<ul
 							tabIndex={0}
-							className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+							className="menu menu-lg dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
 						>
 							<NavLinks />
 						</ul>

diff --git a/app/components/PotionBackground.tsx b/app/components/PotionBackground.tsx
@@ -0,0 +1,68 @@
+import React from "react"
+
+export const PotionBackground = () => {
+	return (
+		<div
+			style={{
+				backgroundColor: "black",
+				width: "100%",
+				height: "100%",
+				overflow: "hidden",
+				position: "fixed",
+				top: 0,
+				left: 0
+			}}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 100 100"
+				preserveAspectRatio="none"
+				style={{ width: "100%", height: "100%" }}
+			>
+				<defs>
+					<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+						<feGaussianBlur in="SourceGraphic" stdDeviation="6" />
+					</filter>
+					<radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+						<stop offset="0%" stopColor="#E2ABFF71" />
+						<stop offset="99%" stopColor="#3AF79B96" />
+						<stop offset="100%" stopColor="#3AF79B00" />
+					</radialGradient>
+					<radialGradient id="gradient2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+						<stop offset="0%" stopColor="#3B69FF4F" />
+						<stop offset="72%" stopColor="#3A66F770" />
+						<stop offset="100%" stopColor="#3A66F700" />
+					</radialGradient>
+					<radialGradient id="gradient3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+						<stop offset="0%" stopColor="#FF3BEB" />
+						<stop offset="72%" stopColor="#3A9EF7A8" />
+						<stop offset="100%" stopColor="#3A9EF700" />
+					</radialGradient>
+				</defs>
+				<g filter="url(#blur)" opacity={"60%"}>
+					<circle cx="0" cy="0" r="70" fill="url(#gradient1)">
+						<animateMotion
+							path="M 90,10 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
+							dur="16s"
+							repeatCount="indefinite"
+						/>
+					</circle>
+					<circle cx="0" cy="0" r="70" fill="url(#gradient2)">
+						<animateMotion
+							path="M 50,50 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
+							dur="24s"
+							repeatCount="indefinite"
+						/>
+					</circle>
+					<circle cx="0" cy="0" r="70" fill="url(#gradient3)">
+						<animateMotion
+							path="M 10,90 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
+							dur="32s"
+							repeatCount="indefinite"
+						/>
+					</circle>
+				</g>
+			</svg>
+		</div>
+	)
+}
diff --git a/app/globals.css b/app/globals.css
@@ -7,3 +7,14 @@
 		color-scheme: dark;
 	}
 }
+
+header {
+	position: relative;
+	z-index: 10;
+}
+
+footer,
+main {
+	position: relative;
+	z-index: 1;
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,26 +1,31 @@
 import React from "react"
+import { PotionBackground } from "./components/PotionBackground"
 
 const Home: React.FC = () => {
 	return (
-		<main className="p-8 bg-gray-900 min-h-screen text-white">
-			<section className="relative mb-12">
-				<img
-					src="/images/logo.jpeg"
-					alt="Developer meetup hero"
-					className="w-full h-[50rem] object-cover rounded-lg shadow-md opacity-75"
-				/>
-			</section>
+		<>
+			<PotionBackground />
+			<main className="p-8 min-h-screen text-white flex flex-col items-center justify-center">
+				<section className="relative">
+					<img
+						src="/images/sd-devx-brand.png"
+						alt="Developer meetup hero"
+						style={{
+							width: "100%",
+							maxWidth: "512px",
+							margin: "0 auto"
+						}}
+					/>
+				</section>
 
-			<section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
-				<h2 className="text-3xl font-bold mb-4 text-center">Join us</h2>
-				<div className="w-full flex justify-center">
-					<p className="mt-2 text-xl text-center max-w-screen-lg">
-						Fostering developer community through meetups and open-source projects in California.
+				<section className="p-12 rounded-lg mb-12">
+					<p className="text-xl text-center max-w-screen-lg">
+						Fostering developer community through events and open-source projects in San Diego,
+						California.
 					</p>
-				</div>
-			</section>
+				</section>
 
-			{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
+				{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
 				<h2 className="text-3xl font-bold mb-4 text-center">Past Events</h2>
 				<div className="w-full flex justify-center">
 					<p className="mt-2 text-xl text-center max-w-screen-lg">
@@ -30,16 +35,17 @@ const Home: React.FC = () => {
 				</div>
 			</section> */}
 
-			<section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
-				<h2 className="text-3xl font-bold mb-4 text-center">Sponsors</h2>
-				<div className="w-full flex justify-center">
-					<p className="mt-2 text-xl text-center max-w-screen-lg">
-						We are grateful for our sponsors who make our events possible. Interested in sponsoring?
-						Reach out to us on Discord/Meetup or at the event.
-					</p>
-				</div>
-			</section>
-		</main>
+				{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
+					<h2 className="text-3xl font-bold mb-4 text-center">Sponsors</h2>
+					<div className="w-full flex justify-center">
+						<p className="mt-2 text-xl text-center max-w-screen-lg">
+							We are grateful for our sponsors who make our events possible. Interested in
+							sponsoring? Reach out to us on Discord/Meetup or at the event.
+						</p>
+					</div>
+				</section> */}
+			</main>
+		</>
 	)
 }
 

diff --git a/public/images/sd-devx-brand.png b/public/images/sd-devx-brand.png