F1: Landing Page Flow - Feature Analysis¶

Overview¶

The Landing Page serves as the primary entry point for the Futr Connect platform. It showcases the platform’s key offerings including Top AI companies, Newsfeed, and Podcasts. The page contains multiple interactive sections with call-to-action (CTA) buttons designed to drive user engagement and conversions. The design follows a modern, responsive approach with dynamic content loaded through API calls to provide users with a preview of the platform’s value before registration.

Company Information Display Strategy¶

In line with the platform-wide approach, the Landing Page shows only basic company information on cards in the Top AI companies section. This creates a clean, focused user interface while preserving detailed information for the Company Detail Page:

Card View (Landing Page): Shows only essential information (name, logo, category, description)
Detail View: Available when a user clicks on a company card, navigating to the full Company Detail Page
Benefits: Improves performance, maintains visual consistency, and encourages exploration

API Endpoints¶

1. Get Featured Companies¶

GET /api/company/?is_featured_by_admin=true&status=published

Response:

{
  "count": 20,
  "next": "https://api.futrconnect.com/api/company/?is_featured_by_admin=true&limit=6&offset=6&status=published",
  "previous": null,
  "results": [
    {
      "id": "uuid-string",
      "name": "AI Company Name",
      "logo": "https://storage.futrconnect.com/logos/company-logo.png",
      "category": ["uuid-string"],
      "overview": "Leading provider of conversational AI solutions",
      "is_featured_by_admin": true
    }
    // Additional companies...
  ]
}

2. Get Newsfeed Preview¶

GET /api/newsfeed/?is_active=true&ordering=-created_on

Response:

{
  "count": 50,
  "next": null,
  "previous": null,
  "results": [
    {
      "id": "uuid-string",
      "headline": "New Advances in AI Research",
      "url": "https://example.com/article",
      "description": "Researchers have developed a new approach to...",
      "published_date": "2025-05-10T14:30:00Z"
    }
    // Additional news items...
  ]
}

3. Submit “Get Featured” Form¶

POST /api/company-feature-request/

Request Body:

{
  "name": "AI Innovations Inc",
  "email": "contact@aiinnovations.com",
  "note": "We are a leading provider of AI solutions in healthcare",
  "website": "https://aiinnovations.com"
}

Response:

{
  "id": "uuid-string",
  "status": "pending",
  "message": "Your feature request has been submitted successfully."
}

4. Submit Contact Form¶

POST /api/contact-us/

Request Body:

{
  "name": "John Doe",
  "email": "john.doe@example.com",
  "subject": "Partnership Inquiry",
  "description": "I'm interested in partnering with Futr Connect..."
}

Response:

{
  "id": "uuid-string",
  "name": "John Doe",
  "email": "john.doe@example.com",
  "subject": "Partnership Inquiry",
  "description": "I'm interested in partnering with Futr Connect..."
}

State Management¶

React query¶

// Top ai company
interface AiCompany {
id: string;
category: Category[];
company_addresses: CompanyAddress[];
company_social_links: CompanySocialLinks | null;
is_followed: boolean;
created_on: string;
edited_on: string;
name: string;
email: string;
company_founded: string;
phone_number: string;
logo: string;
meeting_url: string | null;
short_video: string | null;
first_call: string | null;
demo_video: string;
overview: string;
about: string;
best_suited_for: string[];
where_to_use: string;
standout_function: string;
status: string;
publish_date: null;
is_claimed: boolean;
is_featured_by_admin: boolean;
total_followers_count: number;
user: string;
claimed_by: null;
page:”HomeFeedMain” | “AiCompanyListMain” | “AiCompanyDetails”;
}
interface Category {
id: string;
title: string;
description: string;
}
type CompanyAddress = {
address_1: string;
address_2: string;
address_type: string;
company: string;
created_on: string;
edited_on: string;
id: string;
postal_code: string;
state: string;
}

interface CompanySocialLinks {
id: string;
created_on: string;
edited_on: string;
career: null | string;
event_page: null | string;
customer_portal: null | string;
facebook: null | string;
instagram: null | string;
youtube: null | string;
twitter: null | string;
linkedin: null | string;
website: string | null;
company: string | null;
}

// News feed
interface NewsFeedData {
id: string;
created_on: string;
edited_on: string;
headline: string;
url: string;
published_date: string;
description: string;
image_url: string;
minute_read: number;
views_count: number;
is_active: boolean;
is_favourite: boolean;
is_viewed: boolean;
thumbnail_image: null | string;
}

interface SaveNews {
created_on: string;
edited_on: string;
headline: string;
id: string;
image_url: null | string;
news_feed: string;
url: string;
user: string;
views_count: number;
thumbnail_image: null | string;
}

// Notification
type NotificationType = {
id: string;
created_on: string;
edited_on: string;
content_type: string | null;
message: string | null;
title: string | null;
image: string | null;
actions: NotificationActionType;
is_read: boolean | null;
object_model_id: string | null;
notification_type: string | null;
target_user: string | null;
};

MobX-State-Tree Models¶

LandingPageStore¶

Model UserStore {
JoinAsACompany: {
   name : string,
   email : string,
   note : string,
   website : string
   }
}

Modal GetFeaturedStore {
   //actions
   createFeatureRequest()
}

Modal ContactSupportForm {
   //actions
   createContactRequest(FormData)
}

Database Models¶

PostgreSQL Models¶

Company¶

id (UUID, primary key)
name (varchar, required)
logo (ImageField, nullable)
category (ManyToManyField to CompanyCategory)
overview (text, nullable)
is_featured_by_admin (boolean, default: false)

NewsFeed¶

id (UUID, primary key)
headline (varchar, required)
url (URLField, unique, required)
description (text, nullable)
published_date (datetime, nullable)

Podcast¶

id (UUID, primary key)
title (varchar, required)
description (text, nullable)
media_embed_url (URLField, nullable)
thumbnail (ImageField, nullable)

CompanyFeatureRequest¶

id (UUID, primary key)
name (varchar, required)
email (EmailField, required)
note (text, nullable)
website (URLField, nullable)
status (varchar, choices: pending, approved, rejected, default: pending)

ContactUs¶

id (UUID, primary key)
name (varchar, required)
email (EmailField, required)
subject (varchar, required)
description (text, required)

Firebase Collections (Authentication)¶

Used only for authentication, not for storing application data

Backend Logic¶

Dynamic Content Fetching¶

The landing page retrieves its dynamic content through standard RESTful API endpoints built with Django REST Framework. There are no complex, client-side algorithms for dynamic loading; the logic is handled by the backend views.

Data Retrieval: The endpoints for featured companies, news, and podcasts directly query the PostgreSQL database using the Django ORM. For example, the featured companies are retrieved by filtering the Company model where the is_featured_by_admin flag is true.
Serialization: Standard Django REST Framework serializers are used to convert the database querysets into JSON responses.
No Third-Party Fetching on Landing Page: The landing page APIs do not directly fetch data from external services like NewsAPI or YouTube upon a user’s request. This content is expected to be populated into the database through separate administrative processes.

Form Submission Handling¶

The forms on the landing page are handled by simple API endpoints that perform basic data validation and database creation.

“Get Featured” Form: When a user submits this form, the /api/company-feature-request/ endpoint receives the data. It uses a DRF serializer to validate the input and creates a new CompanyFeatureRequest object in the database. There is no integration with external services for this process.
Contact Us Form: The /api/contact-us/ endpoint handles this form. Similar to the feature request, it validates the incoming data and creates a new ContactUs record in the database. The claim of a Zendesk integration is not present in the backend code; the submission is simply stored locally.

Performance and Optimization¶

Initial Load Optimization¶

Code Splitting and Lazy Loading:

Implement route-based code splitting using Next.js dynamic imports
Lazy load below-the-fold components
Library: next/dynamic for component-level code splitting

Image Optimization:

Use Next.js Image component for automatic optimization
Implement responsive images with correct sizing
Use WebP format with fallbacks for older browsers
Consider a CDN for global distribution of static assets
Library: next/image

Server-Side Rendering (SSR) Strategy:
- Use Next.js SSR for landing page to improve SEO and initial load
- Implement Incremental Static Regeneration (ISR) for semi-dynamic content
- Use client-side fetching for frequently changing data
- Library: Next.js built-in SSR capabilities

SEO Optimization¶

Metadata Implementation:

Implement structured data using JSON-LD for rich search results
Add comprehensive meta tags including Open Graph and Twitter cards
Create a dynamic sitemap.xml and robots.txt
Libraries: next-seo, schema-dts for typesafe JSON-LD

Core Web Vitals Optimization:
- Monitor and optimize Largest Contentful Paint (LCP)
- Preload critical resources
- Optimize server response time
- Minimize Cumulative Layout Shift (CLS)
- Set fixed dimensions for images and embedded content
- Avoid inserting content above existing content
- Improve First Input Delay (FID) and Interaction to Next Paint (INP)
- Minimize main thread blocking
- Optimize JavaScript execution
- Tool: web-vitals library for monitoring

Caching Strategy¶

API Response Caching:

Implement stale-while-revalidate pattern
Cache dynamic API responses using SWR or React Query
Set appropriate cache headers
Libraries: @tanstack/react-query

Technical Considerations¶

Browser Compatibility¶

Support modern browsers and IE11 (if required)
Use Babel and polyfills for backward compatibility
Implement feature detection rather than browser detection
Test across browsers using BrowserStack or similar

Mobile Responsiveness¶

Implement mobile-first design using Tailwind’s responsive classes
Test on various device sizes and orientations
Consider implementing AMP versions for key landing pages
Use CSS container queries for complex responsive components

Follow WCAG 2.1 AA standards
Implement proper semantic HTML
Ensure keyboard navigability
Provide appropriate ARIA attributes

Potential Bottlenecks¶

Image Heavy Content:

Multiple high-resolution images can slow page load
Solution: Implement responsive images, lazy loading, and CDN delivery

Third-Party Dependencies:

Zendesk, YouTube embeds, and other third-party services may introduce latency
Solution: Implement graceful fallbacks and asynchronous loading

Authentication Redirect Chains:
- Complex navigation flows with authentication may result in multiple redirects
- Solution: Optimize redirect paths and implement state preservation

Implementation Considerations¶

Development Approach¶

Adopt a component-driven development approach using Storybook
Implement feature flags for gradual rollout
Use TypeScript for type safety and better developer experience
Follow atomic design principles for UI components

Testing Strategy¶

Unit tests for utility functions and isolated components
Integration tests for component interactions
E2E tests for critical user flows
Libraries: Playwright

Monitoring and Analytics¶

Implement Google Analytics 4 for user behavior tracking
Use custom events to track CTA button clicks
Monitor performance metrics with web-vitals

Micro-Interactions and Animations¶

Implement subtle animations on scroll using Intersection Observer
Add micro-interactions for button hover/active states
Use GSAP or Framer Motion for more complex animations
Consider skeleton loaders with subtle pulsing effects

Advanced UI Elements¶

Use SVGs for the “How It Works” section
Implement a live AI news ticker at the top of the page

Performance Budget¶

Establish performance budgets for page size and load time
Set targets: <2s Time to Interactive, <800KB page size
Monitor regularly using Lighthouse CI
Implement performance regression testing in CI/CD pipeline

Content Delivery Strategy¶

Implement A/B testing for different landing page layouts
Consider personalization based on referral source
Use dynamic content prioritization based on user behavior
Libraries: @marvelapp/next-a-b-test for A/B testing

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search

F1: Landing Page Flow - Feature Analysis¶

Overview¶

Company Information Display Strategy¶

API Endpoints¶

1. Get Featured Companies¶

2. Get Newsfeed Preview¶

3. Submit “Get Featured” Form¶

4. Submit Contact Form¶

State Management¶

React query¶

MobX-State-Tree Models¶

LandingPageStore¶

Database Models¶

PostgreSQL Models¶

Company¶

NewsFeed¶

Podcast¶

CompanyFeatureRequest¶

ContactUs¶

Firebase Collections (Authentication)¶

Backend Logic¶

Dynamic Content Fetching¶

Form Submission Handling¶

Performance and Optimization¶

Initial Load Optimization¶

SEO Optimization¶

Caching Strategy¶

Technical Considerations¶

Browser Compatibility¶

Mobile Responsiveness¶

Accessibility (A11y)¶

Potential Bottlenecks¶

Implementation Considerations¶

Development Approach¶

Testing Strategy¶

Monitoring and Analytics¶

Micro-Interactions and Animations¶

Advanced UI Elements¶

Performance Budget¶

Content Delivery Strategy¶

Further Reading & Best Practices¶