Created
January 30, 2026 21:28
-
-
Save finteractive/09c8c9f148429cf68d69d0ef248b2385 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Landing Page Guidelines by Funnel Stage | |
| ## Important: Funnel Stage Identification | |
| Before creating any landing page, first identify the intended funnel stage based on the visitor's awareness level and intent. Then apply the appropriate layout and content rules for that specific stage. | |
| Each stage has distinct purposes, content structures, and conversion goals. | |
| These landing pages are designed to receive traffic from PPC campaigns, newsletter promotions, and partnership events, where visitors arrive with varying levels of awareness and intent based on the source campaign messaging. | |
| --- | |
| # Top of Funnel Rules | |
| **Purpose:** Educational content to attract and inform prospects who are problem-aware but not solution-aware. | |
| **Examples:** Whitepaper downloads, research reports, industry guides, educational resources | |
| ## Content Structure | |
| ### Hero | |
| Use the Component named 'Hero' with the following structure props. | |
| * background color is set to hg:bg-accent-dark | |
| * padding_block_start is 64 | |
| * padding_block_end is 64 | |
| * image_position is hg:md:flex-row-reverse | |
| - media - Use the picture of the report or white paper rendered as a mockup an actual physical book. | |
| - Hero Content - Place the following inside the hero content area inside this component in this exact order. | |
| - **Text Component**. Font size 150% and use bold style on the text. This appears as a pre-title "eyebrow" before the main headline. Text align left. | |
| - **Heading Component**. Heading Level 1, default font size. Align left. 8 words or less. This is the title of the report | |
| - **Text Component.** Short clarifying description of the report. 150 characters or less. Use sentence case. Pitch the report and any research highlights or key benefits it reveals. | |
| - **Button Component** - Set icon to download. Use Title Case. Select an action verb like "Download Free Report" or "Download Whitepaper". | |
| ### Section: Key Findings (3 Icon Tiles) | |
| This section highlights 3 core features of the product and is created by using a section component and putting 3 cards inside it. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 33-33-33 | |
| * Section width hg:lg:max-w-full | |
| * Margin top = 96 | |
| * Margin bottom =96 | |
| * Show Header region | |
| * Hide Footer Region | |
| * In the **Section's Header slot** | |
| * Place a **group component** with all default settings except for padding = small | |
| * Inside the group Items slot, place a Heading Component | |
| * **Heading Text**: Write a short title about who should attend. Heading Level: 2. Text Alignment: Center. Use a title like "Key Findings" | |
| * **Text Component: ** Text Alignment: Center, Include a short line about key details in the report. Lead with impressive numbers that justify further reading like how extensive the research is. | |
| * In the **Section's Grid Slot** Place 3 Icon Title Components with default settings except for the following: | |
| * **Tile_size:** aspect-none | |
| * **Border** = True | |
| * **Border radius** = hg:rounded-[24px] hg:md:rounded-[32px] | |
| * **Heading Text:** Write a short title (~30 characters) focused on key value benefits for using FinDrop expressed in the report. Use title case. | |
| * **Icon name**: Select an appropriate icon slug from your knowledge of icons from phosphoricons.com that matches the value benefit or fact. Do not use the same icon twice on the page. | |
| * **Paragraph Text**: Brief, outcome-focused descriptions under 100 characters. Use sentence case and exclude punctuation. | |
| * **Icon size** = hg:text-6xl | |
| ### Section: What's Inside the Report (4 groups w/ Text) | |
| This section is a Chapter-by-chapter breakdown built with a section component containing a Heading and then 4 separate group components each with their own Heading and Text. It uses background color to create colored text blocks. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 100 | |
| * Section width: 75% | |
| * Margin top: 96 | |
| * Margin bottom: 48 | |
| * Show Header region | |
| * Hide Footer region | |
| * In the **Section's Header slot** | |
| * Place a **group component** with all default settings except for padding = medium | |
| * Inside the group Items slot, place a Heading Component | |
| * **Heading Text**: Write a section "What's Inside" or similar short heading. Heading Level: 2. Text Alignment: Center | |
| * In the **Section's Grid Slot** | |
| * Place 4 **Group** Components with default settings except for the following: | |
| * radius is xl | |
| * padding is sm | |
| * background is hg:bg-brand-dark | |
| * Inside Each Group's Group items slot place: | |
| * **Heading:** Level 3 include the chapter details "Chapter 1: The True Cost of Expense Processing" | |
| * **Text**: one-line description of the details in the chapter. Focus on value and insights reader will gain | |
| ### Section: Call To Action Footer (Group w/ Text & Form, next to Image) | |
| The call to action footer is a section containing text, headings, the download webform and an image. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 50-50 | |
| * Section width: 75% | |
| * Margin top: 96 | |
| * Margin bottom: 48 | |
| * Padding top: 64 | |
| * Padding bottom: 64 | |
| * Show Header region | |
| * Hide Footer region | |
| * In the Section's Header slot | |
| * **Heading Component.** Heading Level 1, Align Left. 8 words or less. Action focused title like "Get Your Free Copy". Use sentence case. | |
| * **Text Component.** Font size 150%. Include social pressure tagline like "Join 2000+ financial leaders who's already downloads the report" or a FOMO message. 150 characters or less. Use sentence case. | |
| * In the **Section's Grid** Component | |
| * Place a **Group** component with the following settings | |
| * Item direction: Vertical | |
| * Extra space between items: Small | |
| * Alignment with parent component: Start | |
| * In the Group component's Group Items Slot | |
| * Place the 2026 Research Report Download (2026_research_report_download) Webform | |
| * Text: Font size Multiplier = Nornal. Include privacy assurance statement. | |
| * In the **Section's Grid** Component (Appears as a 2nd column) | |
| * Place an Image Component with the following settings: | |
| * Image: IMPORTANT Always use an image where a person is reviewing the report in a real world scene. | |
| ## Visual Style | |
| - Hero section: Always use report mockup/cover image | |
| - Form section: Always use image of real person reviewing the report | |
| - Avoid product screenshots | |
| ## Copy Guidelines | |
| - Educational and insight-driven language | |
| - Focus on industry trends and research findings | |
| - Include specific statistics and data points | |
| - Emphasize learning and discovery | |
| --- | |
| # Middle of the Funnel Marketing Leads | |
| **Purpose:** Build trust and demonstrate value for prospects evaluating solutions, encourage engagement. | |
| **Examples:** Webinars, virtual events, case study presentations, product workshops | |
| ## Content Structure | |
| ### Hero billboard | |
| Use the Component named 'Hero billboard' with the following structure props. | |
| * Content position is set to Bottom/left (hg:justify-end) | |
| * object_position` (Background image position) is set to ` hg:object-center` | |
| - Add a background picture of asian woman using the app in the taxi cab | |
| - Hero Content - Place the following inside the hero content area inside this component in this exact order. | |
| - **Text Component**. Font size 150% and use bold style on the text. This appears as a pre-title "eyebrow" before the main headline. Text align left. | |
| - **Heading Component**. Heading Level 1, default font size. Align left. 8 words or less. Express ending a pain point. | |
| - **Text Component.** Short clarifying description of the event. 150 characters or less. Use sentence case. | |
| - **Button Component** - Set icon to user-plus. Use Title Case. Select an action verb like "Reserve Your Spot" or "Register Now". | |
| - **Text Component.** Tiny event info box shows Date and time of event only (Nothing else). Use Normal font size and write italic style for the text. | |
| ### Section: Product Capabilities (3 Cards) | |
| This section highlights 3 core features of the product and is created by using a section component and putting 3 cards inside it. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 33-33-33 | |
| * Section width hg:lg:max-w-full | |
| * Margin top = 96 | |
| * Margin bottom =96 | |
| * Hide Header region | |
| * Hide Footer Region | |
| * In the **Section's Grid Slot **, place 3 instances of the Component named 'Card' inside use the following properties: | |
| - **Heading Text:** Write a short title (~30 characters) focused on product benefits. Use title case. Reference the notes from "FinDrop Key Facts & Value Propositions" in the "Product Capabilities" section. | |
| - **Link**: use '#' for all cards | |
| - **Card Media**: Use Photos of people using the app in different scenarios. Do not use the same image twice on the page. | |
| - **Text**: Brief, outcome-focused descriptions under 100 characters. Use sentence case and exclude punctuation. | |
| - **Card Style**: Framed | |
| ### Section: Audience / Attendees (4 Icon Titles) | |
| This section describes the audiences that should attend the event. It is created by using a section component, and putting a Heading and 4 Icon Title components in it, appearing as a 2 x 2 grid. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 50-50 | |
| * Section width: 75% | |
| * Margin top: 96 | |
| * Margin bottom: 48 | |
| * Show Header region | |
| * Hide Footer region | |
| * In the **Section's Header slot** | |
| * Place a **group component** with all default settings except for padding = small | |
| * Inside the group Items slot, place a Heading Component | |
| * **Heading Text**: Write a short title about who should attend. Heading Level: 2. Text Alignment: Center | |
| * In the **Section's Grid Slot** | |
| * Place 4 **Icon Title** Components with default settings except for the following: | |
| * Tile_size: aspect-none | |
| * Border = True | |
| * Border radius = hg:rounded-[24px] hg:md:rounded-[32px] | |
| * Heading Text = Short key audience description. Title case | |
| * Icon name: Select an appropriate icon slug from your knowledge of icons from phosphoricons.com for the role of the audience memeber. Do not use the same icon twice on the page and do not use the alien head which might be offensive. | |
| * Icon size = hg:text-6xl | |
| ### Section: Call To Action Footer (Group w/ Text & Form, next to Image) | |
| The call to action footer is a section containing text, headings, the registration webform and an image. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 50-50 | |
| * Section width: 75% | |
| * Margin top: 96 | |
| * Margin bottom: 48 | |
| * Padding top: 64 | |
| * Padding bottom: 64 | |
| * Show Header region | |
| * Hide Footer region | |
| * In the Section's Header slot | |
| * **Text Component.** Font size 150% and use bold style on the text. This appears as a pre-title "eyebrow" before the main headline. List the event date and time. | |
| * **Heading Component.** Heading Level 1, Align Left. 8 words or less. Action focused title like "Reserve Your Spot: ..." but be sure the express what the event is clearly. | |
| * **Text Component.** Font size 150%. Short clarifying description describe the benefits of attending or the people you'll join. 150 characters or less. Use sentence case. | |
| * In the **Section's Grid** Component | |
| * Place a **Group** component with the following settings | |
| * Item direction: Vertical | |
| * Extra space between items: Small | |
| * Alignment with parent component: Start | |
| * In the Group component's Group Items Slot | |
| * Place the Virtual Fintech Summit Webform | |
| * Text: Font size Multiplier = Nornal. Put in a blurb about total attendance limits and any details like if a recording is provided after. | |
| * In the **Section's Grid** Component (Appears as a 2nd column) | |
| * Place an Image Component with the following settings: | |
| * Image: Select an illustration about the product that represents the benefits of the project. | |
| * Aspect Ratio - Square | |
| --- | |
| ## Bottom of Funnel Rules | |
| **Purpose:** Convert ready buyers with clear value proposition and immediate next steps. | |
| **Examples:** Demo requests, free trials, consultations, pricing discussions. | |
| ## Content Structure | |
| ### Hero billboard | |
| Use the Component named 'Hero billboard' with the following structure props. | |
| * Content position is set to Bottom/left (hg:justify-end) | |
| * object_position` (Background image position) is set to ` hg:object-center` | |
| - Add a background Illustration abstract with the FinDrop App with the lines coming out of the top of the image. (Hero 2) | |
| - Hero Content - Place the following inside the hero content area inside this component in this exact order. | |
| - **Heading Component**. Heading Level 1, default font size. Align left. 8 words or less. Express ending a pain point from the FinDrop Key Facts & Value Propositions | |
| - **Text Component.** Short clarifying description tied to the heading painpoint and how improved things will be. 150 characters or less. Use sentence case. | |
| - **Text Component.** Tinyinfo higlights a key take away from your demo "Get a personalized demo with instant ROI calculation for your business." . Use Normal font size and write italic style for the text. | |
| - **Button Component** - Set icon to user-plus. Use Title Case. Select an action verb like "Book a Demo". | |
| ### Section: Differentiator (3 Icon Titles) | |
| This section describes the audiences that should attend the event. It is created by using a section component, and putting a Heading and 4 Icon Title components in it, appearing as a 2 x 2 grid. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 33-33-33 | |
| * Section width: 75% | |
| * Margin top: 96 | |
| * Margin bottom: 48 | |
| * Show Header region | |
| * Hide Footer region | |
| * In the **Section's Header slot** | |
| * Place a **group component** with all default settings except for padding = medium | |
| * Inside the group Items slot, place a Heading Component | |
| * **Heading Text**: "Why FinDrop is Different" Heading Level: 2. Text Alignment: Center | |
| * In the **Section's Grid Slot** | |
| * Place 3 **Icon Title** Components with default settings except for the following: | |
| * Tile_size: aspect-none | |
| * **Border** = True | |
| * Border radius = hg:rounded-[24px] hg:md:rounded-[32px] | |
| * **Heading Text** = Use a Key Product Feature / Benefit. Title case Speed, Intergration, and ROI from day 1 are good topics to higlight. Address common objections (implementation time, integration concerns) | |
| * **Paragraph Text** = Write a short related outcome in the 2nd person related to the benefit/feature. | |
| * **Icon name**: Select an appropriate icon slug from your knowledge of icons from phosphoricons.com for feature / benefit. Do not use the same icon twice on the page and do not use the alien head which might be offensive. | |
| * **Icon size** = hg:text-6xl | |
| ### Section: Testimonial (1 Testimonial) | |
| Add social proof to our layout to help validate our claims. Place section component with a testimonial component inside it. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 100 | |
| * Section width: 50% | |
| * Margin top: 96 | |
| * Margin bottom: 48 | |
| * Padding-top: 32 | |
| * Padding-bottom: 32 | |
| * Hide Header region | |
| * Hide Footer region | |
| In the **Section's Grid Slot** | |
| * Place 1 Testimonial Components with default settings except for the following: | |
| * **Blockquote text** - Pull the text from the FinDrop Key Facts & Value Propositions, Testimonials. | |
| * **Card Media:** Find the correct headshot for the quote | |
| ### Section: Call To Action Footer (Group w/ Text & Form, next to Image) | |
| The call to action footer is a section containing text, headings, the book a demo form and an image. | |
| Use the Component named 'Section' with default settings except for the following: | |
| * Content layout is 50-50 | |
| * Section width: 75% | |
| * Margin top: 96 | |
| * Margin bottom: 48 | |
| * Padding top: 64 | |
| * Padding bottom: 64 | |
| * background_color: hg:bg-accent-dark | |
| * Show Header region | |
| * Hide Footer region | |
| * In the Section's Header slot | |
| * **Heading Component.** Heading Level 1, Align Left. 8 words or less. Action focused title like "Get Your Free Copy". Use sentence case. | |
| * **Text Component.** Font size 150%. Include social pressure tagline like "Join 2000+ financial leaders who's already downloads the report" or a FOMO message. 150 characters or less. Use sentence case. | |
| * In the **Section's Grid** Component | |
| * Place a **Group** component with the following settings | |
| * Item direction: Vertical | |
| * Extra space between items: Small | |
| * Alignment with parent component: Start | |
| * In the Group component's Group Items Slot | |
| * Place the "Book a Demo" Webform | |
| * Text: Font size Multiplier = Nornal. Include privacy assurance statement. | |
| * In the **Section's Grid** Component (Appears as a 2nd column) | |
| * Place an Image Component with the following settings: | |
| * Image: IMPORTANT Always use an image of the product UI in a business context (like on a office computer) | |
| ## Visual Style | |
| - Include 1 Product UI/dashboard screenshots | |
| - Professional headshots for testimonials | |
| ## Copy Guidelines | |
| - ROI and implementation-focused language | |
| - Address specific pain points with concrete solutions | |
| - Include exact numbers (savings, time, percentages) | |
| - Use urgent, action-oriented language | |
| - Emphasize speed and ease of implementation |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment