Merge pull request #26 from sddevx/floating-talk-request-widget

Added global site config and a floating Give a Talk CTA
DEVxNetwork · Sep 27, 2024 · 6191ff1 · 6191ff1
2 parents e9ef9a7 + ad53b54
commit 6191ff1
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 37 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,19 +1,16 @@
+import { links } from "../siteConfig"
+
 const Footer = () => {
 	return (
-		<footer className="footer flex justify-between bg-neutral text-neutral-content p-4">
-			<aside className="flex devx-logo-copyright">
+		<footer className="footer flex items-center p-4  justify-between bg-neutral text-neutral-content p-4">
+			<aside className="flex items-center devx-logo-copyright">
 				<img src="/images/logo.jpeg" className="w-8 rounded mr-2" />
 				<p className="flex items-center">
 					© Copyright {new Date().getFullYear()}. All rights reserved
 				</p>
 			</aside>
-			<nav className="flex">
-				<a
-					href="https://www.youtube.com/@sddevx"
-					aria-label="Youtube"
-					className="mr-4"
-					target="_blank"
-				>
+			<nav className="flex grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+				<a href={links.youtube} aria-label="Youtube" className="mr-4" target="_blank">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="24"
@@ -25,7 +22,7 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a href="https://lu.ma/DEVxSD" aria-label="Luma" className="mr-4" target="_blank">
+				<a href={links.lumaUrl} aria-label="Luma" className="mr-4" target="_blank">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
@@ -41,12 +38,7 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a
-					href="https://www.meetup.com/san-diego-devx/"
-					aria-label="Meetup"
-					className="mr-4"
-					target="_blank"
-				>
+				<a href={links.meetupUrl} aria-label="Meetup" className="mr-4" target="_blank">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="24"
@@ -61,12 +53,7 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a
-					href="https://discord.gg/J3YrrErwjc"
-					aria-label="Discord"
-					className="mr-4"
-					target="_blank"
-				>
+				<a href={links.discord} aria-label="Discord" className="mr-4" target="_blank">
 					<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
 						<path
 							fill="currentColor"
@@ -75,7 +62,7 @@ const Footer = () => {
 					</svg>
 				</a>
 
-				<a href="https://github.com/sddevx" aria-label="Github" target="_blank">
+				<a href={links.github} aria-label="Github" target="_blank">
 					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
 						<path
 							fill="currentColor"

diff --git a/app/components/GiveATalkCTA.tsx b/app/components/GiveATalkCTA.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+import { links } from "../siteConfig"
+
+const GiveATalkCTA: React.FC = () => {
+	return (
+		<a
+			href={links.talkSubmissionUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="fixed flex items-center px-6 py-3 space-x-2 font-bold text-white transition-all duration-300 ease-in-out transform -translate-x-1/2 rounded-full shadow-lg bg-gradient-to-r from-blue-500 to-purple-600 sm:bottom-12 bottom-6 left-1/2 hover:from-blue-600 hover:to-purple-700 hover:scale-105 animate-pulse"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				className="w-6 h-6"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					strokeWidth={2}
+					d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
+				/>
+			</svg>
+			<span>Give a Talk!</span>
+		</a>
+	)
+}
+
+export default GiveATalkCTA
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -1,3 +1,5 @@
+import { links } from "../siteConfig"
+
 const Header = () => {
 	return (
 		<header>
@@ -7,7 +9,7 @@ const Header = () => {
 						<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								className="h-5 w-5"
+								className="w-5 h-5"
 								fill="none"
 								viewBox="0 0 24 24"
 								stroke="currentColor"
@@ -27,17 +29,17 @@ const Header = () => {
 							<NavLinks />
 						</ul>
 					</div>
-					<a className="btn btn-ghost inline p-0" href="/">
+					<a className="inline p-0 btn btn-ghost" href="/">
 						<img src="/images/logo.jpeg" className="w-12 rounded" />
 					</a>
 				</div>
-				<div className="navbar-center hidden lg:flex">
-					<ul className="menu menu-horizontal px-1">
+				<div className="hidden navbar-center lg:flex">
+					<ul className="px-1 menu menu-horizontal">
 						<NavLinks />
 					</ul>
 				</div>
 				<div className="navbar-end">
-					<a className="btn" href="https://discord.gg/J3YrrErwjc">
+					<a className="btn" href={links.discord}>
 						Join Us on Discord
 					</a>
 				</div>
@@ -56,7 +58,7 @@ const NavLinks = () => {
 				<a href="/about">About</a>
 			</li>
 			<li>
-				<a target="_blank" href="https://lu.ma/DEVxSD">
+				<a target="_blank" href={links.lumaUrl}>
 					Event Calendar
 				</a>
 			</li>
@@ -65,8 +67,8 @@ const NavLinks = () => {
 				<a href="/events">Events</a>
 			</li> */}
 			<li>
-				<a target="_blank" href="https://forms.gle/6gtGEuL7XExHvc6c9">
-					Submit Your Talk
+				<a target="_blank" href={links.talkSubmissionUrl}>
+					Give a Talk!
 				</a>
 			</li>
 		</>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,16 +3,18 @@ import type { Metadata } from "next"
 import "./globals.css"
 import Header from "./components/Header"
 import Footer from "./components/Footer"
+import { siteConfig } from "./siteConfig"
+import GiveATalkCTA from "./components/GiveATalkCTA"
 
 export const metadata: Metadata = {
-	title: "San Diego DEVx",
-	description: "Fostering developer community through events and open-source projects.",
+	title: siteConfig.title,
+	description: siteConfig.description,
 	openGraph: {
 		type: "website",
-		url: "https://devx.network",
-		title: "San Diego DEVx",
-		description: "Fostering developer community through events and open-source projects.",
-		images: "https://devx.network/images/devx-og-image.png"
+		url: siteConfig.url,
+		title: siteConfig.title,
+		description: siteConfig.description,
+		images: siteConfig.ogImage
 	}
 }
 
@@ -27,6 +29,7 @@ export default function RootLayout({
 				<Header />
 				{children}
 				<Footer />
+				<GiveATalkCTA />
 			</body>
 		</html>
 	)

diff --git a/app/siteConfig.ts b/app/siteConfig.ts
@@ -0,0 +1,15 @@
+export const siteConfig = {
+	title: "San Diego DEVx",
+	description: "Fostering developer community through events and open-source projects.",
+	url: "https://devx.network",
+	ogImage: "https://devx.network/images/devx-og-image.png"
+}
+
+export const links = {
+	talkSubmissionUrl: "https://forms.gle/6gtGEuL7XExHvc6c9",
+	meetupUrl: "https://meetup.com/san-diego-devx",
+	lumaUrl: "https://lu.ma/DEVxSD",
+	discord: "https://discord.gg/J3YrrErwjc",
+	github: "https://github.com/sddevx",
+	youtube: "https://www.youtube.com/@sddevx"
+}