mirror of https://github.com/kortix-ai/suna.git
1 line
20 KiB
JSON
1 line
20 KiB
JSON
{"messages": [{"role": "user", "content": "Let's create a modern web application using Next.js 14. Start by:\n\n 1. Setting up the Next.js 14 project:\n - Initialize with TypeScript and Tailwind CSS\n - Set up proper project structure using App Router\n - Configure development environment\n \n 2. Creating core components:\n - Layout component with modern design\n - Navigation bar with mobile responsiveness\n - Hero section with animations\n - Feature sections with grid layouts\n \n 3. Implementing key features:\n - Server components for static content\n - Client components for interactive elements\n - API routes for data handling\n - Loading and error states\n \n 4. Adding modern UI elements:\n - Smooth animations and transitions\n - Dark mode support\n - Responsive design patterns\n - Accessibility features\n \n Start with project initialization and explain each step.\n Use terminal commands for setup and file operations for development."}, {"role": "assistant", "content": "I'll help you create a modern Next.js 14 application with all the requested features. Let's start with the project initialization and structure setup. I'll explain each step and make the necessary changes.\n\nFirst, let's set up the project structure for Next.js 14 with TypeScript and Tailwind CSS. We'll need to update the existing project to use the new App Router and TypeScript.\n\n1. First, let's update the package.json to include TypeScript and other necessary dependencies:", "tool_calls": [{"id": "toolu_014n8g4p2H6fgCpvtFYhuzxV", "type": "function", "function": {"name": "update_file", "arguments": "{\"file_path\": \"app/package.json\", \"content\": \"{\\n \\\"name\\\": \\\"modern-nextjs-app\\\",\\n \\\"version\\\": \\\"0.1.0\\\",\\n \\\"private\\\": true,\\n \\\"scripts\\\": {\\n \\\"dev\\\": \\\"next dev\\\",\\n \\\"build\\\": \\\"next build\\\",\\n \\\"start\\\": \\\"next start\\\",\\n \\\"lint\\\": \\\"next lint\\\"\\n },\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18\\\",\\n \\\"react-dom\\\": \\\"^18\\\",\\n \\\"next\\\": \\\"14.0.3\\\",\\n \\\"framer-motion\\\": \\\"^10.16.4\\\",\\n \\\"class-variance-authority\\\": \\\"^0.7.0\\\",\\n \\\"clsx\\\": \\\"^2.0.0\\\"\\n },\\n \\\"devDependencies\\\": {\\n \\\"@types/node\\\": \\\"^20\\\",\\n \\\"@types/react\\\": \\\"^18\\\",\\n \\\"@types/react-dom\\\": \\\"^18\\\",\\n \\\"autoprefixer\\\": \\\"^10.0.1\\\",\\n \\\"postcss\\\": \\\"^8\\\",\\n \\\"tailwindcss\\\": \\\"^3.3.0\\\",\\n \\\"typescript\\\": \\\"^5\\\",\\n \\\"eslint\\\": \\\"^8\\\",\\n \\\"eslint-config-next\\\": \\\"14.0.3\\\"\\n }\\n}\"}"}}]}, {"role": "tool", "tool_call_id": "toolu_014n8g4p2H6fgCpvtFYhuzxV", "name": "update_file", "content": "ToolResult(success=True, output=\"File 'app/package.json' updated successfully.\")"}, {"role": "user", "content": "Continue developing the Next.js application. Focus on improving UI components, adding features, or optimizing the code."}, {"role": "assistant", "content": "I'll continue building the application by setting up the App Router structure and creating essential components. Let's create a modern, well-organized project structure using Next.js 14 best practices.\n\n1. First, let's create the App Router structure and a modern layout component:", "tool_calls": [{"id": "toolu_01CcgEep4FEPQSr1Lc9rNex3", "type": "function", "function": {"name": "create_file", "arguments": "{\"file_path\": \"app/src/app/layout.tsx\", \"content\": \"import type { Metadata } from 'next'\\nimport { Inter } from 'next/font/google'\\nimport '../styles/globals.css'\\n\\nconst inter = Inter({ subsets: ['latin'] })\\n\\nexport const metadata: Metadata = {\\n title: 'Modern Next.js Application',\\n description: 'A modern web application built with Next.js 14',\\n}\\n\\nexport default function RootLayout({\\n children,\\n}: {\\n children: React.ReactNode\\n}) {\\n return (\\n <html lang=\\\"en\\\" suppressHydrationWarning>\\n <body className={`${inter.className} min-h-screen bg-white dark:bg-gray-900`}>\\n {children}\\n </body>\\n </html>\\n )\\n}\"}"}}]}, {"role": "tool", "tool_call_id": "toolu_01CcgEep4FEPQSr1Lc9rNex3", "name": "create_file", "content": "ToolResult(success=True, output=\"File 'app/src/app/layout.tsx' created successfully.\")"}, {"role": "user", "content": "Continue developing the Next.js application. Focus on improving UI components, adding features, or optimizing the code."}, {"role": "assistant", "content": "I'll continue by creating essential UI components, including a modern navigation bar, hero section, and setting up our component structure. I'll explain each addition.\n\n1. First, let's create a components directory and add our Navbar component:", "tool_calls": [{"id": "toolu_017PoJBEfe3is11mf2F3D9y2", "type": "function", "function": {"name": "create_file", "arguments": "{\"file_path\": \"app/src/components/navigation/Navbar.tsx\", \"content\": \"'use client';\\n\\nimport { useState } from 'react';\\nimport Link from 'next/link';\\nimport { motion, AnimatePresence } from 'framer-motion';\\n\\nexport default function Navbar() {\\n const [isOpen, setIsOpen] = useState(false);\\n\\n return (\\n <nav className=\\\"fixed w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md z-50\\\">\\n <div className=\\\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\\\">\\n <div className=\\\"flex items-center justify-between h-16\\\">\\n <div className=\\\"flex items-center\\\">\\n <Link href=\\\"/\\\" className=\\\"text-2xl font-bold text-gray-900 dark:text-white\\\">\\n ModernApp\\n </Link>\\n </div>\\n \\n {/* Desktop Navigation */}\\n <div className=\\\"hidden md:block\\\">\\n <div className=\\\"ml-10 flex items-baseline space-x-4\\\">\\n <NavLink href=\\\"/\\\">Home</NavLink>\\n <NavLink href=\\\"/features\\\">Features</NavLink>\\n <NavLink href=\\\"/about\\\">About</NavLink>\\n <NavLink href=\\\"/contact\\\">Contact</NavLink>\\n </div>\\n </div>\\n\\n {/* Mobile menu button */}\\n <div className=\\\"md:hidden\\\">\\n <button\\n onClick={() => setIsOpen(!isOpen)}\\n className=\\\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800\\\"\\n aria-expanded=\\\"false\\\"\\n >\\n <span className=\\\"sr-only\\\">Open main menu</span>\\n {!isOpen ? (\\n <svg className=\\\"block h-6 w-6\\\" stroke=\\\"currentColor\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\">\\n <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth=\\\"2\\\" d=\\\"M4 6h16M4 12h16M4 18h16\\\" />\\n </svg>\\n ) : (\\n <svg className=\\\"block h-6 w-6\\\" stroke=\\\"currentColor\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\">\\n <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth=\\\"2\\\" d=\\\"M6 18L18 6M6 6l12 12\\\" />\\n </svg>\\n )}\\n </button>\\n </div>\\n </div>\\n </div>\\n\\n {/* Mobile Navigation */}\\n <AnimatePresence>\\n {isOpen && (\\n <motion.div\\n initial={{ opacity: 0, y: -10 }}\\n animate={{ opacity: 1, y: 0 }}\\n exit={{ opacity: 0, y: -10 }}\\n className=\\\"md:hidden\\\"\\n >\\n <div className=\\\"px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white dark:bg-gray-900 shadow-lg\\\">\\n <MobileNavLink href=\\\"/\\\">Home</MobileNavLink>\\n <MobileNavLink href=\\\"/features\\\">Features</MobileNavLink>\\n <MobileNavLink href=\\\"/about\\\">About</MobileNavLink>\\n <MobileNavLink href=\\\"/contact\\\">Contact</MobileNavLink>\\n </div>\\n </motion.div>\\n )}\\n </AnimatePresence>\\n </nav>\\n );\\n}\\n\\nfunction NavLink({ href, children }: { href: string; children: React.ReactNode }) {\\n return (\\n <Link\\n href={href}\\n className=\\\"text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors\\\"\\n >\\n {children}\\n </Link>\\n );\\n}\\n\\nfunction MobileNavLink({ href, children }: { href: string; children: React.ReactNode }) {\\n return (\\n <Link\\n href={href}\\n className=\\\"text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors\\\"\\n >\\n {children}\\n </Link>\\n );\\n}\"}"}}]}, {"role": "tool", "tool_call_id": "toolu_017PoJBEfe3is11mf2F3D9y2", "name": "create_file", "content": "ToolResult(success=True, output=\"File 'app/src/components/navigation/Navbar.tsx' created successfully.\")"}, {"role": "user", "content": "Continue developing the Next.js application. Focus on improving UI components, adding features, or optimizing the code."}, {"role": "assistant", "content": "I'll create a modern Hero section component and a Features section using React Server Components. We'll add smooth animations and responsive design using Framer Motion and Tailwind CSS.\n\n1. First, let's create a Hero section component:", "tool_calls": [{"id": "toolu_014jRQj1j4ivmfYQwzGkR81d", "type": "function", "function": {"name": "create_file", "arguments": "{\"file_path\": \"app/src/components/sections/Hero.tsx\", \"content\": \"'use client';\\n\\nimport { motion } from 'framer-motion';\\nimport Image from 'next/image';\\n\\nexport default function Hero() {\\n return (\\n <section className=\\\"relative min-h-screen flex items-center justify-center py-20 px-4\\\">\\n {/* Background gradient */}\\n <div className=\\\"absolute inset-0 bg-gradient-to-b from-transparent to-gray-100 dark:to-gray-800\\\" />\\n \\n <div className=\\\"container mx-auto max-w-7xl\\\">\\n <div className=\\\"grid lg:grid-cols-2 gap-12 items-center\\\">\\n {/* Text Content */}\\n <motion.div\\n initial={{ opacity: 0, y: 20 }}\\n animate={{ opacity: 1, y: 0 }}\\n transition={{ duration: 0.5 }}\\n className=\\\"relative z-10\\\"\\n >\\n <motion.h1 \\n className=\\\"text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6\\\"\\n initial={{ opacity: 0, y: 20 }}\\n animate={{ opacity: 1, y: 0 }}\\n transition={{ delay: 0.2 }}\\n >\\n Build Modern Web\\n <span className=\\\"text-blue-600 dark:text-blue-400\\\"> Applications</span>\\n </motion.h1>\\n \\n <motion.p \\n className=\\\"text-xl text-gray-600 dark:text-gray-300 mb-8\\\"\\n initial={{ opacity: 0, y: 20 }}\\n animate={{ opacity: 1, y: 0 }}\\n transition={{ delay: 0.3 }}\\n >\\n Create stunning websites with Next.js 14, featuring server components,\\n modern animations, and responsive design.\\n </motion.p>\\n \\n <motion.div\\n className=\\\"flex flex-wrap gap-4\\\"\\n initial={{ opacity: 0, y: 20 }}\\n animate={{ opacity: 1, y: 0 }}\\n transition={{ delay: 0.4 }}\\n >\\n <button className=\\\"px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors\\\">\\n Get Started\\n </button>\\n <button className=\\\"px-8 py-3 border border-gray-300 dark:border-gray-600 hover:border-blue-600 dark:hover:border-blue-400 rounded-lg font-medium transition-colors\\\">\\n Learn More\\n </button>\\n </motion.div>\\n </motion.div>\\n\\n {/* Image/Visual Content */}\\n <motion.div\\n initial={{ opacity: 0, scale: 0.9 }}\\n animate={{ opacity: 1, scale: 1 }}\\n transition={{ delay: 0.2, duration: 0.5 }}\\n className=\\\"relative z-10 hidden lg:block\\\"\\n >\\n <div className=\\\"relative w-full h-[600px] rounded-2xl overflow-hidden\\\">\\n <div className=\\\"absolute inset-0 bg-gradient-to-tr from-blue-600/20 to-purple-600/20 dark:from-blue-900/30 dark:to-purple-900/30\\\" />\\n <div className=\\\"absolute inset-0 backdrop-blur-sm\\\" />\\n <div className=\\\"absolute inset-0 grid place-items-center\\\">\\n <div className=\\\"p-8 text-center\\\">\\n <div className=\\\"w-64 h-64 rounded-full bg-blue-600/20 dark:bg-blue-400/20 animate-pulse\\\" />\\n </div>\\n </div>\\n </div>\\n </motion.div>\\n </div>\\n </div>\\n\\n {/* Decorative elements */}\\n <div className=\\\"absolute inset-0 overflow-hidden pointer-events-none\\\">\\n <div className=\\\"absolute -top-1/2 -right-1/2 w-full h-full\\\">\\n <div className=\\\"absolute inset-0 bg-gradient-radial from-blue-400/20 to-transparent dark:from-blue-600/20 blur-3xl\\\" />\\n </div>\\n <div className=\\\"absolute -bottom-1/2 -left-1/2 w-full h-full\\\">\\n <div className=\\\"absolute inset-0 bg-gradient-radial from-purple-400/20 to-transparent dark:from-purple-600/20 blur-3xl\\\" />\\n </div>\\n </div>\\n </section>\\n );\\n}\"}"}}]}, {"role": "tool", "tool_call_id": "toolu_014jRQj1j4ivmfYQwzGkR81d", "name": "create_file", "content": "ToolResult(success=True, output=\"File 'app/src/components/sections/Hero.tsx' created successfully.\")"}, {"role": "user", "content": "Continue developing the Next.js application. Focus on improving UI components, adding features, or optimizing the code."}, {"role": "assistant", "content": "I'll create a Features section component and update our application's styling. Let's add a modern Features section with a grid layout, animations, and responsive design.\n\n1. First, let's create a Features section component:", "tool_calls": [{"id": "toolu_01GBytPAcLVstSd5hTWWnEMx", "type": "function", "function": {"name": "create_file", "arguments": "{\"file_path\": \"app/src/components/sections/Features.tsx\", \"content\": \"'use client';\\n\\nimport { motion } from 'framer-motion';\\n\\nconst features = [\\n {\\n title: 'Server Components',\\n description: 'Built-in support for React Server Components, enabling faster page loads and reduced client-side JavaScript.',\\n icon: (\\n <svg className=\\\"w-6 h-6\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" viewBox=\\\"0 0 24 24\\\">\\n <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M13 10V3L4 14h7v7l9-11h-7z\\\" />\\n </svg>\\n ),\\n },\\n {\\n title: 'Modern Animations',\\n description: 'Smooth, performant animations powered by Framer Motion for an engaging user experience.',\\n icon: (\\n <svg className=\\\"w-6 h-6\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" viewBox=\\\"0 0 24 24\\\">\\n <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5\\\" />\\n </svg>\\n ),\\n },\\n {\\n title: 'Responsive Design',\\n description: 'Fully responsive layouts built with Tailwind CSS for a seamless experience across all devices.',\\n icon: (\\n <svg className=\\\"w-6 h-6\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" viewBox=\\\"0 0 24 24\\\">\\n <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\\\" />\\n </svg>\\n ),\\n },\\n {\\n title: 'Dark Mode',\\n description: 'Built-in dark mode support with smooth transitions and system preference detection.',\\n icon: (\\n <svg className=\\\"w-6 h-6\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" viewBox=\\\"0 0 24 24\\\">\\n <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\\\" />\\n </svg>\\n ),\\n },\\n];\\n\\nconst containerVariants = {\\n hidden: { opacity: 0 },\\n visible: {\\n opacity: 1,\\n transition: {\\n staggerChildren: 0.1,\\n },\\n },\\n};\\n\\nconst itemVariants = {\\n hidden: { opacity: 0, y: 20 },\\n visible: {\\n opacity: 1,\\n y: 0,\\n transition: {\\n duration: 0.5,\\n },\\n },\\n};\\n\\nexport default function Features() {\\n return (\\n <section className=\\\"py-20 px-4 bg-gray-50 dark:bg-gray-800\\\">\\n <div className=\\\"container mx-auto max-w-7xl\\\">\\n <div className=\\\"text-center mb-16\\\">\\n <motion.h2\\n initial={{ opacity: 0, y: 20 }}\\n whileInView={{ opacity: 1, y: 0 }}\\n viewport={{ once: true }}\\n className=\\\"text-4xl font-bold text-gray-900 dark:text-white mb-4\\\"\\n >\\n Powerful Features\\n </motion.h2>\\n <motion.p\\n initial={{ opacity: 0, y: 20 }}\\n whileInView={{ opacity: 1, y: 0 }}\\n viewport={{ once: true }}\\n transition={{ delay: 0.2 }}\\n className=\\\"text-xl text-gray-600 dark:text-gray-300\\\"\\n >\\n Everything you need to build modern web applications\\n </motion.p>\\n </div>\\n\\n <motion.div\\n variants={containerVariants}\\n initial=\\\"hidden\\\"\\n whileInView=\\\"visible\\\"\\n viewport={{ once: true }}\\n className=\\\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\\\"\\n >\\n {features.map((feature, index) => (\\n <motion.div\\n key={index}\\n variants={itemVariants}\\n className=\\\"relative p-6 bg-white dark:bg-gray-900 rounded-xl shadow-xl hover:shadow-2xl transition-shadow\\\"\\n >\\n <div className=\\\"w-12 h-12 flex items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 mb-4\\\">\\n {feature.icon}\\n </div>\\n <h3 className=\\\"text-xl font-semibold text-gray-900 dark:text-white mb-2\\\">\\n {feature.title}\\n </h3>\\n <p className=\\\"text-gray-600 dark:text-gray-400\\\">\\n {feature.description}\\n </p>\\n </motion.div>\\n ))}\\n </motion.div>\\n </div>\\n </section>\\n );\\n}\"}"}}]}, {"role": "tool", "tool_call_id": "toolu_01GBytPAcLVstSd5hTWWnEMx", "name": "create_file", "content": "ToolResult(success=True, output=\"File 'app/src/components/sections/Features.tsx' created successfully.\")"}, {"role": "user", "content": "Continue developing the Next.js application. Focus on improving UI components, adding features, or optimizing the code."}]} |