@agility/create-next-app 1.0.0-beta.2

package/templates/EXAMPLE-PROMPTS.md

@@ -0,0 +1,643 @@
+# Example Prompts Library
+
+Copy and customize these prompts to quickly build common website features with AI assistance.
+
+## 🏠 Homepage Components
+
+### Hero Section
+```
+Create a Hero component for the homepage with the following:
+
+Fields from Agility CMS (module reference name: "Hero"):
+- heading (string)
+- subheading (string)
+- backgroundImage (ImageField)
+- primaryCTA (object with text and href)
+- secondaryCTA (object with text and href)
+
+Layout:
+- Full-width background image using AgilityPic
+- Centered content with max-width container
+- Heading: text-6xl font-bold
+- Subheading: text-xl
+- Buttons side by side on desktop, stacked on mobile
+- Dark overlay (40% opacity) on background image
+- Min-height: 600px desktop, 400px mobile
+
+Styling:
+- Primary CTA: blue background, white text, hover effect
+- Secondary CTA: transparent with white border, hover effect
+- Responsive: padding adjusts for mobile
+```
+
+### Features Grid
+```
+Create a Features Grid component that displays key features:
+
+Fields (module reference name: "FeaturesGrid"):
+- heading (string)
+- features (content list, referenceName from field)
+
+Each feature item has:
+- icon (ImageField)
+- title (string)
+- description (string)
+
+Layout:
+- 3-column grid on desktop, 2 on tablet, 1 on mobile
+- Centered content
+- Icon above title
+- Card-style design with padding and border
+
+Styling:
+- Icons: 64x64px, centered
+- Cards: light background, rounded corners, hover shadow effect
+- Gap between cards: 2rem
+```
+
+### Testimonials Carousel
+```
+Create a Testimonials Carousel component:
+
+Fields (module reference name: "TestimonialsCarousel"):
+- heading (string)
+- testimonials (content list reference)
+
+Each testimonial has:
+- quote (string)
+- author (string)
+- title (string)
+- company (string)
+- photo (ImageField)
+
+Layout:
+- Display 1 testimonial at a time
+- Auto-advance every 5 seconds
+- Navigation: dots and arrow buttons
+- Author photo: circular, 80px diameter
+- Quote in large text with quotation marks styling
+
+Use a client component for the carousel interaction.
+```
+
+## 📝 Blog Features
+
+### Blog Listing Page
+```
+Create a Blog Listing component:
+
+Data source: 'blogPosts' content list
+Fields per post:
+- title (string)
+- slug (string)
+- excerpt (string)
+- featuredImage (ImageField)
+- date (Date)
+- author (object with name and photo)
+- categories (array of objects with title and slug)
+
+Layout:
+- 3-column grid on desktop, 2 on tablet, 1 on mobile
+- Show 9 posts per page
+- Pagination with numbered buttons (show 5 pages max)
+- Each card: featured image (16:9 ratio), title, excerpt (120 chars max), date, author name, category badges
+
+Sorting: date descending (newest first)
+
+Styling:
+- Cards: white background, shadow, rounded corners, hover lift effect
+- Images: cover the full card top, AgilityPic component
+- Date: gray text, small
+- Category badges: colored pills
+```
+
+### Blog Post Detail Page
+```
+Create a Blog Post Detail component:
+
+Data source: Fetch single post from 'blogPosts' by slug
+Fields:
+- title (string)
+- content (HTML string)
+- featuredImage (ImageField)
+- date (Date)
+- author (object with name, photo, bio)
+- categories (array)
+
+Layout:
+- Hero section: featured image full-width
+- Content container: max-width 768px, centered
+- Title: h1, large font
+- Author card: photo, name, bio, date below title
+- Content: prose styling (good typography)
+- Categories: badges above content
+- Related posts section at bottom (3 posts, same category)
+
+Styling:
+- Prose: proper spacing, line-height, font sizes
+- Author photo: circular, 48px
+- Related posts: 3-column grid with smaller cards
+```
+
+### Category Filter
+```
+Add category filtering to the Blog Listing component:
+
+Requirements:
+- Fetch all categories from 'categories' content list
+- Display as filter buttons above the blog grid
+- "All" button to show all posts
+- Active category button highlighted
+- Filter posts client-side or by refetching with category filter
+- Show post count for each category
+
+Layout:
+- Horizontal button group, wraps on mobile
+- Buttons: pill-shaped, hover and active states
+- Position above the blog grid
+
+Use client component for filtering interaction.
+```
+
+## 👥 Team & About
+
+### Team Members Grid
+```
+Create a Team Members Grid component:
+
+Data source: 'teamMembers' content list
+Fields:
+- name (string)
+- title (string)
+- bio (string)
+- photo (ImageField)
+- email (string)
+- linkedIn (string)
+- twitter (string)
+
+Layout:
+- 4-column grid on desktop, 2 on tablet, 1 on mobile
+- Show all team members (no pagination)
+- Photo above name/title
+- Bio hidden by default, shows on hover (desktop) or below (mobile)
+- Social icons link to profiles
+
+Styling:
+- Photos: circular, 160px diameter, grayscale on default, color on hover
+- Cards: centered text, padding
+- Bio: fade in on hover with overlay
+- Social icons: small, horizontal row below bio
+```
+
+### Company Stats Section
+```
+Create a Company Stats component:
+
+Fields (module reference name: "CompanyStats"):
+- stats (array of 4 stats objects)
+  Each stat has:
+  - number (string, e.g., "500+")
+  - label (string, e.g., "Happy Clients")
+  - icon (ImageField, optional)
+
+Layout:
+- 4 columns on desktop, 2 on tablet, 1 on mobile
+- Numbers: very large, bold
+- Labels: smaller, below numbers
+- Optional icons above numbers
+- Centered alignment
+
+Styling:
+- Numbers: 4xl font, gradient text
+- Icons: 48px, accent color
+- Background: light gray or gradient
+- Padding: generous for visual impact
+```
+
+## 📧 Forms & Contact
+
+### Contact Form
+```
+Create a Contact Form component:
+
+Fields (module reference name: "ContactForm"):
+- heading (string)
+- submitButtonText (string)
+- successMessage (string)
+
+Form fields:
+- Name (required, text)
+- Email (required, email validation)
+- Phone (optional, text)
+- Subject (required, text)
+- Message (required, textarea, min 10 chars)
+
+Behavior:
+- Client-side validation
+- Display errors inline below each field
+- On submit: call /api/contact endpoint
+- Show success message or error message
+- Clear form on success
+- Disable submit button while submitting
+
+Styling:
+- Full-width inputs with borders
+- Labels above inputs
+- Error messages: red text
+- Success message: green banner
+- Submit button: primary color, hover effect
+```
+
+### Newsletter Signup
+```
+Create a Newsletter Signup component:
+
+Fields (module reference name: "Newsletter"):
+- heading (string)
+- description (string)
+- buttonText (string)
+
+Form:
+- Email input (required, email validation)
+- Subscribe button
+
+Behavior:
+- Client component for form handling
+- Submit to newsletter service or API
+- Show success message inline
+- Error handling for invalid email or API errors
+
+Layout:
+- Horizontal layout: email input + button side by side
+- Mobile: stacked layout
+- Can be used in footer or as standalone section
+
+Styling:
+- Input and button same height
+- Button attached to input (no gap)
+- Primary color scheme
+```
+
+## 🎨 Content Sections
+
+### Image-Text Block
+```
+Create an ImageTextBlock component:
+
+Fields (module reference name: "ImageTextBlock"):
+- heading (string)
+- content (HTML string)
+- image (ImageField)
+- imagePosition (string: "left" or "right")
+- ctaText (string, optional)
+- ctaLink (string, optional)
+
+Layout:
+- 2-column grid: image and text side by side
+- Image takes 40% width, text 60%
+- Image position: left or right based on field
+- Text: heading, content, optional CTA button
+- Mobile: stacked, image always on top
+
+Styling:
+- Image: cover aspect ratio, rounded corners, use AgilityPic
+- Text: proper spacing, readable typography
+- CTA: button style, matches site theme
+```
+
+### FAQ Accordion
+```
+Create an FAQ Accordion component:
+
+Fields (module reference name: "FAQ"):
+- heading (string)
+- faqs (content list reference)
+
+Each FAQ item has:
+- question (string)
+- answer (HTML string)
+
+Behavior:
+- Client component for accordion interaction
+- Click question to expand/collapse answer
+- One item open at a time (close others when opening)
+- Smooth animation for expand/collapse
+- Icon rotates when open (chevron or plus/minus)
+
+Layout:
+- Single column, full width
+- Each item: border, padding
+- Question: bold, pointer cursor
+- Answer: normal text, proper spacing
+
+Styling:
+- Border between items
+- Hover state on questions
+- Active item highlighted
+- Icon positioned on right
+```
+
+### Call to Action Banner
+```
+Create a CTA Banner component:
+
+Fields (module reference name: "CTABanner"):
+- heading (string)
+- description (string)
+- buttonText (string)
+- buttonLink (string)
+- backgroundImage (ImageField, optional)
+- backgroundColor (string, optional)
+
+Layout:
+- Full-width section
+- Centered content with max-width container
+- Heading and description stacked
+- Button centered below text
+- Optional background image with overlay
+
+Styling:
+- Large heading (3xl)
+- Generous padding (120px vertical on desktop)
+- Button: large, prominent
+- Background: gradient or image with dark overlay for text contrast
+```
+
+## 🖼️ Media Components
+
+### Image Gallery Grid
+```
+Create an Image Gallery Grid component:
+
+Fields (module reference name: "ImageGallery"):
+- heading (string)
+- images (content list reference)
+
+Each image has:
+- image (ImageField)
+- caption (string, optional)
+- alt (string)
+
+Layout:
+- Masonry-style grid or equal-height grid
+- 3 columns desktop, 2 tablet, 1 mobile
+- Images clickable to open lightbox
+- Caption appears on hover overlay
+
+Behavior:
+- Client component for lightbox
+- Click image to view full size
+- Next/prev navigation in lightbox
+- Close button and ESC key to close
+- Keyboard navigation (arrows)
+
+Styling:
+- Images: cover, rounded corners slightly
+- Hover: zoom effect or brightness overlay
+- Lightbox: dark background, centered image
+```
+
+### Video Embed Section
+```
+Create a Video Embed component:
+
+Fields (module reference name: "VideoEmbed"):
+- heading (string)
+- videoUrl (string - YouTube or Vimeo URL)
+- thumbnail (ImageField, optional)
+- description (string, optional)
+
+Layout:
+- Centered container, max-width
+- Heading above video
+- 16:9 aspect ratio video embed
+- Optional description below
+
+Behavior:
+- Auto-detect YouTube/Vimeo and generate embed code
+- Optional: custom thumbnail that plays video on click
+- Responsive: full-width on mobile
+
+Styling:
+- Rounded corners on video
+- Shadow for depth
+- Play button overlay on thumbnail (if used)
+```
+
+## 🗺️ Navigation
+
+### Main Header/Navigation
+```
+Create a Header component with navigation:
+
+Data source: Agility sitemap for menu items
+
+Features:
+- Logo on left (from site settings or hard-coded)
+- Horizontal menu center or right
+- Mobile: hamburger menu
+- Sticky header on scroll with background
+- Active page highlighted
+- Dropdown for submenus (if any)
+
+Layout:
+- Desktop: horizontal nav, logo left, menu right
+- Mobile: hamburger icon, slide-out drawer menu
+
+Behavior:
+- Client component for mobile menu toggle
+- Smooth scroll to top when clicking logo
+- Close mobile menu on navigation
+- Highlight current page based on URL
+
+Styling:
+- Clean, minimal design
+- Logo: 48px height
+- Menu items: hover underline effect
+- Mobile menu: slide in from right, full height
+- Backdrop overlay when mobile menu open
+```
+
+### Footer
+```
+Create a Footer component:
+
+Fields (module reference name: "Footer" or hard-coded):
+- companyName (string)
+- description (string)
+- socialLinks (array of objects with platform and url)
+- footerLinks (grouped by column)
+
+Layout:
+- 4-column grid: About, Quick Links, Resources, Contact
+- Bottom row: copyright and legal links
+- Social icons in About column
+
+Content:
+- Column 1: Logo, description, social icons
+- Column 2-3: Links from sitemap or custom lists
+- Column 4: Contact info or newsletter signup
+
+Styling:
+- Dark background (gray or brand color)
+- Light text
+- Generous padding
+- Mobile: stack columns
+- Subtle separator line above copyright
+```
+
+## 🛍️ E-commerce (Basic)
+
+### Product Grid
+```
+Create a Product Grid component:
+
+Data source: 'products' content list
+Fields per product:
+- name (string)
+- slug (string)
+- price (number)
+- image (ImageField)
+- category (object)
+- inStock (boolean)
+
+Layout:
+- 4-column grid desktop, 3 tablet, 2 mobile
+- Show 12 products per page
+- Pagination
+- Each card: image, name, price, "View Details" button
+- "Out of Stock" badge if not inStock
+
+Features:
+- Filter by category (dropdown or buttons)
+- Sort by: newest, price low-to-high, price high-to-low
+- Price formatting (currency)
+
+Styling:
+- Cards: white, shadow, hover lift
+- Images: 1:1 aspect ratio, AgilityPic
+- Price: bold, accent color
+- Out of stock: gray overlay on image
+```
+
+### Product Detail
+```
+Create a Product Detail component:
+
+Data source: Single product from 'products' by slug
+Fields:
+- name (string)
+- description (HTML)
+- price (number)
+- images (array of ImageField)
+- specifications (array of key-value pairs)
+- inStock (boolean)
+- category (object)
+- relatedProducts (array)
+
+Layout:
+- 2-column: image gallery left (60%), details right (40%)
+- Image gallery: main image + thumbnails below
+- Details: name, price, description, specs, add to cart button
+- Related products section below
+
+Features:
+- Image gallery: click thumbnails to change main image
+- Add to cart button (or "Notify when in stock" if out of stock)
+- Specifications in table format
+- Related products: 4-card grid
+
+Mobile: Stack image above details
+```
+
+## 📊 Data Display
+
+### Statistics Dashboard
+```
+Create a Statistics Dashboard component:
+
+Data source: 'stats' content list or module fields
+Each stat:
+- label (string)
+- value (number or string)
+- change (number, percentage)
+- icon (ImageField, optional)
+
+Layout:
+- 4 stat cards in a row
+- Each card: icon, value (large), label, change indicator
+- Change: green up arrow if positive, red down if negative
+
+Styling:
+- Cards: white background, border, padding
+- Large numbers: 3xl font
+- Icons: 32px, colored
+- Change indicator: small, colored (green/red)
+
+Responsive: 2 cards per row on tablet, 1 on mobile
+```
+
+### Data Table
+```
+Create a Data Table component:
+
+Data source: Content list (referenceName from module field)
+Configurable columns from content model fields
+
+Features:
+- Table headers from field labels
+- Sortable columns (click header to sort)
+- Pagination (10, 25, 50 rows per page)
+- Search filter (searches all fields)
+- Responsive: horizontal scroll on mobile
+
+Layout:
+- Full-width table
+- Alternating row colors
+- Header: bold, sticky on scroll
+
+Behavior:
+- Client component for sorting, pagination, search
+- Maintain URL params for sharing filtered views
+
+Styling:
+- Clean, minimal design
+- Borders between rows
+- Hover highlight on rows
+- Primary color for headers
+```
+
+## 🎯 Usage Tips
+
+### How to Use These Prompts:
+
+1. **Copy the prompt** for the component you need
+2. **Customize** the field names and requirements to match your Agility CMS setup
+3. **Paste** into your AI assistant
+4. **Wait** for the AI to generate the code
+5. **Create** the corresponding module in Agility CMS if you haven't already
+6. **Test** the component in your local environment
+7. **Iterate** by asking for refinements
+
+### Combining Prompts:
+
+You can combine multiple components:
+
+```
+"Create both the Blog Listing component and the Blog Post Detail component. Use the specifications from [paste both prompts]. Make sure they work together with consistent styling."
+```
+
+### Quick Modifications:
+
+After creating a component, refine it:
+
+```
+"Update the [Component Name] to:
+- Change the grid from 3 columns to 4
+- Add a filter dropdown above the grid
+- Use a different hover effect"
+```
+
+---
+
+**Pro Tip**: Save your customized prompts! Build a personal library of prompts that work well for your specific use cases and Agility CMS setup.