Tailwind Svelte Assistant

# Contact Section with Multiple Offices - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `contact-centered-multiple-offices.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The component displays a contact section with introductory text and a grid of office locations. ## Overview This component creates a contact information section. It typically includes a main title and description, followed by two distinct grids: 1. A grid showcasing primary contact methods (like email and phone) for a subset of offices. 2. A grid showcasing the physical addresses for all listed offices. ## Original Svelte Component Props The original Svelte component defines the following props: - `title: string` (default: "Get in touch") - Main title for the contact section. - `description: string` (default: "Quam nunc nunc eu sed. Sed rhoncus quis ultricies ac pellentesque.") - Introductory paragraph. - `offices: Array<{ name: string, addressLines: string[], contactMethods: Array<{ type: 'email' | 'phone', value: string, href: string }> }>` - An array of office objects, each containing name, address lines, and contact methods. ## Theme Variables Noted in Original Snippet - `--theme-bg-base` (e.g., `bg-white`) - `--theme-bg-alt` (e.g., `bg-gray-50` for office cards) - `--theme-text-base` (e.g., `text-gray-900`) - `--theme-text-muted` (e.g., `text-gray-600`) - `--theme-primary` (e.g., `text-indigo-600` for links) - `--theme-border-color` (e.g., `divide-gray-100`) - `--theme-border-radius-2xl` (e.g., `rounded-2xl` for office cards) ## HTML Structure Example (Conceptual) This static HTML represents the structure generated by the Svelte component using its default props. The original component uses loops to generate office cards. ```html <div class="bg-white py-8 sm:py-16"> <!-- theme: bg-theme-bg-base --> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-2xl divide-y divide-gray-100 lg:mx-0 lg:max-w-none"> <!-- theme: divide-theme-border-color --> <!-- Section 1: General Contact Info --> <div class="grid grid-cols-1 gap-10 py-16 lg:grid-cols-3"> <div> <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900">Get in touch</h2> <!-- title prop, theme: text-theme-text-base --> <p class="mt-4 text-base/7 text-gray-600">Quam nunc nunc eu sed. Sed rhoncus quis ultricies ac pellentesque.</p> <!-- description prop, theme: text-theme-text-muted --> </div> <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8"> <!-- Example Office Contact Card (from offices.slice(0, 2)) --> <div class="rounded-2xl bg-gray-50 p-10"> <!-- theme: bg-theme-bg-alt, rounded-theme-border-radius-2xl --> <h3 class="text-base/7 font-semibold text-gray-900">Los Angeles</h3> <!-- theme: text-theme-text-base --> <dl class="mt-3 space-y-1 text-sm/6 text-gray-600"> <!-- theme: text-theme-text-muted --> <div> <dt class="sr-only">Email</dt> <dd><a class="font-semibold text-indigo-600" href="mailto:collaborate@example.com">collaborate@example.com</a></dd> <!-- theme: text-theme-primary --> </div> <div> <dt class="sr-only">Phone number</dt> <dd><a class="font-semibold text-indigo-600" href="tel:+15559052345">+1 (555) 905-2345</a></dd> </div> </dl> </div> <!-- Second office contact card would go here --> </div> </div> <!-- Section 2: Locations --> <div class="grid grid-cols-1 gap-10 py-16 lg:grid-cols-3"> <div> <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900">Locations</h2> <p class="mt-4 text-base/7 text-gray-600">Consequat sunt cillum cillum elit sint. Qui occaecat nisi in ipsum commodo.</p> </div> <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8"> <!-- Example Office Address Card (from full offices array) --> <div class="rounded-2xl bg-gray-50 p-10"> <h3 class="text-base/7 font-semibold text-gray-900">Los Angeles</h3> <address class="mt-3 space-y-1 text-sm/6 text-gray-600 not-italic"> <p>4556 Brendan Ferry</p> <p>Los Angeles, CA 90210</p> </address> </div> <!-- More office address cards would go here --> </div> </div> </div> </div> </div> ``` ## JavaScript Notes - The Svelte component uses the `offices` prop (an array of objects) to dynamically populate the contact and location cards. - The first section iterates through `offices.slice(0, 2)` (the first two offices) to display primary contact methods. - The second section iterates through the full `offices` array to display addresses. - For static HTML, this content would be hardcoded. ## CSS Notes - **Layout:** The component uses CSS Grid for the overall layout and for the grids of office cards. - **Themeable Classes:** Comments indicate where theme variables could be applied for colors, backgrounds, and borders. - **Semantic HTML:** Uses `<address>` for physical addresses and `<dl>` for contact methods. This Markdown file provides an HTML structure and class details based on the `contact-centered-multiple-offices.svelte` snippet.