Crafting a Seamless One-Page Green Energy Website with TailwindCSS
Crafting a Seamless One-Page Green Energy Website with TailwindCSS
S
@sopheareachte
Bolt
Discover how to transform a multi-page green energy website template into a seamless, high-converting one-page design using TailwindCSS. This detailed prompt preserves the original aesthetic, color scheme, and structure—while enabling smooth scroll navigation and fully responsive layout. Perfect for designers and developers aiming to build polished landing pages with professional impact. Instruction: 1) Download this image: https://drive.google.com/file/d/1a84vbrD8GBq7KFhrEM0gog7deh13S4m3/view?usp=sharing 2) Copy the prompt below 3) Go to Bolt.new, attach the image and paste the prompt in there to get this website
View Project →“Create a professional, highly polished single-page website using Tailwind CSS. The site should be based on a green energy company originally structured as a multipage layout. Convert all sections into a single-scroll landing page while maintaining all original styling, spacing, padding, font usage, animations, and colors. Navigation links in the header should scroll to the correct section via smooth scrolling (e.g., About Us, Pricing, Blog, Contact Us). Do not route to external pages.
The design should preserve the following features exactly:
Fonts: Use Readex Pro and Figtree (import from Google Fonts).
Colors: Preserve lime green (#BEF264), teal (#022C22, #1D1F1E), white, black, and light orange backgrounds.
Navbar: Sticky on scroll, centered menu items (About, Pricing, Blog, Contact), logo on the left, CTA ("Get Started") on the right. Mobile navigation should toggle open with Alpine.js-style behavior.
Hero section: Title “The Future of Green Energy”, two CTA buttons (“See our solutions”, “Get in touch”), full responsive layout, large title, and background decorative images left and right.
Accordion Section: Include four services: EV Charging, Solar Energy, Wind Energy, and Hydropower, each with collapsible descriptions using Tailwind transitions and Alpine.js-like toggles.
Results Section: Three stat cards (Renewable Energy Generated, Customers Served, Avg. Energy Saved) with SVG icons, white cards on teal background.
Team Section: “Meet our experts” carousel with multiple staff cards, horizontal scrollable or slider logic with previous/next buttons.
Blog Section: Featured large blog post with author avatar, tags, title, and summary. Three smaller articles shown alongside with hover effects. Include “See all” button that reveals more blog posts.
Call to Action (CTA): Section encouraging visitors to learn to build templates like this. Use large font, white text over teal background with lime button.
Footer: Include logo, four columns (Platform, Resources, Company, Newsletter), newsletter input box with hover styles, social media icons, and a copyright.
General instructions:
All anchor links should point to section IDs (#about, #pricing, #blog, #contact) and scroll smoothly.
Layout should be mobile-first, fully responsive, and pixel-perfect across breakpoints.
Use TailwindCSS only. Include placeholder image paths and use img tags as in the original.
Structure the HTML using semantic elements (section, header, nav, footer, etc.).
Recreate all hover states, rounded corners, border effects, spacing, and box shadows as shown.
Don't omit decorative images or background visuals that are part of the visual identity.
The site should feel modern, clean, and professionally branded — no minimalism. Keep all original visual richness.”6 views