106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
import NavbarCentered from "@/components/ui/NavbarCentered";
|
|
import FeaturesBento from "@/components/sections/features/FeaturesBento";
|
|
import { Zap, Shield, BarChart, Users, Bell, Mail, Bot } from "lucide-react";
|
|
|
|
const FeaturesBentoPage = () => (
|
|
<>
|
|
<NavbarCentered
|
|
logo="Webild"
|
|
navItems={[
|
|
{ name: "Home", href: "/" },
|
|
{ name: "About", href: "#" },
|
|
{ name: "Services", href: "#" },
|
|
{ name: "Contact", href: "#" },
|
|
]}
|
|
ctaButton={{ text: "Get Started", href: "#" }}
|
|
/>
|
|
<div className="h-[50vh]" />
|
|
<FeaturesBento
|
|
tag="Features"
|
|
title="Powerful Features for Modern Teams"
|
|
description="Everything you need to build amazing products, all in one place."
|
|
primaryButton={{ text: "Get Started", href: "#" }}
|
|
secondaryButton={{ text: "Learn More", href: "#" }}
|
|
features={[
|
|
{
|
|
bentoComponent: "info-card-marquee",
|
|
title: "Real-time Analytics",
|
|
description: "Track your metrics in real-time with our powerful dashboard.",
|
|
items: [
|
|
{ icon: Zap, label: "Active Users", value: "12.5K" },
|
|
{ icon: Shield, label: "Uptime", value: "99.9%" },
|
|
{ icon: BarChart, label: "Growth", value: "+24%" },
|
|
{ icon: Users, label: "Team Size", value: "48" },
|
|
],
|
|
},
|
|
{
|
|
bentoComponent: "animated-bar-chart",
|
|
title: "Performance Metrics",
|
|
description: "Visualize your data with beautiful animated charts.",
|
|
},
|
|
{
|
|
bentoComponent: "tilted-stack-cards",
|
|
title: "Key Insights",
|
|
description: "Discover actionable insights from your data.",
|
|
items: [
|
|
{ icon: Zap, title: "Revenue", subtitle: "$124,500", detail: "+12% this month" },
|
|
{ icon: Users, title: "Users", subtitle: "48,200", detail: "+8% this week" },
|
|
{ icon: BarChart, title: "Growth", subtitle: "24%", detail: "Above target" },
|
|
],
|
|
},
|
|
{
|
|
bentoComponent: "orbiting-icons",
|
|
title: "Integrations",
|
|
description: "Connect with all your favorite tools and services.",
|
|
centerIcon: Zap,
|
|
items: [Shield, BarChart, Users, Bell, Mail],
|
|
},
|
|
{
|
|
bentoComponent: "chat-marquee",
|
|
title: "AI Assistant",
|
|
description: "Get instant help from our intelligent assistant.",
|
|
aiIcon: Bot,
|
|
userIcon: Users,
|
|
exchanges: [
|
|
{ userMessage: "How can I improve my metrics?", aiResponse: "Based on your data, I recommend focusing on user engagement." },
|
|
{ userMessage: "Show me the trends", aiResponse: "Your growth has increased 24% this month!" },
|
|
],
|
|
placeholder: "Ask me anything...",
|
|
},
|
|
{
|
|
bentoComponent: "checklist-timeline",
|
|
title: "Project Progress",
|
|
description: "Track your team's progress in real-time.",
|
|
heading: "Sprint 12",
|
|
subheading: "In Progress",
|
|
items: [
|
|
{ label: "Design Review", detail: "Completed" },
|
|
{ label: "Development", detail: "In Progress" },
|
|
{ label: "QA Testing", detail: "Pending" },
|
|
],
|
|
completedLabel: "All tasks completed!",
|
|
},
|
|
{
|
|
bentoComponent: "icon-text-marquee",
|
|
title: "Tech Stack",
|
|
description: "Built with the best technologies.",
|
|
centerIcon: Zap,
|
|
texts: ["React", "TypeScript", "Tailwind", "Node.js", "PostgreSQL", "Redis"],
|
|
},
|
|
{
|
|
bentoComponent: "media-stack",
|
|
title: "Media Gallery",
|
|
description: "Showcase your work with interactive media stacks.",
|
|
items: [
|
|
{ imageSrc: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=300&fit=crop" },
|
|
{ imageSrc: "https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?w=400&h=300&fit=crop" },
|
|
{ imageSrc: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&h=300&fit=crop" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
|
|
export default FeaturesBentoPage;
|