Take assessment - frontend

[austriaj12]

Frontend Assessment Submission - CardFlo Landing Page

Hi, I have completed the frontend assessment. I built a responsive landing page called "CardFlo" (digital gift cards + cashback wallet), inspired by the structure of Moola.com.

Here is a quick summary of what I did:

What I Did:

• Design & Theme: Used a dark mode theme with neon purple accents to make the interface look clean and premium.
• Mockups & 3D Effect: Added a transparent 3D phone model on the hero section. I used GSAP to create a hover-tilt effect, so the phone tilts dynamically based on the mouse cursor position.
• Animations: Set up GSAP and ScrollTrigger for entrance transitions when scrolling down the page.
• Interactive Calculator: Built a range-slider calculator that estimates annual savings based on monthly spend.
• Responsive Layout: Ensured all sections render properly on both desktop and mobile screens.
• Typography: Used the Geist Sans font family with thin weights for a cleaner look.

Files Modified:

• src/app/page.tsx - Landing page layout, calculator logic, and GSAP animations.
• src/app/globals.css - Theme colors, scrollbars, and helper classes.
• src/app/layout.tsx - Added suppressHydrationWarning to resolve browser extension conflicts.

Please let me know if you have any questions or feedback. Thank you!