Merge pull request #775 from elammertsma/dev

[IMPR] Multiple website changes, pricing, features, fixes, default theme

surfsense_web/app/layout.tsx

@@ -101,7 +101,7 @@ export default function RootLayout({
 								attribute="class"
 								enableSystem
 								disableTransitionOnChange
-								defaultTheme="light"
+								defaultTheme="system"
 							>
 								<RootProvider>
 									<ReactQueryClientProvider>

surfsense_web/components/contact/contact-form.tsx

@@ -20,7 +20,10 @@ export function ContactFormGridWithDetails() {
 					Contact
 				</h2>
 				<p className="mt-8 max-w-lg text-center text-base text-neutral-600 dark:text-neutral-400">
-					We'd love to hear from you. Schedule a meeting or send us an email.
+					We'd love to hear from you!
+				</p>
+				<p className="mt-4 max-w-lg text-center text-base text-neutral-600 dark:text-neutral-400">
+					Schedule a meeting with our Head of Product, Eric Lammertsma, or send us an email.
 				</p>
 
 				<div className="mt-10 flex flex-col items-center gap-6">

surfsense_web/components/homepage/features-card.tsx

@@ -61,7 +61,7 @@ export function FeaturesCards() {
 
 						<CardContent>
 							<p className="text-sm">
-								Choose from 100+ leading LLMs and seamlessly call any model on demand.
+								Choose from 100+ leading LLMs, seamlessly calling any model on demand. Even run on-prem with local LLMs like vLLM and Ollama.
 							</p>
 						</CardContent>
 					</Card>

surfsense_web/components/homepage/hero-section.tsx

@@ -205,8 +205,8 @@ function ContactSalesButton() {
 	return (
 		<motion.div whileHover={{ scale: 1.02, y: -2 }} whileTap={{ scale: 0.98 }}>
 			<Link
-				href="https://calendly.com/eric-surfsense/surfsense-meeting"
+				href="/contact"
-				target="_blank"
+				//target="_blank"
 				rel="noopener noreferrer"
 				className="group relative z-20 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-white px-6 py-2.5 text-sm font-semibold text-neutral-700 shadow-lg ring-1 ring-neutral-200/50 transition-shadow duration-300 hover:shadow-xl sm:w-56 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50"
 			>
@@ -288,7 +288,7 @@ const CollisionMechanism = React.forwardRef<
 			}
 		};
 
-		const animationInterval = setInterval(checkCollision, 50);
+		const animationInterval = setInterval(checkCollision, 100);
 
 		return () => clearInterval(animationInterval);
 	}, [cycleCollisionDetected, containerRef]);
@@ -338,7 +338,7 @@ const CollisionMechanism = React.forwardRef<
 					repeatDelay: beamOptions.repeatDelay || 0,
 				}}
 				className={cn(
-					"absolute left-96 top-20 m-auto h-14 w-px rounded-full bg-linear-to-t from-orange-500 via-yellow-500 to-transparent",
+					"absolute left-96 top-20 m-auto h-14 w-px rounded-full bg-linear-to-t from-orange-500 via-yellow-500 to-transparent will-change-transform",
 					beamOptions.className
 				)}
 			/>

surfsense_web/components/homepage/navbar.tsx

@@ -19,10 +19,9 @@ export const Navbar = () => {
 	const [isScrolled, setIsScrolled] = useState(false);
 
 	const navItems = [
-		{ name: "Contact Us", link: "/contact" },
 		{ name: "Pricing", link: "/pricing" },
+		{ name: "Contact\u00A0Us", link: "/contact" },
 		{ name: "Changelog", link: "/changelog" },
-		// { name: "Sign In", link: "/login" },
 		{ name: "Docs", link: "/docs" },
 	];
 
@@ -61,10 +60,10 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 					: "bg-transparent border border-transparent"
 			)}
 		>
-			<div className="flex flex-1 flex-row items-center gap-0.5">
+			<Link href="/" className="flex flex-1 flex-row items-center gap-0.5 hover:opacity-80 transition-opacity">
 				<Logo className="h-8 w-8 rounded-md" />
 				<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
-			</div>
+			</Link>
 			<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
@@ -139,10 +138,10 @@ const MobileNav = ({ navItems, isScrolled }: any) => {
 			)}
 		>
 			<div className="flex w-full flex-row items-center justify-between">
-				<div className="flex flex-row items-center gap-2">
+				<Link href="/" className="flex flex-row items-center gap-2 hover:opacity-80 transition-opacity">
 					<Logo className="h-8 w-8 rounded-md" />
 					<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
-				</div>
+				</Link>
 				<button
 					type="button"
 					onClick={() => setOpen(!open)}

surfsense_web/components/pricing.tsx

@@ -33,7 +33,7 @@ interface PricingProps {
 export function Pricing({
 	plans,
 	title = "Simple, Transparent Pricing",
-	description = "Choose the plan that works for you\nAll plans include access to our platform, lead generation tools, and dedicated support.",
+	description = "Choose the plan that works for you\nAll plans include access to our SurfSense AI workspace and community support.",
 }: PricingProps) {
 	const [isMonthly, setIsMonthly] = useState(true);
 	const isDesktop = useMediaQuery("(min-width: 768px)");
@@ -69,7 +69,7 @@ export function Pricing({
 	};
 
 	return (
-		<div className="container py-20">
+		<div className="container mx-auto py-20">
 			<div className="text-center space-y-4 mb-12">
 				<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">{title}</h2>
 				<p className="text-muted-foreground text-lg whitespace-pre-line">{description}</p>

surfsense_web/components/pricing/pricing-section.tsx

@@ -9,20 +9,39 @@ const demoPlans = [
 		yearlyPrice: "0",
 		period: "forever",
 		features: [
+			"Community support",
 			"Supports 100+ LLMs",
-			"Supports local Ollama or vLLM setups",
+			"Supports OpenAI spec and LiteLLM",
-			"6000+ Embedding Models",
+			"Supports local vLLM or Ollama setups",
+			"6000+ embedding models",
 			"50+ File extensions supported.",
 			"Podcasts support with local TTS providers.",
-			"Connects with 15+ external sources.",
+			"Connects with 15+ external sources, like Drive and Notion.",
 			"Cross-Browser Extension for dynamic webpages including authenticated content",
-			"Role-based access permissions",
+			"Role-based access control (RBAC)",
-			"Collaboration and multiplayer features",
+			"Collaboration and team features",
-			"Upcoming: Note Management",
 		],
 		description: "Open source version with powerful features",
-		buttonText: "Get Started",
+		buttonText: "Dive In",
 		href: "/docs",
+		isPopular: false,
+	},
+	{
+		name: "CLOUD",
+		price: "0",
+		yearlyPrice: "0",
+		period: "in beta",
+		features: [
+			"Everything in Community",
+			"Email support",
+			"Get started in seconds",
+			"Instant access to new features",
+			"Easy access from anywhere",
+			"Remote team management and collaboration",
+		],
+		description: "Instant access for individuals and teams",
+		buttonText: "Get Started",
+		href: "/",
 		isPopular: true,
 	},
 	{
@@ -32,13 +51,16 @@ const demoPlans = [
 		period: "",
 		features: [
 			"Everything in Community",
-			"Priority Support",
+			"Priority support",
-			"Advanced security features",
+			"White-glove setup and deployment",
+			"Monthly managed updates and maintenance",
+			"On-prem or VPC deployment",
 			"Audit logs and compliance",
 			"SSO, OIDC & SAML",
 			"SLA guarantee",
+			"Uptime guarantee on VPC",
 		],
-		description: "For large organizations with specific needs",
+		description: "Professional, customized setup for large organizations",
 		buttonText: "Contact Sales",
 		href: "/contact",
 		isPopular: false,
@@ -47,7 +69,7 @@ const demoPlans = [
 
 function PricingBasic() {
 	return (
-		<Pricing plans={demoPlans} title="SurfSense Pricing" description="Choose that works for you" />
+		<Pricing plans={demoPlans} title="SurfSense Pricing" description="Choose what works for you" />
 	);
 }