From 209cd248de20950abb184815d9804235d485c313 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oj=C4=81rs=20Kapteinis?= <ojars@kapteinis.lv>
Date: Mon, 17 Nov 2025 22:00:53 +0200
Subject: [PATCH] Implement minimal privacy-focused frontend UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complete frontend rework according to requirements:

REMOVED FROM NAVIGATION:
- All navigation links (Pricing, Docs)
- Discord and GitHub icons/links
- Sign In button from navbar
- Mobile menu with all its links

REMOVED FROM HOMEPAGE:
- Get Started button from hero section
- FeaturesCards component
- FeaturesBentoGrid component
- ExternalIntegrations component
- CTAHomepage component (Talk to us button)

REMOVED FROM FOOTER:
- Privacy and Terms links
- All Pages section navigation

AUTHENTICATION CHANGES:
- Removed Google OAuth option
- Forced email/password authentication only
- Removed GoogleLoginButton import and usage
- Set authType to always be "EMAIL"

WHAT REMAINS:
- Minimal navbar with only SurfSense logo and theme toggler
- Hero section with title "Let's Start Surfing" and tagline
- Footer with SurfSense name and social media links:
  * Mastodon: https://kapteinis.lv/@ojars
  * Pixelfed: https://pixel.kapteinis.lv/ojars
  * Bookwyrm: https://book.kapteinis.lv/user/ojars

Result: Clean, minimal, privacy-focused UI with 207 lines removed.
Only essential elements remain for personal knowledge base deployment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 surfsense_web/app/(home)/login/page.tsx       |  10 +-
 surfsense_web/app/(home)/page.tsx             |  10 +-
 surfsense_web/components/homepage/footer.tsx  |  21 ---
 .../components/homepage/hero-section.tsx      |  16 +-
 surfsense_web/components/homepage/navbar.tsx  | 174 ++----------------
 5 files changed, 24 insertions(+), 207 deletions(-)

diff --git a/surfsense_web/app/(home)/login/page.tsx b/surfsense_web/app/(home)/login/page.tsx
index 29455d388..0c029a193 100644
--- a/surfsense_web/app/(home)/login/page.tsx
+++ b/surfsense_web/app/(home)/login/page.tsx
@@ -9,7 +9,6 @@ import { toast } from "sonner";
 import { Logo } from "@/components/Logo";
 import { getAuthErrorDetails, shouldRetry } from "@/lib/auth-errors";
 import { AmbientBackground } from "./AmbientBackground";
-import { GoogleLoginButton } from "./GoogleLoginButton";
 import { LocalLoginForm } from "./LocalLoginForm";
 
 function LoginContent() {
@@ -82,8 +81,8 @@ function LoginContent() {
 			});
 		}
 
-		// Get the auth type from environment variables
-		setAuthType(process.env.NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE || "GOOGLE");
+		// Force email/password authentication only
+		setAuthType("EMAIL");
 		setIsLoading(false);
 	}, [searchParams]);
 
@@ -103,10 +102,7 @@ function LoginContent() {
 		);
 	}
 
-	if (authType === "GOOGLE") {
-		return <GoogleLoginButton />;
-	}
-
+	// Always use email/password authentication
 	return (
 		<div className="relative w-full overflow-hidden">
 			<AmbientBackground />
diff --git a/surfsense_web/app/(home)/page.tsx b/surfsense_web/app/(home)/page.tsx
index 8f85774ac..b7773f7a2 100644
--- a/surfsense_web/app/(home)/page.tsx
+++ b/surfsense_web/app/(home)/page.tsx
@@ -1,21 +1,13 @@
 "use client";
 
-import { CTAHomepage } from "@/components/homepage/cta";
-import { FeaturesBentoGrid } from "@/components/homepage/features-bento-grid";
-import { FeaturesCards } from "@/components/homepage/features-card";
 import { Footer } from "@/components/homepage/footer";
 import { HeroSection } from "@/components/homepage/hero-section";
-import ExternalIntegrations from "@/components/homepage/integrations";
-import { Navbar } from "@/components/homepage/navbar";
 
 export default function HomePage() {
 	return (
 		<main className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white">
 			<HeroSection />
-			<FeaturesCards />
-			<FeaturesBentoGrid />
-			<ExternalIntegrations />
-			<CTAHomepage />
+			<Footer />
 		</main>
 	);
 }
diff --git a/surfsense_web/components/homepage/footer.tsx b/surfsense_web/components/homepage/footer.tsx
index 872576679..80155e2e9 100644
--- a/surfsense_web/components/homepage/footer.tsx
+++ b/surfsense_web/components/homepage/footer.tsx
@@ -9,17 +9,6 @@ import type React from "react";
 import { cn } from "@/lib/utils";
 
 export function Footer() {
-	const pages = [
-		{
-			title: "Privacy",
-			href: "/privacy",
-		},
-		{
-			title: "Terms",
-			href: "/terms",
-		},
-	];
-
 	return (
 		<div className="border-t border-neutral-100 dark:border-white/[0.1] px-8 py-20 w-full relative overflow-hidden">
 			<div className="max-w-7xl mx-auto text-sm text-neutral-500 justify-between items-start md:px-8">
@@ -30,16 +19,6 @@ export function Footer() {
 						</div>
 					</div>
 
-					<ul className="transition-colors flex sm:flex-row flex-col hover:text-text-neutral-800 text-neutral-600 dark:text-neutral-300 list-none gap-4">
-						{pages.map((page) => (
-							<li key={`pages-${page.title}`} className="list-none">
-								<Link className="transition-colors hover:text-text-neutral-800" href={page.href}>
-									{page.title}
-								</Link>
-							</li>
-						))}
-					</ul>
-
 					<GridLineHorizontal className="max-w-7xl mx-auto mt-8" />
 				</div>
 				<div className="flex sm:flex-row flex-col justify-between mt-8 items-center w-full">
diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx
index 830079630..aea23b4b8 100644
--- a/surfsense_web/components/homepage/hero-section.tsx
+++ b/surfsense_web/components/homepage/hero-section.tsx
@@ -66,23 +66,9 @@ export function HeroSection() {
 					</div>
 				</Balancer>
 			</h2>
-			<p className="relative z-50 mx-auto mt-4 max-w-lg px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
+			<p className="relative z-50 mx-auto mt-4 max-w-lg px-4 text-center text-base/6 text-gray-600 dark:text-gray-200 mb-10 md:mb-20">
 				Your AI-powered research agent and personal knowledge base. Connect any LLM to your data sources and explore information like never before.
 			</p>
-			<div className="mb-10 mt-8 flex w-full flex-col items-center justify-center gap-4 px-8 sm:flex-row md:mb-20">
-				<Link
-					href="/login"
-					className="group relative z-20 flex h-10 w-full cursor-pointer items-center justify-center space-x-2 rounded-lg bg-black p-px px-4 py-2 text-center text-sm font-semibold leading-6 text-white no-underline transition duration-200 sm:w-52 dark:bg-white dark:text-black"
-				>
-					Get Started
-				</Link>
-				{/* <Link
-					href="/pricing"
-					className="shadow-input group relative z-20 flex h-10 w-full cursor-pointer items-center justify-center space-x-2 rounded-lg bg-white p-px px-4 py-2 text-sm font-semibold leading-6 text-black no-underline transition duration-200 hover:-translate-y-0.5 sm:w-52 dark:bg-neutral-800 dark:text-white"
-				>
-					Start Free Trial
-				</Link> */}
-			</div>
 			<div
 				ref={containerRef}
 				className="relative mx-auto max-w-7xl rounded-[32px] border border-neutral-200/50 bg-neutral-100 p-2 backdrop-blur-lg md:p-4 dark:border-neutral-700 dark:bg-neutral-800/50"
diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index 2b7fe9fd9..3b0e0aa95 100644
--- a/surfsense_web/components/homepage/navbar.tsx
+++ b/surfsense_web/components/homepage/navbar.tsx
@@ -1,23 +1,13 @@
 "use client";
-import { IconBrandDiscord, IconBrandGithub, IconMenu2, IconX } from "@tabler/icons-react";
-import { AnimatePresence, motion } from "motion/react";
-import Link from "next/link";
+import { motion } from "motion/react";
 import React, { useEffect, useState } from "react";
 import { Logo } from "@/components/Logo";
 import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
-import { useGithubStars } from "@/hooks/use-github-stars";
 import { cn } from "@/lib/utils";
 
 export const Navbar = () => {
 	const [isScrolled, setIsScrolled] = useState(false);
 
-	const navItems = [
-		// { name: "Home", link: "/" },
-		{ name: "Pricing", link: "/pricing" },
-		// { name: "Sign In", link: "/login" },
-		{ name: "Docs", link: "/docs" },
-	];
-
 	useEffect(() => {
 		if (typeof window === "undefined") return;
 
@@ -32,20 +22,15 @@ export const Navbar = () => {
 
 	return (
 		<div className="fixed top-1 left-0 right-0 z-[60] w-full">
-			<DesktopNav navItems={navItems} isScrolled={isScrolled} />
-			<MobileNav navItems={navItems} isScrolled={isScrolled} />
+			<DesktopNav isScrolled={isScrolled} />
+			<MobileNav isScrolled={isScrolled} />
 		</div>
 	);
 };
 
-const DesktopNav = ({ navItems, isScrolled }: any) => {
-	const [hovered, setHovered] = useState<number | null>(null);
-	const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
+const DesktopNav = ({ isScrolled }: any) => {
 	return (
 		<motion.div
-			onMouseLeave={() => {
-				setHovered(null);
-			}}
 			className={cn(
 				"mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full px-4 py-2 lg:flex transition-all duration-300",
 				isScrolled
@@ -57,149 +42,28 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 				<Logo className="h-8 w-8 rounded-md" />
 				<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
 			</div>
-			<div className="hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2">
-				{navItems.map((navItem: any, idx: number) => (
-					<Link
-						onMouseEnter={() => setHovered(idx)}
-						onMouseLeave={() => setHovered(null)}
-						className="relative px-4 py-2 text-neutral-600 dark:text-neutral-300"
-						key={`link=${idx}`}
-						href={navItem.link}
-					>
-						{hovered === idx && (
-							<motion.div
-								layoutId="hovered"
-								className="absolute inset-0 h-full w-full rounded-full bg-gray-100 dark:bg-neutral-800"
-							/>
-						)}
-						<span className="relative z-20">{navItem.name}</span>
-					</Link>
-				))}
-			</div>
 			<div className="flex flex-1 items-center justify-end gap-2">
-				<Link
-					href="https://discord.gg/ejRNvftDp9"
-					target="_blank"
-					rel="noopener noreferrer"
-					className="hidden rounded-full p-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors md:flex items-center justify-center"
-				>
-					<IconBrandDiscord className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-				</Link>
-				<Link
-					href="https://github.com/MODSetter/SurfSense"
-					target="_blank"
-					rel="noopener noreferrer"
-					className="hidden rounded-full px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors md:flex items-center gap-1.5"
-				>
-					<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-					{loadingGithubStars ? (
-						<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
-					) : (
-						<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
-							{githubStars}
-						</span>
-					)}
-				</Link>
 				<ThemeTogglerComponent />
-				<Link
-					href="/login"
-					className="hidden rounded-full bg-black px-8 py-2 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] md:block dark:bg-white dark:text-black"
-				>
-					Sign In
-				</Link>
 			</div>
 		</motion.div>
 	);
 };
 
-const MobileNav = ({ navItems, isScrolled }: any) => {
-	const [open, setOpen] = useState(false);
-	const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
-
+const MobileNav = ({ isScrolled }: any) => {
 	return (
-		<>
-			<motion.div
-				animate={{ borderRadius: open ? "4px" : "2rem" }}
-				key={String(open)}
-				className={cn(
-					"mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
-					isScrolled
-						? "bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50"
-						: "bg-transparent border border-transparent"
-				)}
-			>
-				<div className="flex w-full flex-row items-center justify-between">
-					<div className="flex flex-row items-center gap-2">
-						<Logo className="h-8 w-8 rounded-md" />
-						<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
-					</div>
-					<button
-						type="button"
-						onClick={() => setOpen(!open)}
-						className="relative z-50 flex items-center justify-center p-2 -mr-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
-						aria-label={open ? "Close menu" : "Open menu"}
-					>
-						{open ? (
-							<IconX className="h-6 w-6 text-black dark:text-white" />
-						) : (
-							<IconMenu2 className="h-6 w-6 text-black dark:text-white" />
-						)}
-					</button>
-				</div>
-
-				<AnimatePresence>
-					{open && (
-						<motion.div
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							exit={{ opacity: 0 }}
-							className="absolute inset-x-0 top-16 z-20 flex w-full flex-col items-start justify-start gap-4 rounded-lg bg-white/80 backdrop-blur-md border border-white/20 shadow-lg px-4 py-8 dark:bg-neutral-950/80 dark:border-neutral-800/50"
-						>
-							{navItems.map((navItem: any, idx: number) => (
-								<Link
-									key={`link=${idx}`}
-									href={navItem.link}
-									className="relative text-neutral-600 dark:text-neutral-300"
-								>
-									<motion.span className="block">{navItem.name} </motion.span>
-								</Link>
-							))}
-							<div className="flex w-full items-center gap-2 pt-2">
-								<Link
-									href="https://discord.gg/ejRNvftDp9"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="flex items-center justify-center rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
-								>
-									<IconBrandDiscord className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-								</Link>
-								<Link
-									href="https://github.com/MODSetter/SurfSense"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="flex items-center gap-1.5 rounded-lg px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
-								>
-									<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-									{loadingGithubStars ? (
-										<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
-									) : (
-										<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
-											{githubStars}
-										</span>
-									)}
-								</Link>
-								<ThemeTogglerComponent />
-							</div>
-							<Link
-								href="/login"
-								className="w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black text-center touch-manipulation"
-							>
-								Sign In
-							</Link>
-						</motion.div>
-					)}
-				</AnimatePresence>
-			</motion.div>
-		</>
+		<motion.div
+			className={cn(
+				"mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-row items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
+				isScrolled
+					? "bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50"
+					: "bg-transparent border border-transparent"
+			)}
+		>
+			<div className="flex flex-row items-center gap-2">
+				<Logo className="h-8 w-8 rounded-md" />
+				<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
+			</div>
+			<ThemeTogglerComponent />
+		</motion.div>
 	);
 };