diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png new file mode 100644 index 00000000..a83e19f5 Binary files /dev/null and b/frontend/public/favicon.png differ diff --git a/frontend/public/holo.png b/frontend/public/holo.png new file mode 100644 index 00000000..83c0da0e Binary files /dev/null and b/frontend/public/holo.png differ diff --git a/frontend/public/kortix-logo-white.svg b/frontend/public/kortix-logo-white.svg new file mode 100644 index 00000000..ecd27c81 --- /dev/null +++ b/frontend/public/kortix-logo-white.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/frontend/public/kortix-logo.svg b/frontend/public/kortix-logo.svg new file mode 100644 index 00000000..354ca5bc --- /dev/null +++ b/frontend/public/kortix-logo.svg @@ -0,0 +1,33 @@ + + + diff --git a/frontend/public/kortix-symbol.svg b/frontend/public/kortix-symbol.svg new file mode 100644 index 00000000..68fee0b9 --- /dev/null +++ b/frontend/public/kortix-symbol.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/public/kortex_icon.png b/frontend/public/kortix_icon.png similarity index 100% rename from frontend/public/kortex_icon.png rename to frontend/public/kortix_icon.png diff --git a/frontend/src/app/components/NavBar.tsx b/frontend/src/app/components/NavBar.tsx deleted file mode 100644 index bea5c5c8..00000000 --- a/frontend/src/app/components/NavBar.tsx +++ /dev/null @@ -1,47 +0,0 @@ -'use client'; - -import Link from 'next/link'; -import { useEffect, useState } from 'react'; - -export default function NavBar() { - const [scrolled, setScrolled] = useState(false); - - useEffect(() => { - const handleScroll = () => { - const isScrolled = window.scrollY > 20; - if (isScrolled !== scrolled) { - setScrolled(isScrolled); - } - }; - - document.addEventListener('scroll', handleScroll, { passive: true }); - return () => { - document.removeEventListener('scroll', handleScroll); - }; - }, [scrolled]); - - return ( - - ); -} \ No newline at end of file diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index be159f63..e675c807 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -4,123 +4,80 @@ @layer base { :root { - /* Base theme colors */ - --background: 210 40% 98%; /* Changed to HSL format to match Tailwind's expectations */ - --foreground: 60 2% 23%; /* Updated to match #3c3c3a */ - --background-secondary: #ffffff; - --hover-bg: rgba(241,238,231,255); - --icon-color: rgba(60, 60, 58, 0.7); + --background: 0 0% 100%; + --foreground: 0 0% 10%; + --background-secondary: 0 0% 98%; + --hover-bg: 0 0% 96%; + --icon-color: 0 0% 45%; --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card-foreground: 0 0% 10%; --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover-foreground: 0 0% 10%; - --primary: 222 82% 53%; /* Updated to match #2562eb */ - --primary-foreground: 210 40% 98%; + --primary: 0 0% 10%; + --primary-foreground: 0 0% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 0 0% 96%; + --secondary-foreground: 0 0% 10%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: 0 0% 96%; + --muted-foreground: 0 0% 45%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 0 0% 96%; + --accent-foreground: 0 0% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 84% 60%; + --destructive-foreground: 0 0% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --border: 0 0% 90%; + --input: 0 0% 90%; + --ring: 0 0% 80%; --radius: 0.5rem; - --border-color: #e9ebee; - --card-bg: #fefffe; - --card-title: #3c3c3a; - - - /* Shadow Colors */ - --shadow-color: rgba(0, 0, 0, 0.05); - --shadow-color-dark: rgba(0, 0, 0, 0.2); - - /* Gradient Colors */ - --gradient-start: #faf9f5; - --gradient-end: rgba(250, 249, 245, 0); + --border-color: #e4e4e4; + --card-bg: #ffffff; + --card-title: #000000; } .dark { - /* Base theme colors */ - --background: 60 5% 15%; /* Updated to match #272724 */ - --foreground: 0 0% 94%; /* Updated to match #f0f0f0 */ - --background-secondary: #1e1e1c; - --hover-bg: #141413; - --icon-color: rgba(240, 240, 240, 0.6); + --background: 0 0% 9%; + --foreground: 0 0% 98%; + --background-secondary: 0 0% 7%; + --hover-bg: 0 0% 15%; + --icon-color: 0 0% 70%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; + --card: 0 0% 12%; + --card-foreground: 0 0% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; + --popover: 0 0% 12%; + --popover-foreground: 0 0% 98%; - --primary: 222 82% 53%; /* Updated to match #2562eb */ - --primary-foreground: 222.2 47.4% 11.2%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; + --secondary: 0 0% 15%; + --secondary-foreground: 0 0% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; + --muted: 0 0% 15%; + --muted-foreground: 0 0% 65%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --accent: 0 0% 15%; + --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 84% 40%; + --destructive-foreground: 0 0% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; + --border: 0 0% 20%; + --input: 0 0% 20%; + --ring: 0 0% 28%; --border-color: #2a2a2a; - --card-bg: #30302e; - --card-title: #c3c1b6; - - - - /* Shadow Colors */ - --shadow-color: rgba(0, 0, 0, 0.2); - --shadow-color-dark: rgba(0, 0, 0, 0.3); - - /* Gradient Colors */ - --gradient-start: #272724; - --gradient-end: rgba(39, 39, 36, 0); + --card-bg: #1a1a1a; + --card-title: #ffffff; + } } -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} - -@layer utilities { - .bg-hover { - background-color: var(--hover-bg); - } - .text-icon { - color: var(--icon-color); - } - .shadow-custom { - box-shadow: 0 2px 10px 0 var(--shadow-color); - } - .dark .shadow-custom { - box-shadow: 0 2px 10px 0 var(--shadow-color-dark); - } -} \ No newline at end of file diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index f3cd9802..8ef77ad0 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,9 +1,12 @@ import './globals.css'; import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; +import { Manrope } from 'next/font/google'; import { Providers } from './providers'; -const inter = Inter({ subsets: ['latin'] }); +const manrope = Manrope({ + subsets: ['latin'], + variable: '--font-sans', +}); export const metadata: Metadata = { title: 'AgentPress', @@ -17,7 +20,7 @@ export default function RootLayout({ }) { return ( - + {children} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index d47d8b8f..bd061fd1 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,224 +1,461 @@ +'use client' + import Link from 'next/link'; -import NavBar from './components/NavBar'; +import Image from 'next/image'; +import { ArrowRight, Check, Command, Sparkles, Send } from 'lucide-react'; +import { useState } from 'react'; +import { Input } from '@/components/ui/input'; +import NavBar from '@/components/layout/NavBar'; + +export default function Home() { + const [inputValue, setInputValue] = useState(''); + const [isTyping, setIsTyping] = useState(false); + + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + setIsTyping(true); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (inputValue.trim()) { + console.log('Input submitted:', inputValue); + // In a real app, you would process the input here + setIsTyping(false); + } + }; -export default function Index() { return ( -
- {/* Navigation Bar */} +
- - {/* Hero Section with centered gradient and rounded bottom */} -
-
-
-
-

- Welcome to Kortix Suna -

-

- The intelligent platform that transforms how you interact with data, automate workflows, and make decisions. -

-
- - Start Free Trial - - - See Examples - + +
+ {/* Hero Section - Centered, Clean, Impactful */} +
+ {/* Subtle grid background */} +
+
+
+
+
+ +
+ {/* Centered hero content */} +
+
+ THE NEXT GENERATION AI AGENT +
+

+ Meet your AI Employee
+

+

+ A personal AI that bridges minds and actions — it doesn't just think, it delivers results. +

+ + {/* Demo input with focused styling */} +
+
+
+
+ + + +
+
+
+ {/* Decorative glow effect */} +
+
+ + {/* CTA Buttons +
+ + Get Started Free + + + Learn more + +
*/}
-
-
-
- - {/* Use Cases Section */} -
-
-

Use Cases & Examples

-
- {[ - { - title: "Data Processing", - description: "Process and analyze large datasets with intelligent automation that adapts to your specific needs." - }, - { - title: "Workflow Optimization", - description: "Streamline complex workflows with AI-powered optimization that reduces manual steps by up to 80%." - }, - { - title: "Decision Support", - description: "Get actionable insights and recommendations based on your data, helping you make better decisions faster." - }, - { - title: "Customer Analytics", - description: "Understand customer behavior patterns and preferences to create personalized experiences." - }, - { - title: "Predictive Maintenance", - description: "Anticipate equipment failures before they happen, reducing downtime and maintenance costs." - }, - { - title: "Supply Chain Optimization", - description: "Improve efficiency and reduce costs by optimizing your entire supply chain with intelligent forecasting." - } - ].map((useCase, index) => ( -
-

{useCase.title}

-

{useCase.description}

-
- ))} -
-
-
- - {/* Pricing Section */} -
-
-

Pricing Plans

-
- {[ - { - name: "Starter", - price: "$49", - period: "per month", - description: "Perfect for individuals and small teams just getting started.", - features: [ - "Up to 5 users", - "10GB storage", - "Basic analytics", - "Standard support" - ], - cta: "Start with Starter", - featured: false - }, - { - name: "Professional", - price: "$99", - period: "per month", - description: "Ideal for growing businesses with more advanced needs.", - features: [ - "Up to 20 users", - "50GB storage", - "Advanced analytics", - "Priority support", - "Workflow automation" - ], - cta: "Choose Professional", - featured: true - }, - { - name: "Enterprise", - price: "Custom", - period: "pricing", - description: "Tailored solutions for large organizations with complex requirements.", - features: [ - "Unlimited users", - "Unlimited storage", - "Custom integrations", - "Dedicated support", - "Advanced security", - "On-premise options" - ], - cta: "Contact Sales", - featured: false - } - ].map((plan, index) => ( -
-

{plan.name}

-
- {plan.price} - {plan.period} +
+ + {/* Trusted By / Social Proof Section */} +
+
+

Trusted by innovative teams

+
+ {['Notion', 'Figma', 'Linear', 'Vercel', 'Stripe', 'Loom'].map((company, i) => ( +
+
+ {company} +
+
+ ))} +
+
+
+ + {/* Key Features Section */} +
+
+
+
FEATURES
+

Empower Your Workflow with AI

+

+ From research and content creation to data analysis, Suna handles it all with remarkable precision. +

+
+ + {/* Feature Cards with simpler, cleaner design */} +
+ {[ + { + title: "Research & Analysis", + description: "Turn complex data into clear insights and actionable recommendations.", + icon: ( + + + + ) + }, + { + title: "Content Creation", + description: "Generate high-quality, context-aware content tailored to your needs.", + icon: ( + + + + ) + }, + { + title: "Task Automation", + description: "Let Suna handle repetitive tasks while you focus on what matters.", + icon: ( + + + + ) + } + ].map((feature, i) => ( +
+
+ {feature.icon} +
+

{feature.title}

+

{feature.description}

+
+ ))} +
+ + {/* Demo Feature - AI Agent Chat */} +
+
+
+
+
S
+
+
+

I need help planning a trip to Japan in April.

+
+
+
+
+
AI
+
+
+

I'll help plan your Japan trip in April

+

I'll create a detailed itinerary considering weather, cherry blossom season, popular attractions, and local events. Would you like to focus on specific regions or activities?

+
+
+
-

{plan.description}

-
    - {plan.features.map((feature, i) => ( -
  • - - - - {feature} -
  • - ))} -
-
- ))} +
-
- - - {/* CTA Section */} -
-
-

Ready to transform your workflow?

-

- Join thousands of satisfied users who have revolutionized their processes with Kortix Suna. -

- - Start Your Free Trial - -
-
- + + + {/* How It Works - Simplified Step Process */} +
+
+
+
HOW IT WORKS
+

Simple. Seamless. Smart.

+

+ From initial request to completed task, Suna streamlines your workflow with intelligent automation. +

+
+ +
+ {/* Line connecting steps */} +
+ + {[ + { + step: "01", + title: "Request", + description: "Make a natural language request describing what you need done." + }, + { + step: "02", + title: "Process", + description: "Suna understands context, gathers information, and plans execution." + }, + { + step: "03", + title: "Deliver", + description: "Receive completed tasks with full documentation of process and results." + } + ].map((step, i) => ( +
+
+
+ {step.step} +
+

{step.title}

+

{step.description}

+
+
+ ))} +
+
+
+ + {/* Pricing Section - More Minimal and Clean */} +
+
+
+
PRICING
+

Pricing that scales with you

+

+ Choose the plan that works best for your needs. +

+
+ +
+ {/* Free Plan */} +
+
+

Free

+
+ $0 + /month +
+
+ +
    +
  • + + 5 agent requests per day +
  • +
  • + + Access to basic AI capabilities +
  • +
  • + + Community support +
  • +
+ + + Get Started + +
+ + {/* Personal Plan */} +
+
+

Personal

+
+ $12 + /month +
+
+ +
    +
  • + + Unlimited agent requests +
  • +
  • + + Access to all core AI capabilities +
  • +
  • + + Basic integrations with popular tools +
  • +
  • + + Email support within 24 hours +
  • +
+ + + Get Started + +
+ + {/* Business Plan */} +
+
Popular
+
+

Business

+
+ $24 + /month +
+
+ +
    +
  • + + Unlimited agent operation hours +
  • +
  • + + Advanced AI capabilities and customization +
  • +
  • + + Full integration suite with API access +
  • +
  • + + Priority support with 4-hour response time +
  • +
  • + + Multi-user access with team management +
  • +
+ + + Get Started + +
+
+
+
+ + {/* FAQ Section */} +
+
+
+
FAQ
+

Frequently Asked Questions

+
+ +
+ {[ + { + question: "What is Suna?", + answer: "Suna is an AI agent designed to help streamline your workflow by handling various tasks from research and content creation to data analysis and more." + }, + { + question: "How does it work?", + answer: "Simply describe what you need in natural language. Suna understands your request, gathers relevant information, and delivers completed tasks with full documentation." + }, + { + question: "Is my data secure?", + answer: "Yes. We prioritize data security and privacy. All data is encrypted and we never share your information with third parties without your explicit permission." + }, + { + question: "Can Suna integrate with other tools?", + answer: "Yes. Suna integrates with popular productivity tools, communication platforms, and data sources to provide a seamless workflow experience." + } + ].map((faq, i) => ( +
+

{faq.question}

+

{faq.answer}

+
+ ))} +
+
+
+ + {/* Final CTA Section */} +
+
+

Automate.
Simplify. Thrive.

+ + Get Started Free + +
+
+
+ {/* Footer */} -