the_information_nexus/tech_docs/wp_kadence_wireframe.md

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.

---