Merge pull request #19 from sddevx/sam/updates

Sam/updates
DEVxNetwork · Aug 24, 2024 · 90b6434 · 90b6434
2 parents c729175 + 6782761
commit 90b6434
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 208 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-	"extends": ["next/core-web-vitals", "plugin:prettier/recommended"]
+	"extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
+	"rules": {
+		"@next/next/no-img-element": "off"
+	}
 }
diff --git a/app/lib/components/Footer.tsx → app/components/Footer.tsx b/app/lib/components/Footer.tsx → app/components/Footer.tsx
diff --git a/app/lib/components/Header.tsx → app/components/Header.tsx b/app/lib/components/Header.tsx → app/components/Header.tsx
@@ -22,20 +22,9 @@ 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"
 						>
-							<li>
-								<a href="/">Home</a>
-							</li>
-							<li>
-								<a href="/about">About</a>
-							</li>
-							<li>
-								<a href="/join">Join</a>
-							</li>
-							<li>
-								<a href="/talk">Talk</a>
-							</li>
+							<NavLinks />
 						</ul>
 					</div>
 					<a className="btn btn-ghost inline p-0" href="/">
@@ -44,28 +33,38 @@ const Header = () => {
 				</div>
 				<div className="navbar-center hidden lg:flex">
 					<ul className="menu menu-horizontal px-1">
-						<li>
-							<a href="/">Home</a>
-						</li>
-						<li>
-							<a href="/about">About</a>
-						</li>
-						<li>
-							<a href="/join">Join</a>
-						</li>
-						<li>
-							<a href="/talk">Talk</a>
-						</li>
+						<NavLinks />
 					</ul>
 				</div>
 				<div className="navbar-end">
-					<a className="btn" href="/join">
-						Join Us
+					<a className="btn" href="https://discord.gg/J3YrrErwjc">
+						Join Us on Discord
 					</a>
 				</div>
 			</nav>
 		</header>
 	)
 }
 
+const NavLinks = () => {
+	return (
+		<>
+			<li>
+				<a href="/">Home</a>
+			</li>
+			<li>
+				<a href="/about">About</a>
+			</li>
+			<li>
+				<a href="/events">Events</a>
+			</li>
+			<li>
+				<a target="_blank" href="https://forms.gle/6gtGEuL7XExHvc6c9">
+					Submit Your Talk
+				</a>
+			</li>
+		</>
+	)
+}
+
 export default Header
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/events/page.tsx b/app/events/page.tsx
@@ -0,0 +1,68 @@
+export default function Join() {
+	return (
+		<main>
+			<section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
+				<h2 className="text-3xl font-bold mb-4 text-center">Current Events</h2>
+				<div className="w-full flex flex-col items-center">
+					<p className="mt-2  text-xl text-center max-w-screen-lg mb-12">
+						Stay updated with our latest events, workshops, and meetups. Join us to network and
+						learn with fellow developers.
+					</p>
+					<div className="flex justify-center gap-6 w-full">
+						<div
+							className="flex flex-col items-center flex-1 "
+							style={{ flexBasis: "50%", height: "600px", overflow: "hidden" }}
+						>
+							<h2 className="text-3xl font-bold mb-4 text-center ">On Lu.ma</h2>
+							<iframe
+								src="https://lu.ma/embed/event/evt-UDB2YUh2bKH152P/simple"
+								width="100%"
+								height="100%"
+								allowFullScreen
+								aria-hidden="false"
+							></iframe>
+						</div>
+						<div
+							className="flex flex-col items-center flex-1"
+							style={{ flexBasis: "50%", height: "600px", overflow: "hidden" }}
+						>
+							<h2 className="text-3xl font-bold mb-4 text-center">On Meetup.com</h2>
+							<a href="https://www.meetup.com/san-diego-devx/events/301885439/?utm_medium=referral&utm_campaign=share-btn_savedevents_share_modal&utm_source=link">
+								<img
+									src="https://secure.meetupstatic.com/photos/event/5/0/b/c/600_519680668.webp?w=384"
+									alt="Meetup Event"
+									style={{
+										width: "100%",
+										height: "600px",
+										objectFit: "cover"
+									}}
+								/>
+							</a>
+						</div>
+					</div>
+				</div>
+				<h2 className="mt-12 text-3xl font-bold mb-4 text-center">Join Our Discord</h2>
+				<div className="w-full flex flex-col items-center">
+					<div className="flex justify-center">
+						<a
+							href="https://discord.gg/rmbT75CB"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="btn btn-primary"
+							style={{
+								backgroundColor: "#5865F2",
+								color: "white",
+								padding: "15px 20px",
+								borderRadius: "1px",
+								textDecoration: "none",
+								display: "inline-block"
+							}}
+						>
+							DEVx Discord
+						</a>
+					</div>
+				</div>
+			</section>
+		</main>
+	)
+}
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/join/page.tsx b/app/join/page.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,8 @@
 import { ReactNode } from "react"
 import type { Metadata } from "next"
-import { Header, Footer } from "@/app/lib/components"
 import "./globals.css"
+import Header from "./components/Header"
+import Footer from "./components/Footer"
 
 export const metadata: Metadata = {
 	title: "San Diego DEVx",

diff --git a/app/lib/components/index.ts b/app/lib/components/index.ts