Home
Relevant source files
The following files were used as context for generating this wiki page:The Home page is the main public-facing landing page for the Greenline application. It is designed to introduce the "Advanced Market Intelligence Platform" to potential users, showcasing key features through a live market data ticker and compelling calls-to-action. The page is built as a server-rendered component in a Next.js application and serves as the primary entry point to drive users toward the main application Portal.
The page is composed of a dedicated home navigation bar and a large, multi-part hero section that includes marketing content, a live data display, and a footer. It is styled using Tailwind CSS with a dark theme.
Sources: client/src/app/page.tsx, client/src/components/Hero/index.tsx:150-157
Architecture
The Home page follows a simple component-based architecture. The main page route (/) is handled by client/src/app/page.tsx, which composes the page by rendering two main child components: NavbarHome and HeroSection. These components are wrapped by the RootLayout, which provides the global HTML structure, fonts, and theme provider.
Sources: client/src/app/page.tsx:18-21, client/src/app/layout.tsx:32-40
Component Hierarchy
The diagram below illustrates the hierarchical structure of the components that form the Home page.
Key Components
| Component | File | Description |
|---|---|---|
Home | app/page.tsx | The main page component for the / route. Renders the layout. |
NavbarHome | components/NavbarHome/index.tsx | A simplified navigation bar for unauthenticated users with "Log In" and "Sign Up" actions. |
HeroSection | components/Hero/index.tsx | The main content block, containing marketing text, CTAs, and the MarketTicker. |
MarketTicker | components/Hero/index.tsx | A sub-component that displays a scrolling banner of live market data. |
Sources: client/src/app/page.tsx:4,18, client/src/components/NavbarHome/index.tsx:14, client/src/components/Hero/index.tsx:13,101
Navigation Bar (NavbarHome)
The NavbarHome component provides top-level navigation for the landing page. It is distinct from the main application navbar found on authenticated pages like the /portal. It features the Greenline logo, which links back to the home page, and buttons for "Log In" and "Sign Up".
- Logo: An
Imagecomponent that links to/. - Actions: "Log In" and "Sign Up" buttons to guide user flow.
Sources: client/src/components/NavbarHome/index.tsx:14-38
Hero Section
The HeroSection is the primary content area of the Home page. It is responsible for communicating the value of the platform and displaying live market data to engage users.
Sources: client/src/components/Hero/index.tsx:101-294
Live Market Ticker
A key feature of the hero section is the MarketTicker component, which displays a live-updating banner of market data.
Data Fetching
On component mount, MarketTicker fetches the previous day's closing price for a hardcoded list of tickers: SPY, QQQ, BTC, ETH, AAPL, MSFT, NFLX. It uses the Polygon.io API for this purpose.
- API Endpoint:
https://api.polygon.io/v2/aggs/ticker/{ticker}/prev?adjusted=true&apiKey={apiKey} - API Key: The key is sourced from the environment variable
NEXT_PUBLIC_POLYGON_API_KEY.
The component makes parallel requests for all tickers using Promise.all. The fetched data is stored in the component's state using the MarketData interface.
// client/src/components/Hero/index.tsx:8-12
interface MarketData {
ticker: string;
price: number;
change: number;
}
Sources: client/src/components/Hero/index.tsx:8-45
Data Flow
The following sequence diagram shows the process of fetching and displaying market data in the MarketTicker component.
Content and Call-to-Action (CTA)
The hero section contains prominent headings and text to describe the product. The main call-to-action is an "Access Portal" button that navigates the user to the /portal page, which is the main entry point for authenticated users.
- Primary CTA: A
<Link>component wrapping a<Button>that directs users to/portal. - Iconography: The
lucide-reactlibrary is used for icons likeArrowRightto enhance UI elements.
Sources: client/src/components/Hero/index.tsx:150-197, client/package.json:16
Footer
The HeroSection also includes a comprehensive footer with multiple sections for navigation and information.
- Sections: About, Quick Links, Resources, Contact.
- Legal: Links for Privacy Policy and Terms of Service.
- Copyright: Dynamically displays the current year.