A
Anonymous

Responsive Header and Sub Header Design for E-commerce

Header Design Description: Background Color: The header has a red background. Logo: On the left side, there is a logo with the text "XGEAR" and an accompanying graphic element that resembles an arrow or gear. Search Bar: Next to the logo is a search bar with a white input field and a magnifying glass icon for searching. Hotline: On the right of the search bar, there is a hotline number "02871081881" with a phone icon in white. Store Locator: A button labeled "Hệ thống cửa hàng" (Store locator), with an icon representing a location pin, is next to the hotline. Login/Register: There are two dropdown buttons for "Đăng nhập" (Login) and "Đăng ký" (Register), both with a user icon. Cart: A shopping cart icon with the label "Giỏ hàng" (Cart) is on the far right. The cart has a counter indicating "0" items. Sub Header Description: Background Color: The sub header has a black background. Product Categories: On the left, there's a "Danh mục sản phẩm" (Product Categories) button with a grid icon. Payment & Other Options: The sub header also contains several buttons with icons and labels for: "Hướng dẫn thanh toán" (Payment Guide) with a wallet icon. "Hướng dẫn trả góp" (Installment Guide) with a piggy bank icon. "Tra cứu bảo hành" (Warranty Lookup) with a document icon. "Tuyển dụng" (Careers) with a briefcase icon. "Tin công nghệ" (Technology News) with a document icon. This header layout emphasizes ease of navigation with key functional elements like login, cart, search, and store locator placed prominently, while the sub header provides access to additional resources related to product categories, payment, and customer services. Responsive Header Design: Logo: The "XGEAR" logo remains in the top left corner but appears scaled down to fit the narrower screen size. Search Bar: The search bar is still prominently placed, occupying a large portion of the top section. The placeholder text ("Thương hi...") is truncated due to the limited space, and the search icon (magnifying glass) remains on the right, resized to fit appropriately. Hotline: The hotline number "02871081881" is still displayed with a phone icon before it. However, the elements are scaled down and aligned to accommodate the smaller screen. Store Locator & Cart: The store locator button (with a location pin icon) and the cart button (with a shopping cart icon and item count) are still present but resized and placed closer together to conserve space. The login and register section (user icon) is also scaled down but maintains its functionality. Responsive Sub Header Design: Product Categories & Guides: The second navigation bar still displays categories such as "Danh mục sản phẩm" (Product Categories) with a grid icon, along with payment guides, installment guides, warranty lookup, and careers. However, the spacing between these items has been reduced, and the icons have been resized to appear more compact on smaller screens. Key Features of the Responsive Design: Element Size Reduction: All elements in both the header and sub header are scaled down but retain their full functionality. Compact Layout: Items are placed closer together, but the design still avoids a cluttered look. Prioritization of Key Elements: Important components such as the logo, search bar, hotline, cart, and product categories are given prominence, ensuring a functional experience even with limited screen space. This responsive design is optimized for mobile devices and tablets, maintaining a clean and functional layout for users on smaller screens. Using typescript

Prompt
Component Preview

About

Create a sleek, mobile-optimized header with logo, search, hotline, store locator, login, cart, and resource links using Tailwind CSS and React for seamless navigation.

Share

Last updated 1 month ago