FAQ Fusion Copy this Tailwind Component 0to Your Project

## Modern FAQ Page for GInzua Importadora & Distribuidora **Objective:** Create an intuitive, organized, and visually appealing FAQ page that effectively communicates essential information to wholesale clients while maintaining brand professionalism and accessibility. ### Design Focus: **Style:** Clean, modern, and business oriented with intuitive navigation **Color Palette:** Primary: Navy Blue (#2D3E50) for headers and collapsible section titles (trustworthy/professional) Secondary: Soft Gray (#F8F9FA) for section backgrounds (cleanliness) Accent: Coral (#1d4ed8) for interactive elements, icons, and key highlights (approachability) White (#FFFFFF) for content backgrounds to enhance readability ### Typography: Sans serif (e.g., Inter or Montserrat) for clean readability Question text: Semi bold, slightly larger than body text (16 18px) Answer text: Regular weight, comfortable reading size (14 16px) ### Layout Principles: Accordion style collapsible sections for organized content access Generous white space between questions and sections Strong visual hierarchy through typography and color contrast Mobile responsive design that maintains readability on all devices ### Core Elements: #### Header Section: Large title: "Frequently Asked Questions" (Navy Blue, 36 40px) Subtitle: "Everything you need to know about ordering with GInzua Wholesale" (Soft Gray, 18 20px) Small decorative element: Abstract geometric shapes or dotted line in Coral color Optional: Small search bar with placeholder "Search our FAQs" (Coral accent on search icon) #### Category Navigation: Four distinct category tabs with icons: "Web Purchases" (shopping cart icon) "Sales Channels" (headset/support icon) "Delivery Methods" (truck/shipping icon) "Warranty & Returns" (shield/guarantee icon) Tab Design: Rounded corners, Navy Blue with white text for active tab, Gray with Navy text for inactive Active tab indicator: Coral bottom border or subtle Coral glow #### FAQ Content Structure: **Category Sections:** Each category has its own visually distinct section Section headers (Navy Blue, 24px) with relevant icon in Coral Subtle divider or background color change between sections **Question & Answer Format:** Questions: Collapsible accordion elements with plus/minus or chevron icons Question text: Navy Blue, semi bold Expand/collapse icon: Coral, animated rotation on click Answer container: White background with subtle border or shadow Answer text: Dark Gray (#333333) for optimal readability #### "Web Purchases" Section: Questions (each expandable): "What prices appear publicly on the website?" "In which currencies can I place my order?" "How can I pay for my order once placed?" "I'm interested in a product, but it's temporarily out of stock." #### "Sales Channels" Section: Questions (each expandable): "How can I place an order?" "What are your customer service hours?" "What is the timeframe from order placement to delivery?" #### "Delivery Methods" Section: Questions (each expandable): "Do you offer pickup at your warehouse?" "Do you have a delivery service?" "Do you ship through any transport agencies?" "Do deliveries or shipments have an additional cost?" "What is the timeframe from order placement to delivery?" #### "Warranty & Returns" Section: Questions (each expandable): "What warranty do your products have?" ### Interactive Elements: **Accordion Behavior:** Smooth expand/collapse animation (250 300ms) Only one answer visible at a time within a section Expanded question highlighted with subtle color change Coral color for expansion indicator (+ changes to or arrow rotates) **Navigation Interaction:** Smooth scroll to appropriate section when category tab is clicked Optional: "Back to top" floating button with Coral color Optional: Section headers stick to top when scrolling through a long section ### Complementary Visual Elements: **Visual Accents:** Subtle background pattern or texture (extremely light, non distracting) Coral colored dividing lines between major sections Abstract shapes in brand colors as section backgrounds (very subtle) **Support Call to Action:** Bottom section: "Didn't find what you're looking for?" Contact prompt with icon and Coral "Contact Us" button Alternative support channels (email, phone) with relevant icons ### Responsive Behavior: **Desktop:** Side by side category navigation tabs, wide accordion elements **Tablet:** Fluid adjustments, possibly stacked category tabs **Mobile:** Fully stacked layout, hamburger menu for categories if needed, full width accordions ### Final Touches: Subtle hover effects on all interactive elements Micro animations for accordion expansion/collapse Optional breadcrumb navigation at the top "Last updated" timestamp at bottom of page in small, subtle text