Castro19 / Castro19/LAEP-GPT

[Improve-Splash-Page]: New Layout for Splash Page

Open
#258 0 comments 0 reactions 1 assignee Claimed by @alexhtruong View on GitHub
enhancement
Dominant language
TypeScript
Stars
7
Forks
2
PR merge metrics
No merged PRs in 30d

Description

## **💡 User Story**

_As a new or returning user, I want a a better structured splash page so that I can quickly understand the value of the app and be encouraged to explore further._

---

## **📖 Description**

This task involves implementing a **new layout for the splash page** based on the provided [[Figma design](https://www.figma.com/design/nRbYalbOpPzZM4ZMYBz41R/PolyLink?node-id=308-422&p=f)](https://www.figma.com/design/nRbYalbOpPzZM4ZMYBz41R/PolyLink?node-id=308-422&p=f). The updated splash page should work on all screen sizes.

Key updates include:
- Prominent CTA (Call-To-Action) buttons
- Branded color scheme and illustration
- Mobile responsiveness

---

## **✅ Acceptance Criteria**

- [ ] ✅ Splash page layout matches the structure and visuals from the Figma design
- [ ] ✅ All CTAs are functional and linked to appropriate routes or modals
- [ ] ✅ Page is fully responsive across desktop, tablet, and mobile screen sizes
- [ ] ✅ Placeholder images or assets are replaced with production-ready visuals
- [ ] ✅ Edge Case: On unsupported screen sizes or browsers, content degrades gracefully without breaking layout

---

## **📌 Technical Details**

- Use **Tailwind CSS** for styling and **React components** to implement each layout section
- Ensure accessibility with semantic HTML and keyboard navigation support [This is already done using components from [ShadCN](https://ui.shadcn.com/) or [Aceternity](https://ui.aceternity.com/)
- Optimize for performance (lazy load images, use SVGs where possible) [Optional]
- Consider adding **Framer Motion** for animation effects if time allows

---

## **🖼️ UI/UX Mockups (If applicable)**

- [[Figma Design – Splash Page Layout](https://www.figma.com/design/nRbYalbOpPzZM4ZMYBz41R/PolyLink?node-id=308-422&p=f)](https://www.figma.com/design/nRbYalbOpPzZM4ZMYBz41R/PolyLink?node-id=308-422&p=f)

---

## **📎 Related Issues or Dependencies**
---

## **🚀 Priority & Story Points**

- **Priority:** Medium
- **Story Points:** 3

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.