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 ( -
+- The intelligent platform that transforms how you interact with data, automate workflows, and make decisions. -
-+ A personal AI that bridges minds and actions — it doesn't just think, it delivers results. +
+ + {/* Demo input with focused styling */} +{useCase.description}
-Trusted by innovative teams
++ From research and content creation to data analysis, Suna handles it all with remarkable precision. +
+{feature.description}
+I need help planning a trip to Japan in April.
+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}
-- Join thousands of satisfied users who have revolutionized their processes with Kortix Suna. -
- - Start Your Free Trial - -+ From initial request to completed task, Suna streamlines your workflow with intelligent automation. +
+{step.description}
++ Choose the plan that works best for your needs. +
+{faq.answer}
+