CTA Component
Relevant source files
The following files were used as context for generating this wiki page:
The Call to Action (CTA) component is a final, persuasive section designed to encourage users to take a specific action, such as starting a free trial. It is a self-contained, reusable component that appears at the end of the main content flow of the application's landing page. Its purpose is to provide a clear and compelling final prompt for user conversion.
Sources: src/components/CTA.jsx, src/App.jsx:11,25
Component Architecture
The CTA component is a functional React component built with a straightforward, nested structure. It uses framer-motion for animations and lucide-react for iconography.
Sources: src/components/CTA.jsx:2-4
DOM Structure
The component is composed of a main <section> element containing a decorative background div and a content container div. The content itself consists of a heading, a paragraph, and a button.
The following diagram illustrates the high-level DOM structure of the rendered component.
Sources: src/components/CTA.jsx:6-34
Content
The component displays static, hard-coded text content aimed at driving user engagement.
| Element | Content | Source |
|---|---|---|
<h2> | "Ready to optimize?" | [src/components/CTA.jsx:16-18](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L16-L18) |
<p> | "Join 500+ forward-thinking companies using OptiFlow to revolutionize their supply chain." | [src/components/CTA.jsx:23-25](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L23-L25) |
<button> | "Start your free trial" | [src/components/CTA.jsx:32-33](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L32-L33) |
Styling and Appearance
The component's styling is primarily handled by Tailwind CSS utility classes defined directly in the JSX. It also inherits global styles and fonts from src/index.css.
Sources: src/components/CTA.jsx, src/index.css
Key Styles
| Class/Property | Effect | Source |
|---|---|---|
bg-[#050505] | Sets the section's dark background color, consistent with the global --bg-primary variable. | [src/components/CTA.jsx:6](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L6), [src/index.css:8](https://github.com/hamzaelsherif03/X/blob/HEAD/src/index.css#L8) |
py-20 md:py-32 | Applies vertical padding to the section. | [src/components/CTA.jsx:6](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L6) |
bg-blue-600/20 blur-[150px] | Creates a large, blurred, semi-transparent blue circle for a background glow effect. | [src/components/CTA.jsx:9](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L9) |
text-center | Centers all text content within the component. | [src/components/CTA.jsx:12](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L12) |
bg-white text-black | Styles the primary button with a white background and black text. | [src/components/CTA.jsx:31](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L31) |
group-hover:translate-x-1 | Moves the ArrowRight icon slightly to the right when the parent button is hovered. | [src/components/CTA.jsx:33](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L33) |
Legacy Stylesheet
The file src/components/CTA.css exists but its defined classes (e.g., .cta-section, .cta-title) are not referenced in the CTA.jsx component. This indicates the component has likely been refactored to use Tailwind CSS exclusively, and this CSS file may be deprecated.
Sources: src/components/CTA.css, src/components/CTA.jsx
Animation
The component utilizes the framer-motion library to apply scroll-triggered "fade in up" animations to its text and button elements. This creates a staggered, visually appealing entrance as the user scrolls the component into view.
Sources: src/components/CTA.jsx:2,13,19,27, package.json:14
Animation Flow
The animations are triggered by the whileInView prop. Each animated element starts with an opacity of 0 and a positive y offset, and animates to full opacity at its natural position. A delay in the transition prop creates a sequential effect.
This sequence diagram shows how the animations are triggered upon the component entering the viewport.
Sources: src/components/CTA.jsx:13-30
Animation Properties
| Element | initial Properties | whileInView Properties | transition Properties |
|---|---|---|---|
motion.h2 | { opacity: 0, y: 20 } | { opacity: 1, y: 0 } | (default) |
motion.p | { opacity: 0, y: 20 } | { opacity: 1, y: 0 } | { delay: 0.1 } |
motion.div (button) | { opacity: 0, y: 20 } | { opacity: 1, y: 0 } | { delay: 0.2 } |
The viewport={{ once: true }} prop is used on all animated elements to ensure the animation runs only the first time the component becomes visible.
Sources: src/components/CTA.jsx:13-30
Dependencies
The CTA component relies on several external libraries to function.
| Dependency | Usage | Source |
|---|---|---|
react | Core framework for component creation. | [package.json:16](https://github.com/hamzaelsherif03/X/blob/HEAD/package.json#L16) |
framer-motion | Powers all animations within the component. | [package.json:14](https://github.com/hamzaelsherif03/X/blob/HEAD/package.json#L14), [src/components/CTA.jsx:2](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L2) |
lucide-react | Provides the ArrowRight SVG icon used inside the button. | [package.json:15](https://github.com/hamzaelsherif03/X/blob/HEAD/package.json#L15), [src/components/CTA.jsx:3](https://github.com/hamzaelsherif03/X/blob/HEAD/src/components/CTA.jsx#L3) |
Integration
The CTA component is integrated into the main application layout in App.jsx. It is rendered as one of the last elements within the <main> tag, following the Pricing component, to serve as a concluding call to action for the user.
Sources: src/App.jsx:11,25
// src/App.jsx:11-27
function App() {
return (
<div className="min-h-screen bg-[#050505] text-white selection:bg-blue-500/30">
<Navbar />
<main>
<Hero />
<Trust />
<Solutions />
<Features />
<Integrations />
<Testimonials />
<CostCalculator />
<Pricing />
<CTA />
</main>
<Footer />
</div>
);
}