Skip to content

prompt.md

Latest commit

 

History

History
156 lines (124 loc) · 7.74 KB

prompt.md

File metadata and controls

156 lines (124 loc) · 7.74 KB
Raw

A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE "GLASTO" NEXT.JS SAAS & STARTUP MARKETING TEMPLATE BY THEMEFISHER, REBUILT AS PLAIN HTML + CSS + VANILLA JS WITH NO BUILD STEP. EVERY PAGE, THE FULL LOOK & FEEL, HOVER STATES, DROPDOWN/MOBILE-MENU INTERACTIONS, FAQ ACCORDION, PRICING TOGGLE, SWIPER CAROUSELS, AOS SCROLL/ENTRANCE ANIMATIONS, AND A STICKY HEADER ARE REPRODUCED FROM CAPTURED REFERENCE ARTIFACTS. ALL ASSETS (FONTS, IMAGES, ICONS) ARE VENDORED LOCALLY AND IT RUNS OFFLINE.

REFERENCE: https://themefisher.com/demo?theme=glasto-nextjs

THE LIVE TEMPLATE ITSELF (INSIDE THE THEMEFISHER PREVIEW FRAME) IS SERVED FROM https://glasto-nextjs.vercel.app — THAT IS THE ORIGIN THAT WAS CRAWLED AND CLONED. THE THEMEFISHER /demo PAGE IS ONLY THE PREVIEW HOST WRAPPING THE TEMPLATE IN AN IFRAME; ITS CHROME IS NOT PART OF THIS CLONE.

SUMMARY

GLASTO IS A MULTI-LAYOUT SAAS & STARTUP NEXT.JS TEMPLATE BY THEMEFISHER, SHOWCASING "SOCIALSYNC" — A SOCIAL MEDIA MANAGEMENT PLATFORM. THE TEMPLATE IS A LIGHT-MODE-FIRST DESIGN (WITH DARK SECTIONS) USING A BOLD BLUE PRIMARY (#3A7DFF) AGAINST A DEEP NAVY DARK (#161C52), BODY TEXT IN SLATE-GREY (#484A61), AND A CLEAN WHITE BACKGROUND. IT FEATURES 16 DISTINCT PAGES (HOME, ELEMENTS, COMPANY, PRICING, INTEGRATION, CASE STUDIES, CASE STUDY DETAILS, CONTACT, REQUEST A DEMO, CHANGELOG, BLOG, BLOG DETAILS, REVIEWS, PRIVACY POLICY, TERMS & CONDITIONS, AND 404), EACH SHARING A COMMON HEADER/NAV (WITH AN "ALL PAGES" MEGA-DROPDOWN) AND FOOTER. ENTRANCE ANIMATIONS ARE POWERED BY AOS (ANIMATE ON SCROLL); SWIPER.JS DRIVES TESTIMONIAL AND LOGO CAROUSELS; LENIS-STYLE SMOOTH SCROLL IS USED FOR THE OVERALL PAGE EXPERIENCE.

STYLE

PALETTE

  • --color-primary: #3a7dff (BLUE — CTA BUTTONS, LINKS, ACCENTS)
  • --color-dark: #161c52 (NAVY — DARK SECTIONS, NAV, FOOTER)
  • --color-text: #484a61 (BODY TEXT)
  • --color-text-dark: #161c52
  • --color-text-light: #f6f7f9
  • --color-body: #ffffff (PAGE BACKGROUND)
  • --color-light: #f6f7f9 (ALTERNATING LIGHT-BG SECTIONS)
  • --color-border: #e0e0e0 (SUBTLE BORDERS)
  • --color-black: #000000
  • --color-white: #ffffff

TYPOGRAPHY

  • PRIMARY FONT: "Onest" (GOOGLE FONTS, WEIGHTS 400/600/700) — BODY TEXT, BUTTONS, UI LABELS
  • SECONDARY FONT: "Onest" — HEADINGS (SAME FAMILY, BOLDER)
  • BASE FONT-SIZE: 16px / LINE-HEIGHT: 1.8
  • H1: ~3rem (48px) / FONT-WEIGHT 600
  • H2: ~2.25rem (36px) / FONT-WEIGHT 600
  • H3: ~1.5rem (24px) / FONT-WEIGHT 600
  • H4: ~1.25rem (20px) / FONT-WEIGHT 600
  • SMALL/LABEL TEXT: 14px / 0.875rem

SPACING SCALE

  • BASE UNIT: 0.25rem (4px) — TAILWIND-COMPATIBLE
  • SECTION VERTICAL PADDING: 5rem (80px) — section-md / section
  • CONTAINER MAX-WIDTH: ~1280px
  • GRID: 12-COLUMN BOOTSTRAP-LIKE (row, col-N, md:col-N, lg:col-N)

RADII & SHADOWS

  • BUTTONS/BADGES: rounded-full (pill) or rounded-sm
  • CARDS: rounded-xl (12px) or rounded-lg
  • IMAGES IN HERO: rounded-md / rounded-xl
  • DROP SHADOWS: shadow / shadow-lg / drop-shadow-2xl

ANIMATION EASINGS

  • AOS DEFAULT EASING: "ease" / DURATION: 400ms / DELAY: 0
  • fade-up-sm, zoom-in-up-sm, fade-in — CUSTOM AOS ANIMATIONS
  • POP-IN-OUT FLOATING: pop-in-out KEYFRAME (VERTICAL FLOAT)
  • BANNER GRADIENT: BOTTOM BLUR WITH opacity-90
  • HOVER TRANSITIONS: all 0.3s / transform on hover

LAYOUT & STRUCTURE

SHARED CHROME

ANNOUNCEMENT BAR (DISMISSABLE):

  • DARK NAVY PILL BAR AT TOP: "Get 17+ NextJS themes in a single bundle! Explore Now"
  • CLOSE BUTTON (X SVG) — COLLAPSES BAR, SAVES TO LOCALSTORAGE

HEADER / NAV:

  • LOGO (SVG) LEFT; "ALL PAGES" MEGA-DROPDOWN CENTER + DIRECT LINKS (PRICING, CASE STUDIES, SUPPORT); "GET THIS TEMPLATE" PILL BUTTON RIGHT
  • STICKY ON SCROLL — ADDS BACKGROUND/SHADOW AFTER SCROLL
  • HAMBURGER (CHECKBOX HACK) FOR MOBILE, EXPANDS FULL-WIDTH NAV BELOW HEADER
  • ALL-PAGES DROPDOWN IS A 3-COLUMN MEGA-MENU WITH DESCRIPTIONS

FOOTER (DARK NAVY):

  • 4-COLUMN LAYOUT: BRAND + NEWSLETTER FORM | QUICK LINKS | OTHER LINKS | SOCIAL
  • BOTTOM BAR: "© COPYRIGHT 2026, ALL RIGHTS RESERVED BY THEMEFISHER" + SOCIAL ICONS (FACEBOOK, TWITTER, GITHUB, LINKEDIN)

PAGE: HOME (index.html)

  • HERO: GRADIENT BG IMAGE, BADGE PILL, H1 "Elevate Social Media Management Game Fast!", SUBTITLE, 2 CTA BUTTONS, FLOATING SIDE IMAGES (social-media-1.png / social-media-2.png), MAIN DASHBOARD SCREENSHOT (banner.png) + OVERLAY CARD (banner-1.png, banner-2.png)
  • MARQUEE LOGOS: DARK SECTION — INFINITE SCROLLING PARTNER LOGO STRIP (SVG LOGOS: FACEBOOK, GOOGLE, YOUTUBE, PINTEREST, NOTION, etc.)
  • FEATURES GRID: "Growth Should Be Fun!" — 3-FEATURE HIGHLIGHT GRID WITH ICON+LABEL+DESC CARDS
  • FULL-WIDTH FEATURE: "Power of Social Media" — LIGHT-BG SECTION WITH LARGE SCREENSHOT LEFT + STATS/FEATURES RIGHT
  • STATS MARQUEE: DARK SECTION — "Trusted by 21,000+ Customers" — 4 STAT CHIPS SCROLLING
  • FEATURE TABS: TABBED FEATURE SECTION WITH FEATURE IMAGES AND DESCRIPTIONS
  • TESTIMONIALS: SWIPER CAROUSEL — CUSTOMER REVIEWS WITH AVATAR, NAME, ROLE, STARS
  • BLOG POSTS: 3-COLUMN GRID OF BLOG CARDS (IMAGE, DATE, TITLE, DESC)
  • FAQ ACCORDION: COLLAPSIBLE FAQ WITH SMOOTH HEIGHT ANIMATION
  • CTA BANNER: DARK SECTION — "Build Website in Days, Not Weeks!" + CTA BUTTONS

PAGE: PRICING (pricing.html)

  • HERO: PAGE HEADER WITH BREADCRUMB
  • PRICING TOGGLE: MONTHLY/YEARLY SWITCHER (JS TOGGLE)
  • PRICING CARDS: 3 TIERS (STARTER, PROFESSIONAL, ENTERPRISE) WITH FEATURE LISTS AND CTA
  • COMPARISON TABLE: FEATURE COMPARISON GRID
  • TESTIMONIALS: SWIPER CAROUSEL
  • FAQ ACCORDION
  • CTA BANNER

PAGE: COMPANY (company.html)

  • PAGE HEADER: BREADCRUMB
  • ABOUT SECTION: COMPANY STORY WITH LARGE IMAGE + STATS
  • TEAM GRID: 8 TEAM MEMBER CARDS (PHOTO, NAME, ROLE, SOCIAL LINKS)
  • GALLERY: 3-IMAGE HORIZONTAL GALLERY
  • CTA BANNER

PAGE: INTEGRATION (integration.html)

  • PAGE HEADER: BREADCRUMB
  • INTEGRATION GRID: CARD GRID OF INTEGRATIONS (ICON, NAME, DESCRIPTION, CONNECT BUTTON)
  • CTA BANNER

PAGE: CASE STUDIES (case-studies.html)

  • PAGE HEADER: BREADCRUMB
  • CASE STUDY GRID: 8 CASE STUDY CARDS WITH THUMBNAIL, TAG, TITLE, BRIEF

PAGE: CASE STUDY DETAILS (case-study.html)

  • PAGE HEADER: BREADCRUMB
  • ARTICLE CONTENT: FULL CASE STUDY WITH HERO IMAGE, SIDEBAR, BODY TEXT
  • RELATED STUDIES

PAGE: CONTACT (contact.html)

  • PAGE HEADER: BREADCRUMB
  • CONTACT FORM: NAME, EMAIL, MESSAGE FIELDS + SUBMIT
  • CONTACT INFO: ADDRESS, EMAIL, PHONE CARDS

PAGE: REQUEST A DEMO (demo.html)

  • PAGE HEADER: BREADCRUMB
  • DEMO REQUEST FORM: MULTI-FIELD FORM (NAME, COMPANY, EMAIL, PHONE)
  • FEATURES HIGHLIGHT

PAGE: CHANGELOG (changelog.html)

  • PAGE HEADER: BREADCRUMB
  • CHANGELOG LIST: VERSION ENTRIES WITH DATE, DESCRIPTION, FEATURES ADDED/FIXED/REMOVED

PAGE: BLOG (blog.html)

  • PAGE HEADER: BREADCRUMB
  • BLOG GRID: 6 BLOG CARDS WITH FEATURED IMAGE, CATEGORY, DATE, TITLE, EXCERPT

PAGE: BLOG POST (blog-post.html)

  • PAGE HEADER: BREADCRUMB
  • ARTICLE: FULL BLOG POST WITH COVER IMAGE, DATE, AUTHOR, TAGS, RICH CONTENT
  • RELATED POSTS

PAGE: REVIEWS (reviews.html)

  • PAGE HEADER: BREADCRUMB
  • RATING SUMMARY: OVERALL STAR RATING + BREAKDOWN
  • REVIEW CARDS: GRID OF CUSTOMER REVIEWS

PAGE: PRIVACY POLICY (privacy-policy.html)

  • PAGE HEADER: BREADCRUMB
  • POLICY CONTENT: LONG-FORM LEGAL TEXT WITH HEADINGS

PAGE: TERMS & CONDITIONS (terms-conditions.html)

  • PAGE HEADER: BREADCRUMB
  • TERMS CONTENT: LONG-FORM LEGAL TEXT WITH HEADINGS

PAGE: 404 (404.html)

  • CENTERED ERROR PAGE: 404 ILLUSTRATION, "PAGE NOT FOUND" H1, BACK-TO-HOME BUTTON

PAGE: ELEMENTS (elements.html)

  • UI SHOWCASE: COMPREHENSIVE COLLECTION OF ALL UI COMPONENTS USED IN THE TEMPLATE (BUTTONS, BADGES, CARDS, FORMS, ICONS, TYPOGRAPHY)