Frontend: Create and Import the Hero Section in the Home Page #6
Description
🎯 Objective
Develop a visually appealing Hero Section for the Home Page, following the Figma design. The hero section should be responsive and include a strong call to action.
🔍 Context
The Hero Section is the first thing users see when they land on the homepage. It should be engaging, well-structured, and fully responsive. This task involves creating the hero component, adding appropriate styles, and integrating it into the home page.
📋 Tasks
- Create a
HeroSectioncomponent insidecomponents/. - Structure the component with a heading, subheading, CTA button, and background image/illustration.
- Ensure responsiveness for desktop, tablet, and mobile views.
- Use semantic HTML and accessibility best practices (ARIA attributes).
- Import the
HeroSectioncomponent intoHome.tsx.
💻 Technical Implementation
1️⃣ Create HeroSection.tsx inside components/
const HeroSection = () => {
return (
<section className="">
{/*hero section content */}
</section>
);
};
export default HeroSection;
2️⃣ Import HeroSection into Home.tsx
import HeroSection from "../components/HeroSection";
const Home = () => {
return (
<>
{/* paste your page component below here */}
<HeroSection />
{/* paste your page component above here */}
</>
);
};
export default Home;
3️⃣ Style the Hero Section using Tailwind classes
📝 Acceptance Criteria
✅ The Hero Section matches the Figma design.
✅ It is fully responsive across all screen sizes.
✅ The heading, subheading, and CTA button are clearly visible and well-placed.
✅ The component is correctly imported and displayed on the home page.
✅ Accessibility is considered (ARIA attributes, keyboard focus).
💪 Skills Required
- React
- CSS (Tailwind)
- Responsive Design
- Accessibility (ARIA)
📈 Difficulty
Easy