I want you to act as a professional frontend web developer.
Based on the following instructions, build the frontend UI using modern best
practices and responsive design:
==================================================================
FULL & RESPONSIVE PROMPT LIST FOR SYNTHIFY (AI TOOLKIT VERSION)
==================================================================
Instructions:
This file contains the complete set of 7 prompts to build the final, attractive,
and responsive frontend for your "Synthify" application.
Paste each prompt into your AI tool one by one, in order.
----------------------------------------------------
PART 1: CORE APPLICATION PAGES (RESPONSIVE)
----------------------------------------------------
PROMPT 1: THE ATTRACTIVE & RESPONSIVE HOME PAGE
Build a beautiful, responsive homepage using the "Inter" font and Tailwind CSS.
* Background: A clean modern mesh gradient with blue-green-orange hues, subtle
animation.
* Header:
* Desktop: Left — icon logo with text “Synthify” in bold white. Right — links
for “Login” and a glowing “Try Free” button.
* Mobile: Left — logo icon only; Right — hamburger menu.
* Main Section:
* Headline: "One Platform. Infinite Possibilities."
* Subheading: "Generate, convert, and synthesize content using the power of
AI."
* Large Glassmorphism Card:
* Desktop: Centered card with glowing shadows and CTA: “Upload or Start
Typing”.
* Mobile: Full-width card with glowing dashed borders and clear call to
action.
***
PROMPT 2: THE ATTRACTIVE & RESPONSIVE SIGN-UP PAGE
Build a modern, responsive Sign-Up page with Synthify's vibrant gradient and
frosted-glass header.
* Content:
* Center Glassmorphism Card.
* Desktop: 420px width with shadows.
* Mobile: Full width with horizontal padding.
* Inside:
* Title: “Create Your Synthify Account”.
* Google Sign-Up Button with logo.
* Divider with “OR”.
* Inputs for Email + Password (glow on focus).
* Gradient Button: “Continue with Email”
* Bottom: “Already have an account? Login”
***
PROMPT 3: THE ATTRACTIVE & RESPONSIVE LOGIN PAGE
Mirror the design of the Sign-Up page for the Login screen.
* Main Card:
* Title: “Welcome back to Synthify!”
* Google Sign-In Button
* Divider: "OR"
* Inputs: Email + Password (semi-transparent background, glowing border)
* CTA Button: “Login with Email”
* Link: “Don’t have an account? Sign Up”
***
PROMPT 4: THE ATTRACTIVE & RESPONSIVE HISTORY PAGE
Design a user dashboard page with a clean gradient and minimal distraction.
* Header (Logged-in):
* Desktop: Left — “Synthify”, Right — “Dashboard”, “My Files”, “Logout”
* Mobile: Hamburger nav
* Main Content:
* Title: “Your Recent Creations”
* Display:
* Desktop: Table layout with Date, Title, Type (Text, Code, Image), Actions
(View, Download, Delete)
* Mobile: Stack as cards, one per record, showing all info vertically with
action buttons below
----------------------------------------------------
PART 2: STATIC & ERROR PAGES (RESPONSIVE)
----------------------------------------------------
PROMPT 5: THE ATTRACTIVE & RESPONSIVE PRICING PAGE
Design a clear, conversion-focused pricing page with the Synthify gradient
background.
* Title: “Flexible Pricing for Every Creator”
* Display:
* Desktop: 3 Glassmorphism Cards side by side:
* Starter (Free), Creator (Pro), Enterprise (Custom)
* Mobile: Cards stacked vertically with CTA button under each.
***
PROMPT 6: 404 ERROR PAGE (RESPONSIVE)
Create a minimal, centered 404 page with Synthify’s color theme.
* Content:
* Huge “404”
* Message: “We couldn’t synthesize that page.”
* Button: “Back to Dashboard” or “Go Home”
* On mobile: scale down font sizes gracefully
----------------------------------------------------
PART 3: GLOBAL DESIGN POLISH
----------------------------------------------------
PROMPT 7: FINAL POLISH
Apply final UI polish globally across Synthify.
* Animations:
* Subtle fade-in and scroll-reveal on page load
* Hover Effects:
* All buttons should glow or scale slightly
* Focus States:
* All input fields glow with Synthify’s color palette
* Font:
* Use “Inter” font everywhere
* Accessibility:
* Ensure contrast ratios are high
* Add aria-labels for icons and buttons
* Keyboard-navigable components
Generate clean, production-ready code using the specified technologies. Make sure
the design is user-friendly, accessible, and works well on both desktop and mobile.