`):**
* **Text Content (Left side on desktop):**
* Heading 1 (``): "Anytime You Need Them" (Green text: #28A745)
* Heading 2 (``): "Online Tools to Make Life Easier" (Bold Black text: #333)
* Paragraph (` `): "A collection of fast, free, and easy-to-use tools to simplify your work, boost productivity, and get things done-right from your browser."
* Button (``): "Get Started" (Green background: #28A745, White text, Rounded corners, Padding).
* **Images (Right side on desktop):**
* Three vertically stacked (or slightly angled) images depicting mobile app mockups. Use placeholder images or simple colored boxes with titles for now if the exact images cannot be extracted/replicated. If using placeholders, label them clearly (e.g., "GST Mockup", "Electricity Mockup").
* **Styling:** Light background. Use flexbox or grid to arrange text and images side-by-side on desktop, stacking vertically on mobile. Ensure appropriate spacing and alignment.
**3. Finance Calculator Section (``):**
* **Section Title:** A heading (``) with the text "Finance Calculator". This title should have a green background block (#28A745) or a green border/accent on the left side, positioned above the grid.
* **Tool Grid (``):**
* Use a grid layout (e.g., CSS Grid or framework grid classes) to arrange the following 12 tools in a 2x4 or 3x4 layout on desktop, collapsing to 1 or 2 columns on smaller screens.
* Each tool should be represented by a card (`
`).
* **Card Content:**
* Title (`
`): e.g., "SIP"
* Description (` `): e.g., "Calculate how much you need to save or how much you will accumulate with SIP"
* Button (``): "Calculate" (Green background: #28A745, White text, Small padding, Rounded corners).
* **List of Tools:**
* SIP
* Lumpsum
* SWP
* MF
* SSY
* PPF
* EPF
* FD
* RD
* NPS
* EMI
* GST
* **Styling:** White background for cards, green border (#28A745) around each card. Consistent spacing between cards.
**4. File Converter Section (``):**
* **Section Title:** A heading (``) with the text "File Converter". Similar styling to the Finance Calculator title (green accent).
* **Tool Grid (``):**
* Use a grid layout similar to the calculator section.
* Arrange the following 8 tools in a 2x4 layout on desktop.
* Each tool should be a card (`
`).
* **Card Content:**
* Title (`
`): e.g., "PNG to JPEG"
* Description (` `): e.g., "This free online tool converts your PNG images to JPEG format"
* Button (``): "Convert" (Green background: #28A745, White text, Small padding, Rounded corners).
* **List of Tools:**
* PNG to JPEG
* PNG to WEBP
* PNG to PDF
* PNG to SVG
* JPEG to PNG
* JPEG to WEBP
* JPEG to PDF
* JPEG to SVG
* **Styling:** White background for cards, green border (#28A745) around each card. Consistent spacing.
**5. Footer (``):**
* **Layout:** Use a dark background color (e.g., a dark gray or blue matching the image footer). Use flexbox or grid to arrange content in columns on desktop, stacking on mobile.
* **Left Column:**
* Logo: "AI TOOLS" logo (similar styling to header).
* Description (``): "All-in-one platform with SIP, SWP, PPF calculators and PNG to JPEG, WEBP, SVG, PDF converter tools. User-friendly, and ad-free – perfect for financial planning and file conversion."
* **Middle Columns:**
* Heading (`
`): "Finance Tools"
* Unordered List (``):
* SIP Calculator
* Lumpsum Calculator
* SWP Calculator
* MF Calculator
* Heading (``): "File Converter"
* Unordered List (``):
* PNG to JPEG
* PNG to WEBP
* PNG to PDF
* PNG to SVG
* **Right Column:**
* Heading (``): "Quick Links"
* Unordered List (``):
* About Us
* Contact Us
* Disclaimer
* Privacy Policy
* Social Media Icons: Placeholder icons or simple links for Facebook, Twitter, Instagram, YouTube, WhatsApp.
* **Bottom Row:**
* Copyright text: "© 2025 Example.com | All rights reserved"
* **Styling:** Dark background. White text for headings, links, and paragraphs. Links in columns should be simple text without underlines by default. Social icons appropriately spaced. Copyright text centered or aligned at the bottom.
**Styling Requirements:**
* **Colors:** Use `#007BFF` (blue), `#28A745` (green), `#FFFFFF` (white), `#333333` (dark gray/black), and the dark footer background color from the image.
* **Typography:** Use a consistent sans-serif font stack (e.g., `sans-serif`, falling back to `Arial`, `Helvetica`). Headings should be bold.
* **Spacing:** Apply appropriate padding and margins to sections and elements to match the image's visual spacing.
* **Buttons:** Consistent green background, white text, slightly rounded corners, appropriate padding. Hover effects (e.g., slightly darken background) are a plus.
* **Cards:** White background, green border, rounded corners, padding inside.
* **Responsiveness:** The layout must adapt smoothly to different screen sizes (mobile, tablet, desktop). Grid layouts should rearrange. Text sizes may adjust.
**Functionality (Basic JavaScript):**
* **"Get Started" Button:** Add a click event listener. When clicked, trigger an `alert("Get started button clicked!")`.
* **"Calculate" Buttons (Finance):** Add a click event listener to all elements with the class `calculate-button`. When clicked, trigger an `alert("Calculate button clicked!")`.
* **"Convert" Buttons (File Converter):** Add a click event listener to all elements with the class `convert-button`. When clicked, trigger an `alert("Convert button clicked!")`.
* **Search Icon:** Add a click event listener. When clicked, trigger an `alert("Search feature coming soon!")`. For a more visual placeholder, toggle a simple search bar overlay (a div that appears/disappears).
* **Navigation Links:** The "Home", "Finance Tools", "File Converter" links should ideally scroll smoothly to their respective sections on the `index.html` page using anchor links or JavaScript scrolling. Other links can be placeholder (`#`) or link to simple placeholder pages if separate files are generated (e.g., `blog.html`).
**Constraints and Deliverables:**
* Generate clean, well-commented HTML, CSS, and JavaScript code.
* Prioritize matching the visual layout and styling of the image.
* Use placeholder images if exact mockups cannot be generated or extracted.
* All specified sections and content must be included.
* Ensure the site is fully responsive.
* Provide a `readme.md` explaining the files and noting that the calculator/converter functionality is placeholder.
**Note:** Focus on the frontend structure and styling. No backend logic is required. The "Calculate" and "Convert" buttons do not need to perform actual calculations or conversions, just trigger the placeholder alert.
Please generate the `index.html`, `style.css`, and `script.js` files necessary to build this website.
IGNORE_WHEN_COPYING_START
Use code with caution.
IGNORE_WHEN_COPYING_END
Gemini 2.5 Flash-Lite Preview 06-17