Examples

import { Icon, Image, Video } from 'assets-ai';

export default function LandingPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative h-screen">
        <Video 
          description="modern tech office timelapse" 
          width="100%" 
          height="100%"
          autoPlay
          loop
          muted
          className="absolute inset-0 w-full h-full object-cover opacity-50"
        />
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center">
          <h1 className="text-6xl font-bold text-white mb-4">
            Build Better Products
          </h1>
          <p className="text-xl text-white mb-8">
            The modern development platform for teams
          </p>
          <button className="bg-blue-600 text-white px-8 py-3 rounded-lg flex items-center gap-2">
            <Icon description="rocket launch" size={20} color="#fff" />
            Get Started
          </button>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 px-6">
        <h2 className="text-4xl font-bold text-center mb-12">Features</h2>
        <div className="grid grid-cols-3 gap-8 max-w-6xl mx-auto">
          {[
            { icon: "lightning bolt fast", title: "Fast", desc: "Blazing fast performance" },
            { icon: "shield security", title: "Secure", desc: "Enterprise-grade security" },
            { icon: "globe world", title: "Global", desc: "Worldwide CDN" },
          ].map((feature, i) => (
            <div key={i} className="text-center">
              <Icon 
                description={feature.icon} 
                size={48} 
                color="#3b82f6"
                className="mx-auto mb-4"
                fallback={true}
              />
              <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
              <p className="text-gray-600">{feature.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 px-6 bg-gray-50">
        <h2 className="text-4xl font-bold text-center mb-12">What Our Users Say</h2>
        <div className="grid grid-cols-3 gap-8 max-w-6xl mx-auto">
          {["CEO testimonial", "Developer testimonial", "Designer testimonial"].map((desc, i) => (
            <div key={i} className="bg-white rounded-lg p-6 shadow-lg">
              <Video 
                description={desc} 
                width="100%" 
                height={200}
                controls
                className="rounded mb-4"
                fallback={true}
              />
              <p className="text-gray-600">Testimonial content here...</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

import { Icon, Image } from 'assets-ai';

export default function ProductPage({ product }) {
  return (
    <div className="max-w-7xl mx-auto px-6 py-12">
      <div className="grid grid-cols-2 gap-12">
        {/* Product Gallery */}
        <div className="space-y-4">
          <Image 
            description={product.mainImage}
            width={600}
            height={600}
            alt={product.name}
            className="w-full rounded-lg"
            fallback={true}
          />
          <div className="grid grid-cols-4 gap-4">
            {product.images.map((img, i) => (
              <Image 
                key={i}
                description={img}
                width={140}
                height={140}
                alt={`${product.name} view ${i + 1}`}
                className="w-full rounded cursor-pointer hover:opacity-75"
                fallback={true}
              />
            ))}
          </div>
        </div>

        {/* Product Details */}
        <div>
          <h1 className="text-4xl font-bold mb-4">{product.name}</h1>
          <div className="flex items-center gap-2 mb-6">
            <div className="flex">
              {[1,2,3,4,5].map((star) => (
                <Icon 
                  key={star}
                  description="star filled" 
                  size={20} 
                  color="#fbbf24"
                />
              ))}
            </div>
            <span className="text-gray-600">(128 reviews)</span>
          </div>
          
          <p className="text-3xl font-bold mb-6">${product.price}</p>
          <p className="text-gray-600 mb-8">{product.description}</p>

          <div className="space-y-4 mb-8">
            <div className="flex items-center gap-3">
              <Icon description="truck delivery" size={24} color="#10b981" />
              <span>Free shipping on orders over $50</span>
            </div>
            <div className="flex items-center gap-3">
              <Icon description="return arrow" size={24} color="#10b981" />
              <span>30-day return policy</span>
            </div>
            <div className="flex items-center gap-3">
              <Icon description="shield check" size={24} color="#10b981" />
              <span>2-year warranty included</span>
            </div>
          </div>

          <button className="w-full bg-blue-600 text-white py-4 rounded-lg flex items-center justify-center gap-2">
            <Icon description="shopping cart" size={20} color="#fff" />
            Add to Cart
          </button>
        </div>
      </div>

      {/* Related Products */}
      <section className="mt-20">
        <h2 className="text-3xl font-bold mb-8">Related Products</h2>
        <div className="grid grid-cols-4 gap-6">
          {product.related.map((item, i) => (
            <div key={i} className="group cursor-pointer">
              <Image 
                description={item.image}
                width={300}
                height={300}
                alt={item.name}
                className="w-full rounded-lg mb-4 group-hover:opacity-75"
                fallback={true}
              />
              <h3 className="font-bold mb-2">{item.name}</h3>
              <p className="text-gray-600">${item.price}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

import { Icon, Image } from 'assets-ai';

export default function BlogPage({ posts }) {
  return (
    <div className="max-w-7xl mx-auto px-6 py-12">
      {/* Featured Post */}
      <article className="mb-20">
        <Image 
          description={posts[0].imageDescription}
          width={1200}
          height={600}
          alt={posts[0].title}
          className="w-full rounded-2xl mb-8"
          fallback={true}
        />
        <div className="max-w-3xl mx-auto">
          <div className="flex items-center gap-4 mb-4">
            <Image 
              description={`${posts[0].author.name} profile photo`}
              width={48}
              height={48}
              alt={posts[0].author.name}
              className="rounded-full"
              fallback={true}
            />
            <div>
              <p className="font-bold">{posts[0].author.name}</p>
              <p className="text-gray-600 text-sm">{posts[0].date}</p>
            </div>
          </div>
          <h1 className="text-5xl font-bold mb-6">{posts[0].title}</h1>
          <p className="text-xl text-gray-600 mb-8">{posts[0].excerpt}</p>
          <button className="flex items-center gap-2 text-blue-600">
            Read More
            <Icon description="arrow right" size={20} color="#2563eb" />
          </button>
        </div>
      </article>

      {/* Recent Posts Grid */}
      <section>
        <h2 className="text-3xl font-bold mb-8">Recent Posts</h2>
        <div className="grid grid-cols-3 gap-8">
          {posts.slice(1).map((post, i) => (
            <article key={i} className="group cursor-pointer">
              <Image 
                description={post.imageDescription}
                width={400}
                height={250}
                alt={post.title}
                className="w-full rounded-lg mb-4 group-hover:opacity-75"
                fallback={true}
              />
              <div className="flex items-center gap-2 mb-3">
                <Icon description="calendar" size={16} color="#9ca3af" />
                <span className="text-sm text-gray-600">{post.date}</span>
                <Icon description="clock" size={16} color="#9ca3af" />
                <span className="text-sm text-gray-600">{post.readTime}</span>
              </div>
              <h3 className="text-xl font-bold mb-2">{post.title}</h3>
              <p className="text-gray-600 mb-4">{post.excerpt}</p>
              <div className="flex items-center gap-2">
                <Image 
                  description={`${post.author.name} avatar`}
                  width={24}
                  height={24}
                  alt={post.author.name}
                  className="rounded-full"
                />
                <span className="text-sm">{post.author.name}</span>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}

import { Icon, Image } from 'assets-ai';

export default function Dashboard() {
  return (
    <div className="flex h-screen">
      {/* Sidebar */}
      <aside className="w-64 bg-gray-900 text-white p-6">
        <div className="flex items-center gap-3 mb-8">
          <Icon description="dashboard grid" size={32} color="#fff" />
          <h1 className="text-xl font-bold">Dashboard</h1>
        </div>
        
        <nav className="space-y-2">
          {[
            { icon: "home", label: "Home" },
            { icon: "chart analytics", label: "Analytics" },
            { icon: "users team", label: "Team" },
            { icon: "folder files", label: "Projects" },
            { icon: "settings gear", label: "Settings" },
          ].map((item, i) => (
            <a 
              key={i}
              href="#"
              className="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-800"
            >
              <Icon description={item.icon} size={20} color="#fff" fallback={true} />
              <span>{item.label}</span>
            </a>
          ))}
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-8 bg-gray-50">
        <div className="mb-8">
          <h2 className="text-3xl font-bold mb-2">Welcome back!</h2>
          <p className="text-gray-600">Here's what's happening with your projects</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-4 gap-6 mb-8">
          {[
            { icon: "users", label: "Total Users", value: "2,543", change: "+12%" },
            { icon: "dollar money", label: "Revenue", value: "$45.2k", change: "+23%" },
            { icon: "shopping cart", label: "Orders", value: "856", change: "+8%" },
            { icon: "chart up", label: "Growth", value: "34%", change: "+5%" },
          ].map((stat, i) => (
            <div key={i} className="bg-white rounded-lg p-6 shadow">
              <div className="flex items-center justify-between mb-4">
                <Icon description={stat.icon} size={24} color="#3b82f6" fallback={true} />
                <span className="text-green-600 text-sm font-bold">{stat.change}</span>
              </div>
              <p className="text-gray-600 text-sm mb-1">{stat.label}</p>
              <p className="text-3xl font-bold">{stat.value}</p>
            </div>
          ))}
        </div>

        {/* Recent Activity */}
        <div className="bg-white rounded-lg p-6 shadow">
          <h3 className="text-xl font-bold mb-6">Recent Activity</h3>
          <div className="space-y-4">
            {[
              { icon: "user plus", text: "New user registered", time: "2 minutes ago" },
              { icon: "shopping bag", text: "New order received", time: "15 minutes ago" },
              { icon: "credit card", text: "Payment processed", time: "1 hour ago" },
            ].map((activity, i) => (
              <div key={i} className="flex items-center gap-4">
                <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                  <Icon description={activity.icon} size={20} color="#3b82f6" />
                </div>
                <div className="flex-1">
                  <p className="font-medium">{activity.text}</p>
                  <p className="text-sm text-gray-600">{activity.time}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
    </div>
  );
}

import { Icon, Image, Video } from 'assets-ai';

// AI Agent: Create a SaaS pricing page
export default function PricingPage() {
  const plans = [
    {
      name: "Starter",
      price: "$29",
      description: "Perfect for individuals",
      features: [
        { icon: "check circle", text: "5 projects" },
        { icon: "check circle", text: "10GB storage" },
        { icon: "check circle", text: "Basic support" },
        { icon: "x circle", text: "Advanced analytics", disabled: true },
      ]
    },
    {
      name: "Professional",
      price: "$79",
      description: "Best for small teams",
      featured: true,
      features: [
        { icon: "check circle", text: "Unlimited projects" },
        { icon: "check circle", text: "100GB storage" },
        { icon: "check circle", text: "Priority support" },
        { icon: "check circle", text: "Advanced analytics" },
      ]
    },
    {
      name: "Enterprise",
      price: "$199",
      description: "For large organizations",
      features: [
        { icon: "check circle", text: "Unlimited everything" },
        { icon: "check circle", text: "1TB storage" },
        { icon: "check circle", text: "24/7 support" },
        { icon: "check circle", text: "Custom integrations" },
      ]
    }
  ];

  return (
    <div className="min-h-screen">
      {/* Header */}
      <header className="py-6 px-6 border-b">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Icon description="rocket" size={32} color="#3b82f6" />
            <span className="text-2xl font-bold">SaaS Product</span>
          </div>
          <button className="bg-blue-600 text-white px-6 py-2 rounded-lg">
            Sign Up
          </button>
        </div>
      </header>

      {/* Hero */}
      <section className="py-20 px-6 text-center">
        <h1 className="text-6xl font-bold mb-6">Choose Your Plan</h1>
        <p className="text-xl text-gray-600 mb-8">
          Start free, upgrade when you're ready
        </p>
        <Image 
          description="pricing illustration with graphs and charts"
          width={600}
          height={400}
          alt="Pricing"
          className="mx-auto"
          fallback={true}
        />
      </section>

      {/* Pricing Cards */}
      <section className="py-20 px-6">
        <div className="grid grid-cols-3 gap-8 max-w-6xl mx-auto">
          {plans.map((plan, i) => (
            <div 
              key={i}
              className={`rounded-2xl p-8 ${
                plan.featured 
                  ? 'bg-blue-600 text-white shadow-2xl transform scale-105' 
                  : 'bg-white shadow-lg'
              }`}
            >
              <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
              <p className={plan.featured ? 'text-blue-100' : 'text-gray-600'}>
                {plan.description}
              </p>
              <p className="text-5xl font-bold my-6">{plan.price}</p>
              <p className={plan.featured ? 'text-blue-100' : 'text-gray-600'}>
                per month
              </p>
              
              <ul className="space-y-3 my-8">
                {plan.features.map((feature, j) => (
                  <li key={j} className="flex items-center gap-3">
                    <Icon 
                      description={feature.icon}
                      size={20}
                      color={feature.disabled ? '#9ca3af' : plan.featured ? '#fff' : '#10b981'}
                    />
                    <span className={feature.disabled ? 'line-through opacity-50' : ''}>
                      {feature.text}
                    </span>
                  </li>
                ))}
              </ul>

              <button className={`w-full py-3 rounded-lg font-bold ${
                plan.featured
                  ? 'bg-white text-blue-600'
                  : 'bg-blue-600 text-white'
              }`}>
                Get Started
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* Demo Video */}
      <section className="py-20 px-6 bg-gray-50">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6">See It In Action</h2>
          <Video 
            description="product demo walkthrough"
            width={960}
            height={540}
            controls
            className="w-full rounded-lg shadow-xl"
            fallback={true}
          />
        </div>
      </section>
    </div>
  );
}