mirror of https://github.com/kortix-ai/suna.git
landing section
This commit is contained in:
parent
bf5ea6a7ea
commit
a700d68d06
|
@ -19,6 +19,7 @@ import { TestimonialSection } from '@/components/home/sections/testimonial-secti
|
|||
import { FAQSection } from '@/components/home/sections/faq-section';
|
||||
import { AgentShowcaseSection } from '@/components/home/sections/agent-showcase-section';
|
||||
import { DeliverablesSection } from '@/components/home/sections/deliverables-section';
|
||||
import { CapabilitiesSection } from '@/components/home/sections/capabilities-section';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
@ -28,7 +29,8 @@ export default function Home() {
|
|||
<main className="flex flex-col items-center justify-center min-h-screen w-full">
|
||||
<div className="w-full divide-y divide-border">
|
||||
<HeroSection />
|
||||
<DeliverablesSection />
|
||||
<CapabilitiesSection />
|
||||
{/* <DeliverablesSection /> */}
|
||||
<BentoSection />
|
||||
|
||||
{/* <AgentShowcaseSection /> */}
|
||||
|
|
|
@ -0,0 +1,120 @@
|
|||
'use client';
|
||||
|
||||
import { SectionHeader } from '@/components/home/section-header';
|
||||
import { motion, useInView } from 'motion/react';
|
||||
import { useRef } from 'react';
|
||||
import {
|
||||
FileText,
|
||||
Image,
|
||||
Presentation,
|
||||
Globe,
|
||||
BarChart3,
|
||||
ShoppingCart,
|
||||
Users,
|
||||
Clock
|
||||
} from 'lucide-react';
|
||||
|
||||
const capabilities = [
|
||||
{
|
||||
title: 'Create Professional Documents',
|
||||
description: 'Generate reports, proposals, contracts, and presentations that look like they came from a top agency. PDF, Word, PowerPoint - any format you need.',
|
||||
icon: <FileText className="size-6" />,
|
||||
},
|
||||
{
|
||||
title: 'Design Graphics & Visuals',
|
||||
description: 'Create logos, social media graphics, infographics, and custom images from just a text description. No design skills required.',
|
||||
icon: <Image className="size-6" />,
|
||||
},
|
||||
{
|
||||
title: 'Build Stunning Presentations',
|
||||
description: 'Turn your ideas into polished slide decks with professional layouts, charts, and images sourced automatically.',
|
||||
icon: <Presentation className="size-6" />,
|
||||
},
|
||||
{
|
||||
title: 'Research Anything Online',
|
||||
description: 'Get comprehensive research reports on competitors, markets, trends, or any topic with verified sources and current data.',
|
||||
icon: <Globe className="size-6" />,
|
||||
},
|
||||
{
|
||||
title: 'Analyze Your Data',
|
||||
description: 'Upload spreadsheets, sales data, or any files and get insights, trends, forecasts, and beautiful charts in minutes.',
|
||||
icon: <BarChart3 className="size-6" />,
|
||||
},
|
||||
{
|
||||
title: 'Automate Online Tasks',
|
||||
description: 'Fill out forms, collect data from websites, monitor prices, schedule posts, and handle repetitive web tasks while you sleep.',
|
||||
icon: <ShoppingCart className="size-6" />,
|
||||
},
|
||||
{
|
||||
title: 'Manage Your Workflows',
|
||||
description: 'Set up automated processes for lead generation, customer follow-ups, content creation, and daily business operations.',
|
||||
icon: <Users className="size-6" />,
|
||||
},
|
||||
{
|
||||
title: 'Work Around the Clock',
|
||||
description: 'Kortix never sleeps. Schedule tasks to run overnight, on weekends, or whenever you need work done without being there.',
|
||||
icon: <Clock className="size-6" />,
|
||||
},
|
||||
];
|
||||
|
||||
export function CapabilitiesSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: "-10%" });
|
||||
|
||||
return (
|
||||
<section
|
||||
id="capabilities"
|
||||
className="flex flex-col items-center justify-center w-full relative"
|
||||
ref={ref}
|
||||
>
|
||||
<div className="relative w-full px-6">
|
||||
<div className="max-w-6xl mx-auto border-l border-r border-border">
|
||||
<SectionHeader>
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tighter text-center text-balance pb-1">
|
||||
What Can Kortix Do For You?
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-center text-balance font-medium">
|
||||
From content creation to data analysis, Kortix handles the work that takes you hours in just minutes.
|
||||
</p>
|
||||
</SectionHeader>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 border-t">
|
||||
{capabilities.map((capability, index) => (
|
||||
<motion.div
|
||||
key={capability.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: index * 0.1,
|
||||
ease: 'easeOut',
|
||||
}}
|
||||
className="relative p-6 border-r border-b border-border group hover:bg-accent/5 transition-colors duration-300"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="flex items-center justify-center size-12 bg-secondary/10 rounded-xl mb-4 group-hover:bg-secondary/20 transition-colors duration-300">
|
||||
<div className="text-secondary">
|
||||
{capability.icon}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold tracking-tight">
|
||||
{capability.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{capability.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Hover effect border */}
|
||||
<div className="absolute inset-0 border border-transparent group-hover:border-secondary/20 rounded-lg transition-colors duration-300" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
|
@ -129,7 +129,7 @@ export const siteConfig = {
|
|||
'2 custom agents',
|
||||
'Public projects',
|
||||
'Basic abilities',
|
||||
'Community support',
|
||||
// 'Community support',
|
||||
],
|
||||
stripePriceId: config.SUBSCRIPTION_TIERS.FREE.priceId,
|
||||
upgradePlans: [],
|
||||
|
@ -153,7 +153,7 @@ export const siteConfig = {
|
|||
'Custom abilities',
|
||||
'100+ integrations',
|
||||
'Premium AI Models',
|
||||
'Image, Video, Slides generation',
|
||||
'Advanced AI Capabilities',
|
||||
],
|
||||
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_2_20.priceId,
|
||||
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_2_20_YEARLY.priceId,
|
||||
|
@ -179,7 +179,7 @@ export const siteConfig = {
|
|||
'Custom abilities',
|
||||
'100+ integrations',
|
||||
'Premium AI Models',
|
||||
'Image, Video, Slides generation',
|
||||
'Advanced AI Capabilities',
|
||||
],
|
||||
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_6_50.priceId,
|
||||
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_6_50_YEARLY.priceId,
|
||||
|
@ -204,7 +204,7 @@ export const siteConfig = {
|
|||
'Custom abilities',
|
||||
'100+ integrations',
|
||||
'Premium AI Models',
|
||||
'Image, Video, Slides generation',
|
||||
'Advanced AI Capabilities',
|
||||
],
|
||||
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_12_100.priceId,
|
||||
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_12_100_YEARLY.priceId,
|
||||
|
@ -230,7 +230,7 @@ export const siteConfig = {
|
|||
'100+ integrations',
|
||||
'Premium AI Models',
|
||||
'Priority Support',
|
||||
'Image, Video, Slides generation',
|
||||
'Advanced AI Capabilities',
|
||||
],
|
||||
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_25_200.priceId,
|
||||
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_25_200_YEARLY.priceId,
|
||||
|
@ -255,7 +255,7 @@ export const siteConfig = {
|
|||
'100+ integrations',
|
||||
'Premium AI Models',
|
||||
'Priority support',
|
||||
'Image, Video, Slides generation',
|
||||
'Advanced AI Capabilities',
|
||||
],
|
||||
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_50_400.priceId,
|
||||
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_50_400_YEARLY.priceId,
|
||||
|
@ -280,7 +280,7 @@ export const siteConfig = {
|
|||
'100+ integrations',
|
||||
'Premium AI Models',
|
||||
'Priority support',
|
||||
'Image, Video, Slides generation',
|
||||
'Advanced AI Capabilities',
|
||||
'Dedicated account manager',
|
||||
],
|
||||
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_125_800.priceId,
|
||||
|
@ -306,7 +306,7 @@ export const siteConfig = {
|
|||
'100+ integrations',
|
||||
'Premium AI Models',
|
||||
'Priority support',
|
||||
'Image, Video, Slides generation',
|
||||
'Advanced AI Capabilities',
|
||||
'Dedicated account manager',
|
||||
'Custom deployment',
|
||||
],
|
||||
|
@ -945,7 +945,7 @@ export const siteConfig = {
|
|||
'Full agent capabilities',
|
||||
'Unlimited usage',
|
||||
'Full source code access',
|
||||
'Community support',
|
||||
// 'Community support',
|
||||
],
|
||||
description: 'Perfect for individual users and developers',
|
||||
buttonText: 'Hire Suna',
|
||||
|
@ -966,7 +966,7 @@ export const siteConfig = {
|
|||
'Local data storage',
|
||||
'Integration with your tools',
|
||||
'Full customization',
|
||||
'Community support',
|
||||
// 'Community support',
|
||||
],
|
||||
description: 'Ideal for organizations with specific requirements',
|
||||
buttonText: 'View Docs',
|
||||
|
|
Loading…
Reference in New Issue