[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match AWS-style design brief with pink-to-blue gradient theme */ --background: #f0f4ff; --foreground: #1e293b; --card: #ffffff; --card-foreground: #1e293b; --popover: rgba(255, 255, 255, 0.9); --popover-foreground: #1e293b; --primary: #d5006d; --primary-foreground: #ffffff; --secondary: #3b82f6; --secondary-foreground: #ffffff; --muted: #f0f4ff; --muted-foreground: #1e293b; --accent: #3b82f6; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e5e7eb; --input: #ffffff; --ring: rgba(59, 130, 246, 0.5); --chart-1: #3b82f6; --chart-2: #d5006d; --chart-3: #fbbf24; --chart-4: #6ee7b7; --chart-5: #9333ea; --radius: 0.5rem; --sidebar: #ffffff; --sidebar-foreground: #1e293b; --sidebar-primary: #d5006d; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #3b82f6; --sidebar-accent-foreground: #ffffff; --sidebar-border: #e5e7eb; --sidebar-ring: rgba(59, 130, 246, 0.5); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { ChevronDown, Globe, Search, User } from "lucide-react" export function Header() { return (

{/* Top bar */}

English

Support

My account

{/* Main navigation */}

Saas

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Header } from "@/components/header" import { Carousel } from "@/components/carousel" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/carousel.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react" const slides = [ { id: 1, tag: "Generative AI", title: "Customize Amazon Nova models in SageMaker AI for your business needs", cta: "Start customizing", gradient: "from-pink-500 via-purple-600 to-blue-600", }, { id: 2, tag: "Machine Learning", title: "Build and deploy ML models at scale with Amazon SageMaker", cta: "Get started", gradient: "from-blue-500 via-indigo-600 to-purple-600", }, { id: 3, tag: "AI Services", title: "Integrate pre-trained AI services into your applications", cta: "Explore services", gradient: "from-purple-500 via-pink-600 to-red-600", }, { id: 4, tag: "Data Analytics", title: "Transform your data into actionable insights with Saas Analytics", cta: "Learn more", gradient: "from-green-500 via-teal-600 to-blue-600", }, { id: 5, tag: "Cloud Computing", title: "Scale your infrastructure with Saas cloud solutions", cta: "Start building", gradient: "from-orange-500 via-red-600 to-pink-600", }, ] export function Carousel() { const [currentSlide, setCurrentSlide] = useState(0) const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % slides.length) } const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length) } const goToSlide = (index: number) => { setCurrentSlide(index) } return (

{slide.title}

About

Tags

Share

About

Tags

Share

More from dagoatao

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dagoatao

More Templates Like This