diff --git a/docs/tech_docs/wp_kadence_wireframe.md b/docs/tech_docs/wp_kadence_wireframe.md new file mode 100644 index 0000000..21e7039 --- /dev/null +++ b/docs/tech_docs/wp_kadence_wireframe.md @@ -0,0 +1,291 @@ +# **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. + +---