Header Hero Section - Copy this Html, Tailwind Component to your project

okay now build these 2 sections below what we already have and dont use react continue using the html and tailwind.Detailed Structure Outline for the Services and Locations Sections Services Section The services section highlights the key offerings of the business, providing a snapshot of the IT, Stationery, and Construction services. Structure: Wrapper (Section Container): A centered container with ample padding on the top and bottom for spacing. A maximum width is applied to keep the content aligned and prevent excessive stretching on larger screens. Header: Positioned at the top of the section, centered for alignment. Includes: Section Title: A bold, large heading ("Our Services") styled with the primary color (#7a1918). Subtitle: A smaller, descriptive text below the title, styled with the secondary color (#b38140). Service Cards: Displayed as a grid layout. Adapts based on screen size: Small screens: Single-column layout. Medium screens: Two columns. Large screens: Three columns. Each card includes: Icon Container (Circular Background): A circular background with a subtle shadow. Positioned at the top center of the card. Contains an icon representing the service (e.g., laptop for IT, pencil for Stationery, hard hat for Construction). Service Title: A bold, medium-sized heading styled with the primary color. Service Description: A short, descriptive paragraph about the service. Styled with a neutral gray color for readability. Call-to-Action Button: Positioned at the bottom of the card, styled with: Primary color for the background. Rounded edges for a modern look. Includes a hover effect that slightly changes the button's opacity. Design Notes: Cards are spaced evenly with consistent padding. Hover effects may include slight scaling or shadow enhancements for the card. The grid layout ensures that the design remains aesthetically pleasing across all devices. Locations Section The locations section provides the business's geographical presence, emphasizing accessibility and ease of navigation. Structure: Wrapper (Section Container): A full-width section with a soft background color for visual separation. Contains generous padding to ensure content breathability. Content Layout: Grid Layout: Two columns for medium and larger screens. Stacked content (single column) on smaller screens. Each column has specific content: Text Content: A heading ("Our Locations") styled with the primary color. A description card with: Location Name: A bold heading for the location (e.g., "Head Office"). Address: Descriptive text for the address. Rounded corners and subtle shadow for card aesthetics. Google Maps Embed: A responsive iframe displaying the Google Map of the head office location. Maintains a fixed aspect ratio to prevent layout shifting. Design Notes: Consistent use of shadows and rounded edges for cards. The text and map adapt to various screen sizes, ensuring clarity on both mobile and desktop. The map is interactive, allowing users to zoom or pan for details.