342 lines
21 KiB
TypeScript
342 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
|
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
|
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
|
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import Link from "next/link";
|
|
import { Linkedin, Twitter, Globe, Sparkles } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Security", href: "/security" },
|
|
{ label: "Roadmap", href: "/roadmap" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Team", href: "#team" },
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Careers", href: "/careers" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "https://docs.nexusboard.io" },
|
|
{ label: "API Reference", href: "https://api.nexusboard.io" },
|
|
{ label: "Community", href: "https://community.nexusboard.io" },
|
|
{ label: "Support", href: "https://support.nexusboard.io" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "/privacy" },
|
|
{ label: "Terms of Service", href: "/terms" },
|
|
{ label: "Cookie Policy", href: "/cookies" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple brandName="NexusBoard" navItems={navItems} />
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="Real-Time Collaboration Redefined"
|
|
description="NexusBoard combines infinite canvas whiteboarding, intelligent documentation, and project management in one unified workspace. Collaborate seamlessly with your team using WebSocket-powered real-time sync, AI-assisted summarization, and full version history."
|
|
tag="The Future of Teamwork"
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/a-modern-collaborative-workspace-dashboa-1772797012289-82b6d5de.png"
|
|
imageAlt="NexusBoard collaborative workspace interface"
|
|
imagePosition="right"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen", handle: "CEO, Innovate Labs", testimonial: "NexusBoard transformed how our distributed team collaborates. The real-time sync is flawless, and AI summarization saves us hours daily.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/professional-headshot-portrait-of-a-conf-1772797009777-b716f3dd.png"},
|
|
{
|
|
name: "Marcus Rodriguez", handle: "Design Lead, CreativeFlow", testimonial: "The infinite canvas with touch zoom on tablets is game-changing. Our design sprints are 40% faster now.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/professional-headshot-of-a-latino-man-in-1772797010197-9a73fcfd.png"},
|
|
{
|
|
name: "Emily Watson", handle: "Project Manager, TechVenture", testimonial: "Combining docs, whiteboard, and project management in one platform eliminated so much context switching.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/professional-headshot-of-a-woman-with-li-1772797008938-499e031c.png"},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "/signup" },
|
|
{ text: "Watch Demo", href: "https://youtube.com/watch?v=nexusboard-demo" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{
|
|
type: "text", content: "Built for Teams That Think Together"},
|
|
]}
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "/about" },
|
|
{ text: "Enterprise Solutions", href: "#contact" },
|
|
]}
|
|
buttonAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
title="Powerful Features for Modern Teams"
|
|
description="From infinite canvas to real-time collaboration, every feature is designed for maximum productivity and seamless teamwork."
|
|
tag="Features"
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
showStepNumbers={true}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Infinite Canvas & Real-Time Sync", description: "Sticky notes, drawings, and image uploads on an infinite canvas. WebSocket-powered sync keeps your team always in sync with 60fps performance and live cursor tracking.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/mobile-phone-screen-showing-nexusboard-i-1772797010855-ac16a0c0.png"},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/mobile-phone-screen-showing-the-same-nex-1772797011054-b0712d61.png"},
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Version History & Timeline Control", description: "Restore any past state instantly with our timeline slider. Never lose important iterations or board moments. Full audit trail for compliance.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/desktop-screen-showing-version-history-t-1772797010005-3941a185.png"},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/desktop-screen-showing-a-board-state-res-1772797010474-d6b6ece0.png"},
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "AI Assistant & Smart Diagrams", description: "Select notes and let AI summarize instantly. Use /draw commands to auto-generate diagrams from text. Transform ideas into visual structure automatically.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/desktop-screen-showing-sticky-notes-sele-1772797010391-a0abf7cf.png"},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/desktop-screen-showing-auto-generated-di-1772797014369-dc796478.png"},
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Role-Based Access & Team Invites", description: "Google OAuth integration with flexible role management. Invite team members as Admin, Editor, or Viewer. Granular permissions for every workspace.", phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/desktop-screen-showing-team-member-manag-1772797011069-96581449.png"},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/desktop-screen-showing-google-oauth-inte-1772797010561-e6976f76.png"},
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Trusted by Teams Worldwide"
|
|
description="NexusBoard powers collaboration at scale with industry-leading performance and reliability."
|
|
tag="Results"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50K+", title: "Active Teams", description: "Organizations collaborating in real-time daily", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/illustration-of-50-diverse-team-members--1772797016123-f3f2ca4d.png"},
|
|
{
|
|
id: "2", value: "99.9%", title: "Uptime SLA", description: "Enterprise-grade infrastructure reliability", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/visual-representation-of-enterprise-infr-1772797010527-9602ba68.png"},
|
|
{
|
|
id: "3", value: "60fps", title: "Canvas Performance", description: "Smooth infinite canvas at 60 frames per second", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/modern-visualization-of-60fps-performanc-1772797010319-055d4d57.png"},
|
|
{
|
|
id: "4", value: "<100ms", title: "Sync Latency", description: "Real-time updates across all connected clients", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/visualization-of-real-time-data-synchron-1772797010504-336af6bf.png"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet the Team Behind NexusBoard"
|
|
description="Experienced engineers and designers building the future of team collaboration."
|
|
tag="Our Team"
|
|
tagAnimation="opacity"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
members={[
|
|
{
|
|
id: "1", name: "Alex Patterson", role: "Founder & CTO", description: "Former Senior Engineer at Google Cloud. 15+ years building distributed systems and real-time infrastructure.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/professional-headshot-of-a-confident-man-1772797009743-86aaf035.png", socialLinks: [
|
|
{
|
|
icon: Linkedin,
|
|
url: "https://linkedin.com/in/alexpatterson"},
|
|
{
|
|
icon: Twitter,
|
|
url: "https://twitter.com/alexpatterson"},
|
|
],
|
|
},
|
|
{
|
|
id: "2", name: "Jordan Lee", role: "Co-Founder & Design Lead", description: "Previously Design Director at Figma. Expert in collaborative UI/UX and accessibility standards.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/professional-headshot-of-a-creative-prof-1772797009801-35776f3a.png", socialLinks: [
|
|
{
|
|
icon: Linkedin,
|
|
url: "https://linkedin.com/in/jordanlee"},
|
|
{
|
|
icon: Globe,
|
|
url: "https://jordanlee.design"},
|
|
],
|
|
},
|
|
{
|
|
id: "3", name: "Priya Sharma", role: "VP Engineering", description: "Led infrastructure scaling at Stripe. Specialized in WebSocket architecture and real-time systems.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/professional-headshot-of-a-woman-in-her--1772797009367-8014320b.png", socialLinks: [
|
|
{
|
|
icon: Linkedin,
|
|
url: "https://linkedin.com/in/priyasharma"},
|
|
],
|
|
},
|
|
{
|
|
id: "4", name: "Marcus Johnson", role: "Head of Product", description: "Product leader at Atlassian. Passionate about enterprise collaboration tools and developer experience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/professional-headshot-of-a-man-in-his-la-1772797009499-c9e54767.png", socialLinks: [
|
|
{
|
|
icon: Linkedin,
|
|
url: "https://linkedin.com/in/marcusjohnson"},
|
|
{
|
|
icon: Twitter,
|
|
url: "https://twitter.com/marcusjohnson"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="NexusBoard completely revolutionized how our 50-person distributed team collaborates. The real-time sync is flawless, the AI features save us hours every week, and the tablet experience with touch zoom is absolutely phenomenal. We've seen a 40% improvement in project completion speed."
|
|
rating={5}
|
|
author="Jessica Martinez, VP of Operations at InnovateCorp"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/small-circular-profile-avatar-of-a-diver-1772797009394-bd2a5282.png", alt: "Jessica Martinez"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/small-circular-profile-avatar-of-another-1772797009634-2d7a822d.png", alt: "Team member"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/small-circular-profile-avatar-of-a-third-1772797009297-9afecd77.png", alt: "Team member"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/small-circular-profile-avatar-of-a-fourt-1772797010177-5abb9338.png", alt: "Team member"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/small-circular-profile-avatar-of-a-fifth-1772797009326-0553103c.png", alt: "Team member"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZP3XQ3S6E0nmyY8jeWOFT1zuv/small-circular-profile-avatar-of-a-sixth-1772797010456-4914e0a0.png", alt: "Team member"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Flexible Plans for Every Team"
|
|
description="Choose the right tier for your collaboration needs. All plans include core features. Scale as you grow."
|
|
tag="Pricing"
|
|
tagAnimation="opacity"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "For Individuals", price: "$29/mo", subtitle: "Perfect for solo creators and small projects", buttons: [
|
|
{
|
|
text: "Get Started", href: "/signup"},
|
|
],
|
|
features: [
|
|
"Up to 3 workspaces", "2GB storage", "Basic AI summarization", "Mobile app access", "Community support"],
|
|
},
|
|
{
|
|
id: "team", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "$99/mo", subtitle: "Best for growing teams", buttons: [
|
|
{
|
|
text: "Start Free Trial", href: "/signup"},
|
|
],
|
|
features: [
|
|
"Unlimited workspaces", "100GB storage", "Advanced AI features", "Real-time collaboration (10 users)", "Version history (90 days)", "Priority support", "Custom branding"],
|
|
},
|
|
{
|
|
id: "enterprise", badge: "For Large Teams", price: "Custom", subtitle: "Enterprise-grade security and compliance", buttons: [
|
|
{
|
|
text: "Contact Sales", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Unlimited everything", "Unlimited storage", "Dedicated AI instance", "Unlimited users & workspaces", "Infinite version history", "SSO & SAML", "24/7 dedicated support", "Custom integrations", "Data residency options"],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about NexusBoard's features, pricing, and implementation."
|
|
tag="FAQ"
|
|
tagAnimation="opacity"
|
|
textboxLayout="default"
|
|
animationType="smooth"
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does real-time sync work with WebSockets?", content: "NexusBoard uses WebSocket technology to establish persistent connections between clients and servers. This enables instant propagation of changes across all connected team members with <100ms latency. Our Redis-backed presence system tracks live cursors and user status in real-time."},
|
|
{
|
|
id: "2", title: "What devices support the tablet responsive experience?", content: "Our platform is fully optimized for iPad (6th gen and newer), Android tablets (Android 8+), and hybrid devices like Surface. Touch zoom gestures, pressure-sensitive drawing, and adaptive UI scaling work seamlessly across all supported devices at 60fps."},
|
|
{
|
|
id: "3", title: "Can I restore previous board states with version history?", content: "Yes! Version history is available on all paid plans. The timeline slider lets you scrub through past states, with snapshots captured automatically. Enterprise plans offer infinite history, while Team and Starter plans retain 90 and 30 days respectively."},
|
|
{
|
|
id: "4", title: "How does the AI assistant summarize notes?", content: "Select any group of sticky notes or text, and our AI processes the content to generate concise summaries. The /draw command transforms text descriptions into visual diagrams. Advanced AI features are available on Team and Enterprise plans."},
|
|
{
|
|
id: "5", title: "What are the role-based access permissions?", content: "<strong>Admin:</strong> Full workspace control, user management, billing. <strong>Editor:</strong> Create and modify content, comment, view history. <strong>Viewer:</strong> Read-only access to boards and documents. Google OAuth integration ensures secure team management."},
|
|
{
|
|
id: "6", title: "Is NexusBoard SOC 2 Type II certified?", content: "Yes. Enterprise plans include SOC 2 Type II compliance, HIPAA eligibility, data residency options, and SSO/SAML support. We also offer custom DPAs for regulated industries."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="NexusBoard"
|
|
copyrightText="© 2025 NexusBoard. All rights reserved."
|
|
columns={footerColumns}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |