# Home Page Layout
## **Home Page Layout**
#### **1. Notification Bar**
-rotate 3 messages as a carousel style notification bar (normally some type of promotion), use eye catching color
-i.e. Free shipping, gift with purchase, sign up for email list and receive \_\_\_\_\_\_% off (directed to a landing page for email sign up), sign up for sms to learn about new drops (direct to a landing page for sms sign up)
Example:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/Ep5kawoqQG6sVXzE-screenshot-2025-03-09-at-12-30-04-pm.png)
#### **2. Header**
center: tea tavern logo, left side: navigation (shop teas + more) + (About Us) + (Brewing Guide) + (Events), right side: search icon, account icon, cart icon
Example 1:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/JnPQxOkYLqvcRW0B-screenshot-2025-03-09-at-12-30-10-pm.png)
Example 2:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/vVlnQkZU941dT1Zj-screenshot-2025-03-09-at-1-07-06-pm.png)
#### **3. Hero Section**
- banner of current featured item or promotion, tagline and CTA button (shop now)
Example: current example on tea tavern site works
- [](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/wfTZJdZj6Cs8IeUD-screenshot-2025-03-09-at-12-30-30-pm.png)
#### **4. Best-Sellers and Featured Blends**
-grid of 4 top selling teas with name + short description, price and a quick add to cart CTA
Example 1:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/ap6zUMr0tTOL1g7S-screenshot-2025-03-09-at-12-31-20-pm.png)
Example 2:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/8LNb52AplTsz4d8D-screenshot-2025-03-09-at-12-30-58-pm.png)
#### **5. 2nd Feature or Promotion**
**example: current example on tea tavern site works (also like how it is a carousel)**
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/I4WehckVBCjLxKE5-screenshot-2025-03-09-at-1-41-44-pm.png)
#### 6. **Value Prop Section**
Example 1:
- (left side copy, right side image or vice versa)
- Sustainably sourced loose-leaf teas from China
Rooted in **Gong Fu brewing traditions**
**No Artificial Additives**
Mindfully packaged in biodegradable materials
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/1WHogP40dzbZ4Z8Y-screenshot-2025-03-09-at-12-29-47-pm.png)
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/S6uMdh24WMBEt054-screenshot-2025-03-09-at-12-41-38-pm.png)
Example 2: Custom Icons for Value Props
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/n13zahLHt0sRDCiM-screenshot-2025-03-09-at-12-41-57-pm.png)
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/tgi938bj79YZmEX4-screenshot-2025-03-09-at-12-43-33-pm.png)
#### **7. Customer Testimonals**
-scrolling reviews/carousel
Example 1:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/rc5VlQLRxwAxIrtx-screenshot-2025-03-09-at-12-40-56-pm.png)
Example 2:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/KfR1FTbWhQP9K7HY-screenshot-2025-03-09-at-12-51-42-pm.png)
#### **8. Social Grid (optional to add to site once IG is more established)**
- **“Share Your Tea Ritual”**
- 💬 *Follow us @TeaTavernOfficial & tag us for a chance to be featured!*
- • 🔗 \[Live Instagram Feed\] with shoppable posts
Example 1:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/mcHx81ab0FvkFyz7-screenshot-2025-03-09-at-12-33-26-pm.png)
##### **9. About Us**
-brief about us with a cta button to "Our Story" or "Learn More" that will go to the about us landing page
Example 1:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/D4UagnpKHl0PtTK3-screenshot-2025-03-09-at-12-52-08-pm.png)
#### **10. Footer & Email Sign Up**
**-footer nav on left side, social icons in center or under email sign up and newsletter sign up on the right**
**Shop** → All Teas | Accessories
**Customer Care** → FAQs | Shipping & Returns | Contact Us
**About** → About us l Core values l partners
1. Email Sign Up **“Join Our Tavern Loyalty Program”** • *Get 10% off your first order + access to exclusive blends & brewing tips*
*Example 1:*
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/m6rq6Mal84OIidYg-screenshot-2025-03-09-at-12-57-47-pm.png)
Example 2:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/nFbkZmbNdBYHRHpg-screenshot-2025-03-09-at-12-56-21-pm.png)
Example 3:
[](https://bookstack.tea-tavern.com/uploads/images/gallery/2025-03/sObBbapwa2jTap4m-screenshot-2025-03-09-at-1-30-08-pm.png)