fix: footer on dark mode

Author: izadoesdev

apps/docs/app/(home)/page.tsx

@@ -1,12 +1,11 @@
+import { Footer } from '@/components/footer';
 import { Description } from '@/components/landing/description';
 import FAQ from '@/components/landing/faq';
-import { FooterNav } from '@/components/landing/footer-nav';
 import { GridCards } from '@/components/landing/grid-cards';
 import Hero from '@/components/landing/hero';
 import Section from '@/components/landing/section';
 import Testimonials from '@/components/landing/testimonials';
 import { TrustedBy } from '@/components/landing/trusted-by';
-import { Wordmark } from '@/components/landing/wordmark';
 
 // async function getGitHubStars() {
 // 	try {
@@ -99,13 +98,8 @@ export default function HomePage() {
 				<div className="mx-auto h-px max-w-6xl bg-gradient-to-r from-transparent via-border/30 to-transparent" />
 			</div>
 
-			{/* Footer Navigation Section */}
-			<Section className="pt-16 lg:pt-20" customPaddings id="footer-nav">
-				<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
-					<FooterNav />
-					<Wordmark />
-				</div>
-			</Section>
+			{/* Footer Section */}
+			<Footer />
 
 			{/* Final Gradient Divider */}
 			<div className="w-full">

apps/docs/app/(home)/pricing/page.tsx

@@ -40,7 +40,7 @@ export default function PricingPage() {
 	);
 
 	return (
-		<div className="px-4 py-10 sm:px-6 lg:px-8">
+		<div className="px-4 pt-10 sm:px-6 lg:px-8">
 			<div className="mx-auto w-full max-w-7xl">
 				<header className="mb-8 text-center sm:mb-10">
 					<h1 className="mb-2 font-bold text-3xl tracking-tight sm:text-4xl">

apps/docs/components/footer.tsx

@@ -1,12 +1,40 @@
+'use client';
+
 import { FaDiscord, FaGithub, FaXTwitter } from 'react-icons/fa6';
 import { IoMdMail } from 'react-icons/io';
+import { SciFiButton } from './landing/scifi-btn';
 import { Wordmark } from './landing/wordmark';
 import { LogoContent } from './logo';
 
 export function Footer() {
+	const handleGetStarted = () => {
+		const newWindow = window.open(
+			'https://app.databuddy.cc/login',
+			'_blank',
+			'noopener,noreferrer'
+		);
+		if (
+			!newWindow ||
+			newWindow.closed ||
+			typeof newWindow.closed === 'undefined'
+		) {
+			// Handle popup blocked case if needed
+		}
+	};
+
 	return (
 		<footer className="border-border border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-			<div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+			<div className="mx-auto max-w-7xl px-4 pt-10 sm:px-6 lg:px-8">
+				{/* CTA Section */}
+				<div className="mb-12 text-center">
+					<h2 className="mb-6 font-medium text-2xl leading-tight sm:text-3xl">
+						You're just one click away.
+					</h2>
+					<div>
+						<SciFiButton onClick={handleGetStarted}>GET STARTED</SciFiButton>
+					</div>
+				</div>
+
 				<div className="grid grid-cols-2 gap-8 sm:gap-10 md:grid-cols-4">
 					<div className="col-span-2 space-y-4 md:col-span-1">
 						<LogoContent />
@@ -80,7 +108,7 @@ export function Footer() {
 						<ul className="space-y-3 text-sm sm:text-base">
 							<li>
 								<a
-									className="flex items-center gap-3 text-muted-foreground hover:text-foreground"
+									className="group flex items-center gap-3 text-muted-foreground hover:text-foreground"
 									href="mailto:[email protected]"
 								>
 									<IoMdMail className="h-5 w-5" />
@@ -89,7 +117,7 @@ export function Footer() {
 							</li>
 							<li>
 								<a
-									className="flex items-center gap-3 text-muted-foreground hover:text-foreground"
+									className="group flex items-center gap-3 text-muted-foreground hover:text-foreground"
 									href="https://discord.gg/JTk7a38tCZ"
 									rel="noopener"
 									target="_blank"
@@ -100,7 +128,7 @@ export function Footer() {
 							</li>
 							<li>
 								<a
-									className="flex items-center gap-3 text-muted-foreground hover:text-foreground"
+									className="group flex items-center gap-3 text-muted-foreground hover:text-foreground"
 									href="https://github.com/databuddy-analytics"
 									rel="noopener"
 									target="_blank"
@@ -111,12 +139,12 @@ export function Footer() {
 							</li>
 							<li>
 								<a
-									className="flex items-center gap-3 text-muted-foreground hover:text-foreground"
+									className="group flex items-center gap-3 text-muted-foreground hover:text-foreground"
 									href="https://x.com/trydatabuddy"
 									rel="noopener"
 									target="_blank"
 								>
-									<FaXTwitter className="h-5 w-5" />X (Twitter)
+									<FaXTwitter className="h-5 w-5" />X
 								</a>
 							</li>
 						</ul>

apps/docs/components/landing/footer-nav.tsx

@@ -12,14 +12,7 @@ import { cn } from '@/lib/utils';
 export const Wordmark = () => {
 	return (
 		<div className="w-full">
-			<div className="flex flex-col items-center gap-8 lg:gap-12">
-				{/* Copyright */}
-				<div className="text-center">
-					<p className="text-muted-foreground text-xs sm:text-sm">
-						Databuddy © 2025
-					</p>
-				</div>
-
+			<div className="flex flex-col items-center gap-8 pt-12 lg:gap-12">
 				{/* Logo SVG */}
 				<div className="flex w-full items-center justify-center overflow-hidden">
 					<div className="max-w-full">