19 days ago
I am providing you a reference design. Use this design ONLY as a visual and structural inspiration: University: Gautam Buddha University Now build a modern, clean, green-themed website for my project called “PaperTrail”. PaperTrail is an academic platform that provides: • Curriculum-based book recommendations • Topic-based book search • College library integration (availability + request + borrowing) • Topic-based research paper recommendations • Research paper summaries (short + detailed) • Mind map generation for research understanding --------------------------------------- STRUCTURE INSTRUCTIONS --------------------------------------- 1. GENERAL STYLE • Use the layout inspiration from the reference design: clean blocks, neat spacing, left-aligned content, image + text sections, and strong typography hierarchy. • Replace the blue color palette with a modern green palette (mint green, emerald green, teal green). • Use soft gradients, rounded corners, and clean card borders. • Avoid heavy drop shadows—use minimal borders and hover animations. 2. NAVIGATION BAR • DO NOT use full transparency like the reference site. • Use a semi-solid background with around 90–95% opacity. • Add a subtle shadow or thin border to separate it from the page. • Logo at left: “PaperTrail” • Right side: Home | Features | Library | Research Papers | About | Login • On scroll: navbar becomes fully solid. 3. HERO SECTION • Make it more modern and visually attractive. • Use a large headline: “Your Personalized Path to Books & Research” • Subheading: “Discover books tailored to your syllabus and research papers that match your topic.” • Add a clean academic illustration or gradient abstract shape on the right. • Two call-to-action buttons: - Explore Books - Explore Research Papers • Keep full-width hero similar to reference but with a green theme. 4. INTRO SECTION LIKE THE REFERENCE Create a two-column block (similar to the information box in the reference design): Left side: • “What is PaperTrail?” • Short explanation about book + research recommendation platform. Right side: • A quick info card: Features list or Quick Links. 5. MODULE PREVIEW SECTIONS (Homepage) Create two cards side-by-side: Card 1: Book Recommendation (Preview) • Icon + title • 3–4 bullet points • A “Learn More” button Card 2: Research Paper Recommendation (Preview) • Icon + title • 3–4 bullet points • A “Learn More” button Do not include full details on homepage — these will link to a separate Features page. 6. HOW IT WORKS SECTION • Replace the reference section layout with a TIMELINE layout. • 6-step timeline with icons: 1. Register 2. Choose module (Books or Research) 3. Enter syllabus or topic 4. System fetches books/papers 5. Summaries & mind maps shown 6. User borrows/saves/explores Use green highlight color for timeline circles. 7. FIND BOOKS / FIND PAPERS SECTION • Use a grid layout similar to the “Find Spaces & Services” section in the reference design. • Replace images with book covers or abstract icons. • Title each card with example books or example research papers. • Add “View Details” buttons. 8. FOOTER • Follow the clean multi-column style from the reference footer. • Categories: - PaperTrail - Library Integration - Research Tools - Support - Contact --------------------------------------- PAGES INSTRUCTIONS (MULTI-PAGE SITE) --------------------------------------- 1. HOME PAGE • Hero • Intro box • Module previews • Timeline (“How PaperTrail Works”) • Small feature teaser grid • Footer 2. FEATURES PAGE Include full details: • Curriculum & topic-based book recommendation • Library availability check • Digital book access • Research paper recommendation • Summaries (short + detailed) • Mind map generation Use clean sections with large headings. 3. BOOK RECOMMENDER PAGE • Form to input branch/year/syllabus • Topic search bar • Book cards with images • Library status: Available / Not Available • “Request Book” button 4. RESEARCH PAPER PAGE • Topic search input • Listing of research papers with: - Similarity score - Short summary - Detailed summary button - Mind map preview 5. ABOUT PAGE • Short explanation • Team members • Vision & mission --------------------------------------- DESIGN REQUIREMENTS --------------------------------------- • Use the reference site only for structure, spacing, section behavior, and layout style. • Do NOT copy text or colors from the reference. Convert it fully into a green-themed modern site. • Ensure everything feels custom, not auto-generated. • Make buttons and cards animate on hover. • Use high-quality typography with clear headings. • Make the entire site clean, minimal, and visually modern. --------------------------------------- FINAL GOAL --------------------------------------- Deliver a complete, polished website inspired by the reference layout but transformed into the PaperTrail brand with: • Modern green theme • Clean sections • Attractive hero • Clear navigation • Timeline-based “How it works” • Preview cards for modules • Multi-page structure Use creativity while keeping the layout familiar and easy to use.
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
