Pages

What are Pages?

Pages are specific instances of templates showing what a UI looks like with real representative content. This is where everything comes together to form the actual user experience.

Characteristics

• Concrete - Use real content and data
• Specific - Represent actual user scenarios
• Complete - Include all necessary components
• Testable - Can be user tested
• Production-Ready - What users actually see

Common Pages

Home Page

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import ProductCard from '@/components/organisms/ProductCard.astro';
import { getCollection } from 'astro:content';

const featuredProducts = await getCollection('products', ({ data }) => data.featured);
---

<BaseLayout
  title="Welcome to Our Store"
  description="Discover amazing products at great prices"
>
  <section class="hero">
    <h1>Welcome to Our Store</h1>
    <p>Discover amazing products at great prices</p>
  </section>

  <section class="featured-products">
    <h2>Featured Products</h2>
    <div class="product-grid">
      {featuredProducts.map(product => (
        <ProductCard
          title={product.data.title}
          price={product.data.price}
          image={product.data.image}
          featured
          inStock={product.data.inStock}
        />
      ))}
    </div>
  </section>
</BaseLayout>

Product Detail Page

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getEntry } from 'astro:content';

const { slug } = Astro.params;
const product = await getEntry('products', slug);

if (!product) {
  return Astro.redirect('/404');
}
---

<BaseLayout title={product.data.title}>
  <article class="product-detail">
    <div class="product-images">
      <img src={product.data.image} alt={product.data.title} />
    </div>

    <div class="product-info">
      <h1>{product.data.title}</h1>
      <p class="price">${product.data.price}</p>
      <p class="description">{product.data.description}</p>

      <button class="add-to-cart">Add to Cart</button>
    </div>
  </article>
</BaseLayout>

Blog Post Page

---
import BlogLayout from '@/layouts/BlogLayout.astro';
import { getEntry } from 'astro:content';

const { slug } = Astro.params;
const post = await getEntry('blog', slug);
const { Content } = await post.render();
---

<BlogLayout
  title={post.data.title}
  publishedAt={post.data.publishedAt}
  tags={post.data.tags}
>
  <Content />
</BlogLayout>

Dashboard Page

---
import DashboardLayout from '@/layouts/DashboardLayout.astro';
import StatDisplay from '@/components/molecules/StatDisplay.astro';

const stats = await getStats();
---

<DashboardLayout title="Dashboard">
  <section class="stats-grid">
    <StatDisplay
      label="Total Users"
      value={stats.users}
      icon="users"
      trend="up"
      trendValue="+12%"
    />
    <StatDisplay
      label="Revenue"
      value={`$${stats.revenue}`}
      icon="dollar"
      trend="up"
      trendValue="+8%"
    />
    <StatDisplay
      label="Orders"
      value={stats.orders}
      icon="shopping-cart"
      trend="down"
      trendValue="-3%"
    />
  </section>

  <section class="recent-activity">
    <h2>Recent Activity</h2>
    <!-- Activity list -->
  </section>
</DashboardLayout>

Benefits of Pages

Testing and Validation

✅ User testing with real content ✅ Visual regression testing ✅ Performance testing ✅ Accessibility testing ✅ Cross-browser testing

Documentation

✅ Show real-world usage ✅ Demonstrate component combinations ✅ Provide design references ✅ Guide implementation

Collaboration

✅ Align designers and developers ✅ Stakeholder reviews ✅ Content strategy validation ✅ User experience validation

Best Practices

Do’s

✅ Use realistic content and data ✅ Test pages with users ✅ Optimize for performance ✅ Ensure accessibility ✅ Handle loading and error states ✅ Implement proper SEO

Don’ts

❌ Use Lorem Ipsum for final content ❌ Skip edge case testing ❌ Ignore mobile experience ❌ Forget about slow networks ❌ Leave broken links or images