Footer Component
Relevant source files
The following files were used as context for generating this wiki page:The Footer is a stateless, presentational React component that renders the footer section for the OptiFlow application. It provides essential navigation links, company branding, legal information, and social media links. The component is designed to be a consistent closing element across all pages of the application, as demonstrated by its inclusion at the bottom of the main App component's layout.
Sources: src/components/Footer.jsx, src/App.jsx:25
Component Integration
The Footer component is rendered as the final element within the main div of the App component, following the <main> content block. This ensures it appears at the bottom of every page.
Sources: src/App.jsx:13-26
The following diagram illustrates the Footer's position within the main application structure.
Sources: src/App.jsx:13-26
Structure and Layout
The Footer component is built using a combination of div elements styled with Tailwind CSS. It is composed of three main parts: a top section with branding and link columns, and a bottom section with copyright information and social media links.
Sources: src/components/Footer.jsx:5-82
Internal DOM Structure
The diagram below shows the hierarchical structure of the elements within the Footer component.
Sources: src/components/Footer.jsx:5-82
Responsiveness
The component uses a responsive grid system for its main content. On small screens, it displays two columns, and on medium screens and larger (md:), it expands to six columns to accommodate all link sections. The bottom bar also adapts, stacking its elements vertically on small screens and placing them in a row on medium screens and up.
- Link Grid:
grid-cols-2 md:grid-cols-6 - Bottom Bar:
flex-col md:flex-row
Sources: src/components/Footer.jsx:7, src/components/Footer.jsx:76
Styling and Theming
The Footer component is styled using Tailwind CSS utility classes. The color palette is derived from CSS variables defined in src/index.css.
| Property | Tailwind Class | CSS Variable | Value | Source File |
|---|---|---|---|---|
| Background Color | bg-[#050505] | --bg-primary | #050505 | src/index.css:9 |
| Top Border Color | border-white/10 | --border-subtle (effective) | rgba(255, 255, 255, 0.1) | src/index.css:15 |
| Bottom Border Color | border-white/5 | N/A (inline) | rgba(255, 255, 255, 0.05) | src/components/Footer.jsx:76 |
| Primary Text Color | text-white/60 | --text-secondary (similar) | rgba(255, 255, 255, 0.6) | src/index.css:12 |
| Secondary Text Color | text-white/40 | --text-tertiary (similar) | rgba(255, 255, 255, 0.4) | src/index.css:13 |
The primary background color bg-[#050505] directly uses the value defined for --bg-primary in the global stylesheet.
Sources: src/components/Footer.jsx:5, src/index.css:9, tailwind.config.js
Content Sections
The footer is organized into several distinct content areas.
Branding
The top-left section contains the application's logo and a brief description.
- Logo: A
divstyled to look like an "O" with the text "OptiFlow". - Description: "The operating system for global trade. Predictive AI for the modern supply chain."
Sources: src/components/Footer.jsx:9-15
Navigation Links
The footer displays four columns of navigation links, each with a distinct category. All links are placeholders (href="#") and have a hover effect that changes their color to white.
| Category | Links |
|---|---|
| Product | Features, Integrations, Pricing, Changelog |
| Company | About, Careers, Blog, Contact |
| Resources | Documentation, API Reference, Community, Status |
| Legal | Privacy, Terms, Security |
Sources: src/components/Footer.jsx:22-74
Copyright and Social Media
The bottom section, separated by a top border, contains the copyright notice and links to social media profiles.
- Copyright: "© 2025 OptiFlow AI Inc. All rights reserved."
- Social Media: Links to Twitter, LinkedIn, and GitHub.
Sources: src/components/Footer.jsx:76-81