diff --git a/surfsense_web/app/page.tsx b/surfsense_web/app/page.tsx index e5501d35f..dfa0e7587 100644 --- a/surfsense_web/app/page.tsx +++ b/surfsense_web/app/page.tsx @@ -1,7 +1,9 @@ "use client"; import { Footer } from "@/components/Footer"; -import { ModernHeroWithGradients } from "@/components/ModernHeroWithGradients"; +import { CTAHomepage } from "@/components/homepage/cta"; +import { FeaturesBentoGrid } from "@/components/homepage/features-bento-grid"; +import { ModernHeroWithGradients } from "@/components/homepage/ModernHeroWithGradients"; import { Navbar } from "@/components/Navbar"; export default function HomePage() { @@ -9,6 +11,8 @@ export default function HomePage() {
+ +
); diff --git a/surfsense_web/components/ModernHeroWithGradients.tsx b/surfsense_web/components/homepage/ModernHeroWithGradients.tsx similarity index 98% rename from surfsense_web/components/ModernHeroWithGradients.tsx rename to surfsense_web/components/homepage/ModernHeroWithGradients.tsx index 543e1b4eb..bb7a49d74 100644 --- a/surfsense_web/components/ModernHeroWithGradients.tsx +++ b/surfsense_web/components/homepage/ModernHeroWithGradients.tsx @@ -1,12 +1,14 @@ "use client"; import { IconBrandDiscord, IconBrandGithub, IconFileTypeDoc, IconMail } from "@tabler/icons-react"; +import Image from "next/image"; import Link from "next/link"; import { cn } from "@/lib/utils"; -import { Logo } from "./Logo"; +import { Logo } from "../Logo"; +import { Features } from "./features-card"; export function ModernHeroWithGradients() { return ( -
+
@@ -77,6 +79,7 @@ export function ModernHeroWithGradients() {
+
diff --git a/surfsense_web/components/homepage/cta.tsx b/surfsense_web/components/homepage/cta.tsx new file mode 100644 index 000000000..1176c69df --- /dev/null +++ b/surfsense_web/components/homepage/cta.tsx @@ -0,0 +1,110 @@ +"use client"; +import { IconMessageCircleQuestion } from "@tabler/icons-react"; +import Link from "next/link"; +import type React from "react"; +import { cn } from "@/lib/utils"; + +export function CTAHomepage() { + return ( +
+ + + + +
+

+ Transform how your team{" "} + discovers and collaborates +

+

+ Unite your team's knowledge in one collaborative + space with intelligent search. +

+ +
+ + + +
+
+ {/*
+

+ "SurfSense has revolutionized how our team shares and discovers knowledge. + Everyone can contribute and find what they need instantly. True collaboration at scale." +

+
+

+ Sarah Chen +

+

+ Research Lead +

+
+
*/} +
+ ); +} + +const GridLineHorizontal = ({ className, offset }: { className?: string; offset?: string }) => { + return ( +
+ ); +}; + +const GridLineVertical = ({ className, offset }: { className?: string; offset?: string }) => { + return ( +
+ ); +}; diff --git a/surfsense_web/components/homepage/features-bento-grid.tsx b/surfsense_web/components/homepage/features-bento-grid.tsx new file mode 100644 index 000000000..d9a5b7428 --- /dev/null +++ b/surfsense_web/components/homepage/features-bento-grid.tsx @@ -0,0 +1,448 @@ +import { IconFileBroken, IconSparkles, IconTableColumn, IconUsers } from "@tabler/icons-react"; +import Image from "next/image"; +import React from "react"; +import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid"; + +export function FeaturesBentoGrid() { + return ( + + {items.map((item, i) => ( + + ))} + + ); +} + +const CitationIllustration = () => ( +
+ + Citation feature illustration showing clickable source reference + {/* Background chat message */} + + {/* Chat bubble */} + + {/* Text lines */} + + + + {/* Citation badge with glow */} + + + + + + + + + + + {/* Clickable citation */} + + + + [1] + + + + + {/* Connecting line with animation effect */} + + + + + + {/* Arrow head */} + + + + {/* Citation popup card */} + + {/* Card shadow */} + + + {/* Main card */} + + + {/* Card header */} + + + + {/* Header text */} + + Referenced Chunk + + + {/* Content lines */} + + + + + + {/* Sparkle effects */} + + {/* Sparkle 1 */} + + + + + + + + {/* Sparkle 2 */} + + + + + + + + {/* Sparkle 3 */} + + + + + + {/* AI Sparkle icon in corner */} + + + + + + +
+); + +const CollaborationIllustration = () => ( +
+
+
+
+ + {/* Real-time */} + + Real-time + + + + + Rich + + + collabo + orat + + + + Alex + + + ion + +
+
+ {/* Bottom gradient fade */} +
+ {/* Right gradient fade */} +
+
+
+); + +const AnnotationIllustration = () => ( +
+
+
+ {/* Text above the comment box */} +
+ + Add context with +
+ {" "} + + comments + +
+ + {/* Comment card */} +
+
+ Let's discuss this tomorrow! +
+ + {/* Reaction icons */} +
+ {/* @ icon */} + + Mention icon + + + + + + + {/* Emoji icon */} + + Emoji icon + + + + + + + {/* Attachment icon */} + + Attachment icon + + +
+
+
+ + {/* Bottom gradient fade */} +
+ {/* Right gradient fade */} +
+
+
+); + +const AudioCommentIllustration = () => ( +
+ Audio Comment Illustration +
+); + +const items = [ + { + title: "Find, Ask, Act", + description: + "Get instant information, detailed updates, and cited answers across company and personal knowledge.", + header: , + className: "md:col-span-2", + icon: , + }, + { + title: "Work Together in Real Time", + description: + "Transform your company docs into multiplayer spaces with live edits, synced content, and presence.", + header: , + className: "md:col-span-1", + icon: , + }, + { + title: "Collaborate Beyond Text", + description: + "Create podcasts and multimedia your team can comment on, share, and refine together.", + header: , + className: "md:col-span-1", + icon: , + }, + { + title: "Context Where It Counts", + description: "Add comments directly to your chats and docs for clear, in-the-moment feedback.", + header: , + className: "md:col-span-2", + icon: , + }, +]; diff --git a/surfsense_web/components/homepage/features-card.tsx b/surfsense_web/components/homepage/features-card.tsx new file mode 100644 index 000000000..78c4cccc1 --- /dev/null +++ b/surfsense_web/components/homepage/features-card.tsx @@ -0,0 +1,74 @@ +import { Sliders, Users, Workflow } from "lucide-react"; +import type { ReactNode } from "react"; +import { Card, CardContent, CardHeader } from "@/components/ui/card"; + +export function Features() { + return ( +
+
+ {/*
+

Built to cover your needs

+

Libero sapiente aliquam quibusdam aspernatur, praesentium iusto repellendus.

+
*/} +
+ + + + + + +

Customizable

+ + + +

Customize your research agent to your specific needs.

+ + + + + + + + + +

Streamline your workflow

+ + + +

+ Pull all your knowledge into one place, so you can find what matters and get things + done faster. +

+ + + + + + + + + +

Seamless Collaboration

+ + + +

Make your company and personal content collaborative.

+ + +
+
+
+ ); +} + +const CardDecorator = ({ children }: { children: ReactNode }) => ( +
+
+
+ {children} +
+
+); diff --git a/surfsense_web/components/ui/bento-grid.tsx b/surfsense_web/components/ui/bento-grid.tsx new file mode 100644 index 000000000..77614fc97 --- /dev/null +++ b/surfsense_web/components/ui/bento-grid.tsx @@ -0,0 +1,54 @@ +import { cn } from "@/lib/utils"; + +export const BentoGrid = ({ + className, + children, +}: { + className?: string; + children?: React.ReactNode; +}) => { + return ( +
+ {children} +
+ ); +}; + +export const BentoGridItem = ({ + className, + title, + description, + header, + icon, +}: { + className?: string; + title?: string | React.ReactNode; + description?: string | React.ReactNode; + header?: React.ReactNode; + icon?: React.ReactNode; +}) => { + return ( +
+ {header} +
+ {icon} +
+ {title} +
+
+ {description} +
+
+
+ ); +}; diff --git a/surfsense_web/public/homepage/comments-audio.webp b/surfsense_web/public/homepage/comments-audio.webp new file mode 100644 index 000000000..c56ac6008 Binary files /dev/null and b/surfsense_web/public/homepage/comments-audio.webp differ