FlowStack is a modern, responsive, and high-fidelity SaaS landing page built entirely using AI-driven development practices. The project demonstrates the power of advanced Prompt Engineering and Wireframe-to-Code UI Conversion using v0.dev (Next.js, Tailwind CSS, and shadcn/ui components).
- Framework: Next.js (React) with Tailwind CSS
- Design System: Custom Wellness/Eco-Friendly Light Mode Palette
- Interface Structure: Multi-section implementation (Navbar, Hero, Feature Grid, FAQ Accordion, Contact Form)
https://v0-saas-landing-page-one-fawn.vercel.app/
This entire application interface was synthesized through iterative prompting. Below is the blueprint of every prompt used to engineer each section:
Add a modern, clean 'Contact Us' form section at the very bottom of this FlowStack landing page, right before the footer.
- Form Fields: Include properly labeled input fields for "Full Name" (text), "Email Address" (email), and "Your Message" (textarea placeholder).
- Submit Button: Add a solid, high-contrast forest green (#1b4332) "Send Message" submit button.
- Styling & Interactivity: * Style the form container to match our existing light-mode aesthetic: crisp white background, rounded-2xl corners, and a soft shadow.
- Give input fields a subtle border that changes to a spring green (#2d6a4f) outline when focused/clicked.
- Add a smooth hover effect on the submit button so it lifts slightly or deepens in color when hovered.
- Layout: Make it a elegant layout—either centered on the page or with contact info (Email, Location) on the left and the form on the right. Fully responsive for mobile devices.
Complete the interactivity requirements by adding an interactive FAQ (Frequently Asked Questions) section with an accordion element.
- Location: Place this FAQ section right above the newly created Contact Form.
- Structure (Accordion): Include 3-4 standard questions (e.g., "What is FlowStack?", "How does the 14-day trial work?", "Can I cancel my subscription anytime?").
- Interactivity: Make it a fully functional accordion—when a user clicks on a question, it should smoothly expand to reveal the answer, and collapse when clicked again (or close the previous one). Add a plus/minus (+ / -) or chevron icon next to each question that rotates smoothly upon expansion.
- Styling: Use the same clean light-mode theme: dark forest green (#1b4332) for question text, soft ivory/white for backgrounds, and subtle green accents.
Breakpoint Transitions: Elements fluidly scale down from high-width desktop views into touch-friendly, single-column stacked cards on mobile viewports.
Micro-interactions: Interactive elements feature custom Tailwind state actions, including focus transitions for inputs, hover-lifts for CTA elements, and asset rotation for accordion chevrons.
Layering Design: UI overlays like floating badges are absolutely positioned over data visualizations to mimic real-time event updates, offering modern visual depth.
Developed as part of an advanced generative UI design assignment, showcasing the capabilities of prompt engineering in full-stack frontend design.