# **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. ---