This header section includes:
1. A fixed-top navigation bar with the brand name on the left and navigation links on the right. The navigation links are generated using the `headerNav` array from the project settings.
2. A mobile-responsive hamburger menu button that toggles the mobile navigation menu when clicked.
3. The mobile navigation menu is hidden by default and only shown on smaller screens (md and below).
4. The navigation links use the `text-neutral-300` class for the default state and `text-primary` class for the hover state to provide a subtle hover effect.
5. The header section has a dark-themed background (`bg-neutral-800`) and white text (`text-white`).
6. The brand name uses the `font-primary` class, which is set to "Roboto" in the project settings.
This header section follows the design guidelines and requirements provided, including the use of Tailwind CSS classes, mobile-first responsive design, and proper semantic HTML structure.
World Leader in Affiliate Marketing
Discover how SoftBuying can help you unlock the power of affiliate marketing and drive sustainable growth for your business.
Contact Us
This hero section includes:
1. A full-width container with a dark-themed background (`bg-neutral-900`) and white text (`text-white`).
2. A flex layout to position the content and image side-by-side on larger screens.
3. The main heading "World Leader in Affiliate Marketing" with a bold font and large font size.
4. A supporting paragraph with a subdued text color (`text-neutral-300`).
5. A "Contact Us" call-to-action button with a primary color background (`bg-primary`) and hover effect.
6. An image showcasing "Media Company Branding" from the provided image options, positioned on the right side of the content.
7. The image has rounded corners (`rounded-lg`) and a subtle shadow (`shadow-lg`) for visual depth.
8. The section uses responsive design with Tailwind CSS classes, adapting the layout for smaller screens.
This hero section follows the design guidelines and requirements provided, including the use of Tailwind CSS classes, mobile-first responsive design, and appropriate placement of the provided images.
About SoftBuying
SoftBuying is a leading media company specializing in affiliate marketing. We help businesses of all sizes unlock the power of affiliate partnerships to drive sustainable growth and reach new audiences.
Contact Us
This about section includes:
1. A light-themed background (`bg-neutral-100`) with appropriate padding (`py-20 md:py-32`).
2. A centered container with a flex layout to position the content and image side-by-side on larger screens.
3. The main heading "About SoftBuying" with a bold font and large font size.
4. A supporting paragraph with a subdued text color (`text-neutral-600`).
5. A "Contact Us" call-to-action button with a primary color background (`bg-primary`) and hover effect.
6. An image showcasing a "Media Marketing Agency Team" from the provided image options, positioned on the right side of the content.
7. The image has rounded corners (`rounded-lg`) and a subtle shadow (`shadow-lg`) for visual depth.
8. The section uses responsive design with Tailwind CSS classes, adapting the layout for smaller screens.
This about section follows the design guidelines and requirements provided, including the use of Tailwind CSS classes, mobile-first responsive design, and appropriate placement of the provided images.
Our Work
At SoftBuying, we've collaborated with a diverse range of clients to deliver exceptional affiliate marketing solutions. Our team of experts works tirelessly to drive results and help our partners reach new heights.
Contact Us
This code creates the "Work" section for the SoftBuying website. It includes a brief description of the company's work and a call-to-action button, along with an image showcasing the affiliate marketing team collaboration.
The section is wrapped in a
element with the ID "work" and has a light background color (bg-neutral-100) that switches to a dark color (bg-neutral-800) in dark mode. The content is centered within a container and uses Tailwind's responsive utility classes to create a two-column layout on larger screens.
The headline and paragraph text are styled using Tailwind's typography classes, and the call-to-action button has a primary color background (bg-primary) with a hover effect (hover:bg-opacity-80).
The image is sourced from the provided image URL and is displayed using an ![]()
element with the appropriate alt text.
This implementation follows the design guidelines and requirements specified in the prompt, including the use of Tailwind CSS, semantic HTML structure, and the incorporation of the provided work section image.
Our Mission
At SoftBuying, our mission is to empower businesses of all sizes to reach new heights through our innovative affiliate marketing solutions. We are dedicated to helping our clients achieve their goals and become leaders in their respective industries.
Contact Us
This code creates the "Mission" section for the SoftBuying website. It includes a brief description of the company's mission and a call-to-action button, along with an image showcasing a mission statement office.
The section is wrapped in a element with the ID "mission" and has a light background color (bg-neutral-100) that switches to a dark color (bg-neutral-800) in dark mode. The content is centered within a container and uses Tailwind's responsive utility classes to create a two-column layout on larger screens.
The headline and paragraph text are styled using Tailwind's typography classes, and the call-to-action button has a primary color background (bg-primary) with a hover effect (hover:bg-opacity-80).
The image is sourced from the provided image URL and is displayed using an ![]()
element with the appropriate alt text.
This implementation follows the design guidelines and requirements specified in the prompt, including the use of Tailwind CSS, semantic HTML structure, and the incorporation of the provided mission section image.
Our Services
Digital Media Buying
Our experts help you navigate the complex world of digital media buying, ensuring your campaigns reach the right audience.
Affiliate Marketing Solutions
Our affiliate marketing solutions help you reach new customers and drive measurable results for your business.
Digital Marketing Expertise
Our team of digital marketing experts can help you develop and execute strategies to grow your business online.
This code creates the "Services" section for the SoftBuying website. It includes three service cards, each with an image, a headline, and a brief description.
The section is wrapped in a element with the ID "services" and has a light background color (bg-neutral-100) that switches to a dark color (bg-neutral-800) in dark mode. The content is centered within a container and uses Tailwind's grid utility classes to create a responsive three-column layout.
Each service card is wrapped in a element with a white (bg-white) or dark (bg-neutral-700) background color, rounded corners, and a subtle shadow (shadow-lg). The images are sourced from the provided URLs and are displayed using
![]()
elements with appropriate alt text.
The headline and paragraph text are styled using Tailwind's typography classes, with the headlines using the text-xl font size and the paragraphs using the text-neutral-600 (light mode) or text-neutral-400 (dark mode) color.
This implementation follows the design guidelines and requirements specified in the prompt, including the use of Tailwind CSS, semantic HTML structure, and the incorporation of the provided services section images.
Get in Touch
Location
123 Main Street, Anytown USA
This code creates the "Contact" section for the SoftBuying website. It includes contact information, a contact form, and corresponding images.
The section is wrapped in a
element with the ID "contact" and has a dark background color (bg-neutral-900) to match the provided design guidelines. The content is centered within a container and uses Tailwind's responsive utility classes to create a two-column layout on larger screens.
The contact information is displayed in a grid of three items, each with an image, a headline, and a paragraph of text. The images are sourced from the provided URLs and are displayed using ![]()
elements with appropriate alt text.
The contact form is wrapped in a element with a white (bg-white) or dark (bg-neutral-800) background color, rounded corners, and a subtle shadow (shadow-lg). The form includes fields for name, email, subject, and message, as well as a submit button with a primary color background (bg-primary) and a hover effect (hover:bg-opacity-80).
The form inputs are styled using Tailwind's form element classes, with a focus effect (focus:ring-2 focus:ring-primary) to provide visual feedback when the user interacts with the form.
This implementation follows the design guidelines and requirements specified in the prompt, including the use of Tailwind CSS, semantic HTML structure, and the incorporation of the provided contact section images.
This footer section includes:
1. A dark-themed background (`bg-neutral-900`) with appropriate padding (`py-12`).
2. A centered container with a responsive flex layout to position the content.
3. The left side contains the company name and a copyright notice.
4. The middle section displays the footer navigation links, generated using the `footerNav` array from the project settings.
5. The right side includes links to LinkedIn and Instagram, with icons.
6. The navigation links and social icons use a subdued text color (`text-neutral-400`) with a hover effect (`hover:text-primary`).
7. The footer section follows the design guidelines and requirements, including the use of Tailwind CSS classes and the placement of navigation links.
