Implement Fully Responsive Second Section on Landing Page

[chiscookeke11]

Summary of Changes

This PR introduces a new SecondSection component to the project. The component is designed to display a visually engaging section with text, images, and animations. Key features include:

• A responsive layout that adapts to both mobile and desktop views.
• Animated SVG elements that trigger on scroll using the Intersection Observer API.
• Custom fonts (Schabo and Commedik) integrated into the project.
• dynamic styling for enhanced visual appeal.

Type of Change

• New feature (non-breaking change that adds functionality)

Dependencies

• Custom Fonts: Schabo and Commedik fonts have been added to the project and are used in the component.

Checklist

• My code follows the code style of this project.
• I have tested the component to ensure it works as expected across different screen sizes.

Related Issue

• Closes Implement Fully Responsive Second Section on Landing Page #93

Screenshots (if applicable)

https://www.loom.com/share/60103e99480e412bab97daea3907d1b2?sid=bbfca7fc-bb0a-4555-bd6d-6b2849da37c5

---

Code Overview

The SecondSection component is built with the following structure:

1. Text and Image Layout:

   • A responsive flex layout with text on the left and an image on the right.
   • The text includes headings and a paragraph with custom styling.

2. Animated SVG:

   • An SVG element animates its height when it becomes visible in the viewport using the Intersection Observer API.

3. Gradient Text Effects:

   • Gradient text is applied to specific headings for a dynamic visual effect.

4. Custom Fonts:

   • The Schabo and Commedik fonts are used for headings and other text elements.

5. Responsive Design:

   • The component is fully responsive, with adjustments for mobile and desktop views.

---

Testing

• Tested on multiple screen sizes (mobile, tablet, desktop) to ensure responsiveness.
• Verified that the SVG animation triggers correctly when the element enters the viewport.
• Confirmed that the custom fonts are applied as expected.

---

Notes

• The sectionImage path (/images/SecondSectionImage.svg) assumes the image is placed in the public/images directory. Ensure the image exists in the correct location.
• The custom fonts (Schabo and Commedik) should be loaded in the global CSS or layout file to ensure they are available throughout the application.

---

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
starkwager-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 24, 2025 0:08am

[Ayoazeez26]

Looks good. lgtm