# **Homepage Structure Using Kadence Blocks**

---

## **Hero Section**

### **Group:** Hero Introduction

- **Block:** Row Layout (Single Row)
- **Background:** Video or Image (16:9 aspect ratio) with `alt` text including primary keyword.
- **Block:** Advanced Heading
  - **Content:** Main heading with primary keyword. Secondary keyword in the subheading.
- **Meta Description:** Informative description with the primary keyword.
- **Block:** Button
  - **Action:** "Book an Event" with a descriptive `aria-label` for accessibility.

**Kadence Row Layout (Single Row)**

- **Background Settings**: Choose from color, gradient, image, or video. If using an image or video, ensure it's web-optimized.
- **Padding & Margin**: Adjust to create space and center content.

**Kadence Advanced Heading**

- **Font Settings**: Use H1 for main heading. Adjust font size, weight, and line-height for clarity.
- **Content**: Main heading with primary keyword. Add a secondary keyword in the subheading.

**Kadence Button**

- **Design**: Use Kadence’s styling options for button size, color, border-radius, and hover effects.
- **Link**: "Book an Event". Ensure the link directs to the booking section or page.

- **Row Layout (Single Row)**: This is appropriate for creating a hero section, as Kadence's Row Layout provides flexibility for both background and content settings.
- **Advanced Heading**: The Advanced Heading block in Kadence is suitable for hero section headings due to its extensive customization options.
- **Button**: The standard Gutenberg Button block is ideal for CTAs, especially in hero sections.
- **Video**: Consider adding a short video showcasing the chef's work for an engaging visitor experience.

  > - Provides an immediate visual impact and introduces visitors to the chef's main offering.
  > - Call to Action: "Book an Event"
  > - Ensure the hero image loads quickly to reduce bounce rate.
  > - Position the main heading and CTA (Call to Action) button above the fold for immediate visibility.
  > - Use high-contrast colors for text and CTA to make them stand out against the background.

---

## **About the Chef**

### **Group:** Chef's Background

- **Block:** Row Layout (Two Columns: 1/3 + 2/3)
  - **Column 1:**
    - **Block:** Image (1:1 or 3:2 aspect ratio) with `alt` text describing the chef.
  - **Column 2:**
    - **Block:** Advanced Heading
    - **Content:** Chef's name (with keyword) and bio. Include chef's relevant keywords in the bio.
    - **Links:** Chef's social media profiles.

**Kadence Row Layout (Two Columns: 1/3 + 2/3)**

- **Column Gap**: Adjust to create a harmonious space between image and text.

**Kadence Image Block (1/3 column)**

- **Image Settings**: Choose a high-quality portrait of the chef and ensure it's web-optimized.
- **Alt Text**: Briefly describe the chef.

**Kadence Advanced Heading (2/3 column)**

- **Font Settings**: Use H2 tag and adjust font size, weight, and line-height.
- **Content**: Chef's name followed by a concise bio, ensuring a natural flow with keyword integration.

**Kadence Social Links (2/3 column)**

- **Design**: Customize icon size and colors.
- **Links**: Directly link to the chef's profiles on different platforms.

- **Row Layout (Two Columns: 1/3 + 2/3)**: This layout is effective for combining an image with textual content. The 1/3 column is suitable for the chef's image, while the 2/3 column can house the textual content.
- **Social Media**: Include links to the chef's social media profiles for increased engagement.

> - A brief introduction to the chef can help personalize the website and establish credibility.
> - Include a short bio and portrait.
> - Use a high-quality image of the chef. This helps in establishing trust.
> - Ensure the bio is concise and highlights the chef's achievements or specialties.
> - Include relevant keywords in the bio without keyword stuffing.
> - Use schema markup for the chef's bio to improve search engine visibility.

---

## **Services Offered**

### **Group:** Services Overview

- **Block:** Row Layout (Three Columns)
  - **Each Column:**
    - **Block:** Info Box with image (16:9 or 4:3 aspect ratio) with `alt` text (include service-specific keywords).
      - **Content:** Heading with service-specific keywords, concise description, and Button ("Learn More" or "Book Now" with `aria-label`).

**Kadence Row Layout (Three Columns)**

- **Column Gap**: Adjust for even spacing between columns. Ensure columns stack on mobile for responsiveness.

**Kadence Info Box (Each Column)**

- **Image**: Use service-specific images that are web-optimized.
- **Heading**: Integrate service-specific keywords. Adjust font for clarity.
- **Description**: Provide concise service details.
- **Button**: Link to detailed service pages or booking options, using Kadence button styling.

- **Row Layout (Three Columns)**: This layout is suitable for showcasing multiple services side by side. For mobile views, ensure that the columns stack for responsiveness.
- **Info Box**: The Info Box block in Kadence is versatile and combines an image, heading, and button, making it ideal for service descriptions.

> - Showcase the primary services to give visitors an idea of what the chef specializes in.
> - Use concise descriptions and visuals.
> - Call to Actions: "Learn More" or "Book Now"
> - Highlight the most popular or signature services to capture interest.
> - Use clear and descriptive alt texts for service images.
> - Include CTAs within each service to drive user action.

---

## **Testimonials Slider**

### **Group:** Client Testimonials

- **Block:** Testimonial with Ratings
  - **Content:** Rotating testimonials with name, designation, company, testimonial text, and ratings.
  - **Link:** "Read All Testimonials" with `title` attribute for more context.

**Kadence Testimonial Carousel**

- **Layout**: Choose a design that allows for image, name, designation, and testimonial text.
- **Images**: Use uniform size, web-optimized images of the testimonial giver.
- **Content**: Display a curated list of impactful testimonials.
- **Navigation**: Adjust arrow and dot settings for user-friendly navigation.

- **Testimonial**: The Testimonial block provided by Kadence is apt for rotating testimonials and can also display associated images.
- **Ratings**: Integrate a rating system for testimonials to enhance credibility.

> - Social proof is powerful. Displaying a few select testimonials can build trust.
> - Call to Action: "Read All Testimonials"
> - Display testimonials with photos to increase credibility.
> - Rotate the most impactful testimonials.
> - Ensure the slider doesn’t move too fast, allowing users to read comfortably.
> - Use schema markup for testimonials to increase their visibility in search engines.

---

## **Upcoming Events/Classes**

### **Group:** Events Schedule

- **Block:** Row Layout (Single Row)
  - **Block:** Advanced Button (for viewing all events with `title` attribute)
  - **Block:** Calendar with Link to Detailed Events Page

**Kadence Advanced Button**

- **Design**: Customize size, color, and hover effects.
- **Link**: Direct to a page with more comprehensive event details.

**Embed Block**

- **Integration**: Embed Google Calendar or another interactive system. Ensure it's styled to match the site's theme.

- **Calendar Integration**: Since neither Kadence nor Gutenberg provides a dedicated "Calendar" block, consider integrating Google Calendar, especially if it's linked with Calendly on the backend.
- **Detailed Events Page**: Include a link to a page with more comprehensive event details.

> - Inform visitors of any upcoming events or classes they can attend or book.
> - Call to Action: "View All Events"
> - Highlight limited-time or special events to create a sense of urgency.
> - Ensure the calendar is interactive and mobile-responsive.
> - Optimize event descriptions with relevant keywords.
> - Use schema markup for events to improve search engine visibility.

---

## **Gallery**

### **Group:** Image Gallery

- **Block:** Gallery with Lightbox
  - **Content:** Images from past events/classes with descriptive `alt` texts.
  - **Caption:** Write captions for each image with keywords.

**Kadence Gallery Block**

- **Layout**: Choose between grid or masonry layout. Enable lightbox feature for enhanced image viewing.
- **Images**: Upload web-optimized images with consistent aspect ratios.
- **Captions**: Provide concise descriptions with keyword integration.

- **Gallery Block**: Kadence's Gallery block is recommended due to advanced features like lightbox and masonry grid options.
- **Lightbox**: Implement a lightbox feature for an enhanced viewing experience.

> - A visual representation of past events, dishes, or classes can be enticing.
> - Call to Action: "View Full Gallery"
> - Optimize images for quick loading and mobile responsiveness.
> - Use descriptive alt texts for each image for SEO benefits.
> - Consider adding a lightbox feature for a larger view of images upon clicking.

---

## **Newsletter Signup**

### **Group:** Newsletter Subscription

- **Block:** Row Layout (Single Row)
  - **Block:** Advanced Heading (for the section's title with primary or secondary keyword)
  - **Subtitle:** Offer such as "Sign up and receive a 10% discount on your next booking or a free recipe."
  - **Block:** Form (with `aria-label` for the email input field and "Subscribe" button).

**Kadence Form Block**

- **Fields**: Add fields for name and email. Customize placeholder texts.
- **Button**: Style the "Subscribe" button using Kadence settings.
- **Notifications**: Set up email notifications for each signup.

- **Forms**: While Kadence offers a form block, for specialized forms, especially newsletter sign-ups and detailed contact forms, consider linking to Google Forms for more functionality and flexibility.

> - Engage visitors by offering them a chance to stay updated with news, recipes, or special offers.
> - Call to Action: "Subscribe"
> - Position this near the footer but ensure it's visually distinct.
> - Make the sign-up process simple with minimal fields.
> - Ensure GDPR compliance if collecting emails from European visitors.

---

## **Contact & Booking**

### **Group:** Contact Details

- **Block:** Row Layout (Two Columns)
  - **Column 1:**
    - **Block:** Form (with fields for name, email, event type, date, and message, all with proper `aria-label` attributes for accessibility).
  - **Column 2:**
    - **Block:** Advanced Heading (for contact details, include keywords like "Contact [Chef's Name] for Corporate Cooking Events").

**Kadence Row Layout (Two Columns)**

- **Column Gap**: Adjust to create an even space between form and contact details.

**Kadence Form Block (1/2 column)**

- **Fields**: Include fields for name, email, event type, date, and message. Customize placeholders.
- **Button**: Style the "Submit" button using Kadence settings.

**Kadence Advanced Heading (1/2 column)**

- **Content**: Display contact details with keyword integration, ensuring natural readability.

> - Provide an easy way for visitors to reach out or book an event.
> - Call to Action: "Submit"
> - Make the form fields intuitive and easy to fill.
> - Use clear error messages and confirmations.
> - Ensure the form is mobile-responsive and loads quickly.
> - Consider adding a map showing the chef's location or primary service area.

---

## **Footer**

### **Group:** Footer Information

- **Block:** Row Layout (Multiple Rows)
  - **Row 1:**
    - **Block:** Navigation Menu (with `title` attributes for each link for more context).
  - **Row 2:**
    - **Block:** Icon List (for social media icons with proper `aria-label` attributes).
  - **Row 3:**
    - **Block:** Advanced Heading (for contact information with Schema Markup for local SEO).

**Kadence Navigation Menu**

- **Design**: Create a simple footer menu with essential links.

**Kadence Icon List**

- **Design**: Customize icon sizes, colors, and hover effects.
- **Links**: Directly link icons to respective social media profiles.

**Kadence Advanced Heading**

- **Content**: Display contact information and any necessary disclaimers.

- **Navigation Menu**: Utilize Kadence's Navigation block for a more customized menu experience in the footer.
- **Mobile Responsiveness**: Ensure that all blocks, especially those with columns, are set to stack or rearrange appropriately on mobile views.

> - Include essential links, contact information, and social media icons.
> - Keep the footer organized with clear categories or columns.
> - Ensure links are easy to click, especially on mobile devices.
> - Include an SEO-friendly sitemap link in the footer to aid search engine crawling.

---
