diff --git a/frontend/src/app/(home)/page.tsx b/frontend/src/app/(home)/page.tsx index 760c4976..b80eda99 100644 --- a/frontend/src/app/(home)/page.tsx +++ b/frontend/src/app/(home)/page.tsx @@ -18,6 +18,7 @@ import { QuoteSection } from '@/components/home/sections/quote-section'; import { TestimonialSection } from '@/components/home/sections/testimonial-section'; 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'; export default function Home() { return ( @@ -27,7 +28,9 @@ export default function Home() {
+ + {/* */} diff --git a/frontend/src/components/home/second-bento-animation.tsx b/frontend/src/components/home/second-bento-animation.tsx index d4eaa2e6..48cf116d 100644 --- a/frontend/src/components/home/second-bento-animation.tsx +++ b/frontend/src/components/home/second-bento-animation.tsx @@ -32,6 +32,9 @@ export function SecondBentoAnimation() {
Excel
+
+ Gmail +
@@ -39,10 +42,16 @@ export function SecondBentoAnimation() { Google Calendar
- Gmail + Notion
- Notion + WhatsApp +
+
+ Trello +
+
+ Google Sheets
@@ -62,6 +71,48 @@ export function SecondBentoAnimation() {
Asana
+
+ Teams +
+
+ Apple Mail +
+
+ LinkedIn +
+ + + {/* Additional outer ring for more tools */} + +
+ Chrome +
+
+ Twitter +
+
+ Instagram +
+
+ Facebook +
+
+ Zoom +
+
+ Dropbox +
+
+ GitHub +
+
+ OpenAI +
diff --git a/frontend/src/components/home/sections/bento-section.tsx b/frontend/src/components/home/sections/bento-section.tsx index 10909c72..3dbc446e 100644 --- a/frontend/src/components/home/sections/bento-section.tsx +++ b/frontend/src/components/home/sections/bento-section.tsx @@ -9,21 +9,21 @@ export function BentoSection() { { id: 1, content: , - title: 'Design with conversation', + title: 'Describe your needs', description: - 'Simply describe what you need your agent to accomplish, and Suna will build it for you.', + 'Tell Kortix what you need and customize your AI worker for your use cases.', }, { id: 2, content: , - title: 'Integrate everything', + title: 'Connect 100s of tools', description: 'Connect to your favorite tools and services with our extensive library of integrations.', }, { id: 3, content: , - title: 'Automate intelligently', + title: 'Deploy and personalize', description: 'Watch your agent handle complex tasks and workflows with advanced AI reasoning.', }, @@ -38,10 +38,10 @@ export function BentoSection() {

- Build Your AI Worker in 3 Simple Steps + Create a New AI Worker in 3 Simple Steps

- From description to deployment, create powerful AI Workers that work autonomously in minutes. + Customize powerful AI Workers to work on your tailored use cases.

diff --git a/frontend/src/components/home/sections/deliverables-section.tsx b/frontend/src/components/home/sections/deliverables-section.tsx new file mode 100644 index 00000000..e3f990f1 --- /dev/null +++ b/frontend/src/components/home/sections/deliverables-section.tsx @@ -0,0 +1,421 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import { motion, AnimatePresence, useScroll, useInView } from 'framer-motion'; + +interface DeliverableType { + type: string; + description: string; + preview: React.ReactNode; +} + +const deliverables: DeliverableType[] = [ + { + type: 'Presentations', + description: 'Create comprehensive, professional presentations with detailed research, compelling visuals, and strategic insights. From pitch decks to quarterly reports, our AI delivers presentation-ready content that impresses stakeholders and drives decisions.', + preview: ( +
+
+ {/* Left Column */} +
+
+

Phase 5: Pipeline Management

+
    +
  • • Update candidate status in real-time
    • +
  • • Manage follow-up sequences
    • +
  • • Track progression through hiring stages
    • +
+
+
+

Phase 6: Analytics & Reporting

+
    +
  • • Generate comprehensive weekly reports
    • +
  • • Create data visualizations and charts
    • +
  • • Provide strategic recommendations
    • +
+
+
+

Automation Schedule

+

Every Monday at 9:00 AM, your agent will automatically process new job positions.

+
+
+ + {/* Right Column */} +
+
+

Seed VC Associate Recruitment Campaign - COMPLETE

+

I've successfully completed a comprehensive recruitment campaign for the Seed VC Associate position at Founders Future.

+ +
+

📊 FINAL DELIVERABLES:

+
    +
  • 1. Candidate Pipeline: 15 high-quality candidates identified and scored
    • +
  • • Top Tier (9-10/10): 3 exceptional candidates
    • +
  • • Strong Tier (7-8/10): 7 very good candidates
    • +
  • • Good Tier (5-6/10): 5 solid candidates
    • +
  • 2. Comprehensive Google Sheet: Live Candidate Database
    • +
  • 3. Strategic Insights & Recommendations
    • +
+
+
+ +
+

🎯 TOP 3 CANDIDATES TO PRIORITIZE

+

Market Analysis, Compensation Insights, Sourcing Strategy recommendations included.

+
+
+
+
+ ), + }, + { + type: 'Spreadsheets', + description: 'Transform raw data into actionable insights with advanced spreadsheet analysis, automated calculations, and dynamic reporting. Our AI creates sophisticated data models that track performance, identify trends, and support strategic decision-making.', + preview: ( +
+
+
+
+
Name
+ {Array.from({ length: 12 }).map((_, i) => ( +
+ Candidate {i + 1} +
+ ))} +
+
+
Score
+ {[9.2, 8.8, 8.5, 8.3, 7.9, 7.7, 7.5, 7.2, 6.9, 6.5, 6.2, 6.0].map((score, i) => ( +
+ {score} +
+ ))} +
+
+
Experience
+ {['5-7y', '4-6y', '6-8y', '3-5y', '4-7y', '5-6y', '3-4y', '2-4y', '4-5y', '3-6y', '2-3y', '1-3y'].map((exp, i) => ( +
+ {exp} +
+ ))} +
+
+
Location
+ {['SF', 'NYC', 'LA', 'SF', 'NYC', 'Austin', 'SF', 'Seattle', 'NYC', 'Boston', 'SF', 'LA'].map((loc, i) => ( +
+ {loc} +
+ ))} +
+
+
Status
+ {['Contacted', 'Interview', 'Pending', 'Contacted', 'New', 'Interview', 'Contacted', 'New', 'Pending', 'New', 'Contacted', 'New'].map((status, i) => ( +
+ {status} +
+ ))} +
+
+
Notes
+ {Array.from({ length: 12 }).map((_, i) => ( +
+ Notes... +
+ ))} +
+
+
+
+ ), + }, + { + type: 'Design', + description: 'Generate stunning visual designs, wireframes, and mockups that capture your brand vision. From user interface designs to marketing materials, our AI creates cohesive visual assets that engage audiences and communicate effectively.', + preview: ( +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+ CTA +
+
+
+ ), + }, + { + type: 'Documentation', + description: 'Produce detailed, well-structured documentation that makes complex information accessible. From technical manuals to user guides, our AI creates clear, comprehensive documentation that improves understanding and reduces support overhead.', + preview: ( +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ ), + }, + { + type: 'Data Visualizations', + description: 'Build interactive dashboards and compelling data visualizations that tell your data story. Our AI transforms complex datasets into clear, actionable charts and graphs that reveal patterns, highlight opportunities, and support data-driven decisions.', + preview: ( +
+
+
+
+
+
+ +
+ {[ + { height: '60%', label: 'Q1' }, + { height: '80%', label: 'Q2' }, + { height: '100%', label: 'Q3' }, + { height: '75%', label: 'Q4' }, + { height: '90%', label: 'Q5' } + ].map((bar, i) => ( +
+
+
{bar.label}
+
+ ))} +
+ +
+
+
85%
+
Growth
+
+
+
$2.4M
+
Revenue
+
+
+
156
+
Clients
+
+
+
+
+ ), + }, +]; + +export function DeliverablesSection() { + const [activeIndex, setActiveIndex] = useState(0); + const containerRef = useRef(null); + const isInView = useInView(containerRef, { margin: "-50%" }); + + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start end', 'end start'] + }); + + // Calculate which deliverable should be active based on scroll progress + useEffect(() => { + const unsubscribe = scrollYProgress.on('change', (latest) => { + if (latest > 0.1 && latest < 0.9) { + const adjustedProgress = (latest - 0.1) / 0.8; // Normalize to 0-1 range + const index = Math.min( + Math.floor(adjustedProgress * deliverables.length), + deliverables.length - 1 + ); + setActiveIndex(index); + } + }); + + return unsubscribe; + }, [scrollYProgress]); + + return ( +
+
+
+ {/* Section Header */} +
+

+ 24/7 AI Workers for Every Task +

+

+ From presentations to data analysis, our AI workers handle complex deliverables while you focus on what matters most. Each worker is specialized, intelligent, and works around the clock to deliver professional results. +

+
+ + {/* Sticky Content Area - Locks during scroll */} +
+
+
+ {/* Content Grid */} +
+ {/* Left Side - Text */} + + + AI Worker for + {deliverables[activeIndex].type} + + + + {deliverables[activeIndex].description} + + + + Get Started + + + + + + + + {/* Progress Indicator */} +
+ {deliverables.map((_, index) => ( +
+ + + {/* Right Side - Preview */} + + + + {deliverables[activeIndex].preview} + + + +
+
+
+
+ + {/* Spacer sections for scroll trigger - each deliverable gets its own scroll space */} +
+ {deliverables.map((deliverable, index) => ( +
+ ))} +
+
+
+
+ ); +} diff --git a/frontend/src/components/home/sections/hero-section.tsx b/frontend/src/components/home/sections/hero-section.tsx index bb0a69ef..fbd92c65 100644 --- a/frontend/src/components/home/sections/hero-section.tsx +++ b/frontend/src/components/home/sections/hero-section.tsx @@ -46,11 +46,46 @@ const BlurredDialogOverlay = () => ( ); +// Rotating text component for job types +const RotatingText = ({ + texts, + className = "" +}: { + texts: string[]; + className?: string; +}) => { + const [currentIndex, setCurrentIndex] = useState(0); + const [isVisible, setIsVisible] = useState(true); + + useEffect(() => { + const interval = setInterval(() => { + setIsVisible(false); + + setTimeout(() => { + setCurrentIndex((prev) => (prev + 1) % texts.length); + setIsVisible(true); + }, 150); // Half of the transition duration + }, 2000); // Change every 2 seconds + + return () => clearInterval(interval); + }, [texts.length]); + + return ( + + + {texts[currentIndex]} + + + ); +}; + // Constant for localStorage key to ensure consistency const PENDING_PROMPT_KEY = 'pendingAgentPrompt'; - - export function HeroSection() { const { hero } = siteConfig; const tablet = useMediaQuery('(max-width: 1024px)'); @@ -325,11 +360,14 @@ export function HeroSection() { */}

- Build, manage and train your - AI Workforce. + Hire Kortix for +

- Kortix – the simplest way to migrate from human to AI. + Deploy AI Workers that run your business autonomously.

@@ -339,7 +377,7 @@ export function HeroSection() {
), - title: 'Open Source Security', - description: 'Benefit from the security of open source code that thousands of eyes can review, audit, and improve.', + title: 'Secure Private Deployment', + description: 'Deploy 100% on-premises with complete data sovereignty. Your AI workers run entirely on your infrastructure with no external dependencies.', showGitHubInfo: true, }, { @@ -296,8 +296,8 @@ export function OpenSourceSection() { ), - title: 'Transparency & Trust', - description: 'We believe AI should be open and accessible to everyone. Our open source approach ensures accountability, innovation, and community collaboration.', + title: 'Enterprise-Grade Security', + description: 'Open source transparency meets enterprise security. Deploy behind your firewall with full control over models, data, and integrations.', showFeatures: true, }, ]; @@ -312,10 +312,10 @@ export function OpenSourceSection() { {/* Section Header */}

- 100% Open Source + 100% Open AI

- Suna is fully open source. Join our community and help shape the future of AI. + Deploy securely on your own infrastructure with complete control over your data and AI workflows.

@@ -379,9 +379,9 @@ export function OpenSourceSection() {
-

Transparency

+

On-Premises

- Fully auditable codebase + 100% private deployment

diff --git a/frontend/src/components/home/sections/pricing-section.tsx b/frontend/src/components/home/sections/pricing-section.tsx index 31631787..c3f31684 100644 --- a/frontend/src/components/home/sections/pricing-section.tsx +++ b/frontend/src/components/home/sections/pricing-section.tsx @@ -6,7 +6,20 @@ import { siteConfig } from '@/lib/home'; import { cn } from '@/lib/utils'; import { motion } from 'motion/react'; import React, { useState, useEffect, useCallback } from 'react'; -import { CheckIcon } from 'lucide-react'; +import { + CheckIcon, + Clock, + Bot, + FileText, + Settings, + Grid3X3, + Image, + Video, + Presentation, + Diamond, + Heart, + Zap +} from 'lucide-react'; import { Button } from '@/components/ui/button'; import { createCheckoutSession, @@ -56,6 +69,42 @@ interface PricingTierProps { billingPeriod?: 'monthly' | 'yearly' | 'yearly_commitment'; } +// Feature icon mapping +const getFeatureIcon = (feature: string) => { + const featureLower = feature.toLowerCase(); + + if (featureLower.includes('token credits') || featureLower.includes('ai token')) { + return ; + } + if (featureLower.includes('custom agents') || featureLower.includes('agents')) { + return ; + } + if (featureLower.includes('private projects') || featureLower.includes('public projects')) { + return ; + } + if (featureLower.includes('custom abilities') || featureLower.includes('basic abilities')) { + return ; + } + if (featureLower.includes('integrations') || featureLower.includes('100+')) { + return ; + } + if (featureLower.includes('premium ai models')) { + return ; + } + if (featureLower.includes('community support') || featureLower.includes('priority support')) { + return ; + } + if (featureLower.includes('image') || featureLower.includes('video') || featureLower.includes('slides') || featureLower.includes('generation')) { + return ; + } + if (featureLower.includes('dedicated account manager')) { + return ; + } + + // Default icon + return ; +}; + // Components function PriceDisplay({ price, isCompact }: PriceDisplayProps) { @@ -263,7 +312,7 @@ function PricingTier({ isScheduled && currentSubscription?.scheduled_price_id === priceId; const isPlanLoading = isLoading[priceId]; - let buttonText = isAuthenticated ? 'Select Plan' : 'Start Free'; + let buttonText = isAuthenticated ? 'Select Plan' : tier.buttonText; let buttonDisabled = isPlanLoading; let buttonVariant: ButtonVariant = null; let ringClass = ''; @@ -494,9 +543,9 @@ function PricingTier({ {tier.features && tier.features.length > 0 && (
    {tier.features.map((feature) => ( -
  • -
    - +
  • +
    + {getFeatureIcon(feature)}
    {feature}
    • diff --git a/frontend/src/lib/home.tsx b/frontend/src/lib/home.tsx index 58f587fa..192c30a9 100644 --- a/frontend/src/lib/home.tsx +++ b/frontend/src/lib/home.tsx @@ -125,10 +125,10 @@ export const siteConfig = { /** @deprecated */ hours: '60 min', features: [ - '$5 free AI tokens included', + '$5 AI token credits/m', '2 custom agents', 'Public projects', - 'Basic Models', + 'Basic abilities', 'Community support', ], stripePriceId: config.SUBSCRIPTION_TIERS.FREE.priceId, @@ -141,17 +141,19 @@ export const siteConfig = { originalYearlyPrice: '$240', discountPercentage: 15, description: 'Best for individuals and small teams', - buttonText: 'Start Free', + buttonText: 'Get started', buttonColor: 'bg-primary text-white dark:text-black', isPopular: true, /** @deprecated */ hours: '2 hours', features: [ - '$20 AI token credits/month', + '$20 AI token credits/m', '5 custom agents', 'Private projects', + 'Custom abilities', + '100+ integrations', 'Premium AI Models', - 'Community support', + 'Image, Video, Slides generation', ], stripePriceId: config.SUBSCRIPTION_TIERS.TIER_2_20.priceId, yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_2_20_YEARLY.priceId, @@ -165,17 +167,19 @@ export const siteConfig = { originalYearlyPrice: '$600', discountPercentage: 15, description: 'Ideal for growing businesses', - buttonText: 'Start Free', + buttonText: 'Get started', buttonColor: 'bg-secondary text-white', isPopular: false, /** @deprecated */ hours: '6 hours', features: [ - '$50 AI token credits/month', + '$50 AI token credits/m', '20 custom agents', 'Private projects', + 'Custom abilities', + '100+ integrations', 'Premium AI Models', - 'Community support', + 'Image, Video, Slides generation', ], stripePriceId: config.SUBSCRIPTION_TIERS.TIER_6_50.priceId, yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_6_50_YEARLY.priceId, @@ -189,16 +193,18 @@ export const siteConfig = { originalYearlyPrice: '$1200', discountPercentage: 15, description: 'For established businesses', - buttonText: 'Start Free', + buttonText: 'Get started', buttonColor: 'bg-secondary text-white', isPopular: false, hours: '12 hours', features: [ - '$100 AI token credits/month', + '$100 AI token credits/m', '20 custom agents', 'Private projects', + 'Custom abilities', + '100+ integrations', 'Premium AI Models', - 'Community support', + 'Image, Video, Slides generation', ], stripePriceId: config.SUBSCRIPTION_TIERS.TIER_12_100.priceId, yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_12_100_YEARLY.priceId, @@ -212,16 +218,19 @@ export const siteConfig = { originalYearlyPrice: '$2400', discountPercentage: 15, description: 'For power users', - buttonText: 'Start Free', + buttonText: 'Get started', buttonColor: 'bg-secondary text-white', isPopular: false, hours: '25 hours', features: [ - '$200 AI token credits/month', + '$200 AI token credits/m', '100 custom agents', 'Private projects', + 'Custom abilities', + '100+ integrations', 'Premium AI Models', - 'Priority support', + 'Priority Support', + 'Image, Video, Slides generation', ], stripePriceId: config.SUBSCRIPTION_TIERS.TIER_25_200.priceId, yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_25_200_YEARLY.priceId, @@ -235,16 +244,18 @@ export const siteConfig = { originalYearlyPrice: '$4800', discountPercentage: 15, description: 'For large teams', - buttonText: 'Start Free', + buttonText: 'Get started', buttonColor: 'bg-secondary text-white', isPopular: false, hours: '50 hours', features: [ - '$400 AI token credits/month', + '$400 AI token credits/m', 'Private projects', + 'Custom abilities', + '100+ integrations', 'Premium AI Models', 'Priority support', - 'Custom integrations', + 'Image, Video, Slides generation', ], stripePriceId: config.SUBSCRIPTION_TIERS.TIER_50_400.priceId, yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_50_400_YEARLY.priceId, @@ -258,16 +269,18 @@ export const siteConfig = { originalYearlyPrice: '$9600', discountPercentage: 15, description: 'For scaling teams', - buttonText: 'Start Free', + buttonText: 'Get started', buttonColor: 'bg-secondary text-white', isPopular: false, hours: '125 hours', features: [ - '$800 AI token credits/month', + '$800 AI token credits/m', 'Private projects', + 'Custom abilities', + '100+ integrations', 'Premium AI Models', 'Priority support', - 'Custom integrations', + 'Image, Video, Slides generation', 'Dedicated account manager', ], stripePriceId: config.SUBSCRIPTION_TIERS.TIER_125_800.priceId, @@ -282,16 +295,18 @@ export const siteConfig = { originalYearlyPrice: '$12000', discountPercentage: 15, description: 'Maximum performance', - buttonText: 'Start Free', + buttonText: 'Get started', buttonColor: 'bg-secondary text-white', isPopular: false, hours: '200 hours', features: [ - '$1000 AI token credits/month', + '$1000 AI token credits/m', 'Private projects', + 'Custom abilities', + '100+ integrations', 'Premium AI Models', 'Priority support', - 'Custom integrations', + 'Image, Video, Slides generation', 'Dedicated account manager', 'Custom deployment', ],