finish basic home page

[Boxuan-Matty-Lin]

This pull request significantly updates the HomeScreen in app/(tabs)/index.tsx to improve layout, navigation, and styling. The changes introduce a custom header, a scrollable content area, and a prominent bottom call-to-action (CTA) button, while making use of safe area insets and tab bar height for better UI adaptability.

Layout and UI improvements:

• Added a custom header with the app name (Kopi Shop), styled with background color, rounded corners, and padding that adapts to safe area insets.
• Replaced the static centered content with a ScrollView for future extensible content, ensuring proper padding and scroll behavior.
• Updated the background color of the main container for a refreshed look.

Navigation enhancements:

• Introduced a bottom CTA button (Start Kopi Maker →) that navigates to the /kopi route using the useRouter hook from expo-router.

Responsiveness and safe area handling:

• Utilized useSafeAreaInsets and useBottomTabBarHeight to dynamically adjust padding, ensuring UI elements do not overlap with device notches or the tab bar.

[Copilot]

Pull request overview

This PR transforms the HomeScreen from a simple placeholder into a functional landing page with a custom header, scrollable content area, and a call-to-action button that navigates to the Kopi Maker screen. The implementation introduces safe area handling and tab bar awareness to ensure the UI adapts properly to different device configurations.

Key changes:

• Added custom "Kopi Shop" header with rounded bottom corners and safe area inset handling
• Implemented scrollable content area with proper padding calculations for tab bar clearance
• Introduced navigation button that routes to the /kopi screen using expo-router

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The Bottom CTA is not absolutely positioned but should be to achieve the intended "floating above the tab bar" effect. Currently, the View with the Pressable is a sibling to the ScrollView in the flex container, which means it will always be visible at the bottom. To properly position it as an overlay (allowing scrolling content to go underneath), add className="absolute" or style={{ position: 'absolute' }} to the View on line 40, and also specify bottom: 0, left: 0, right: 0 in the style prop. This matches the pattern used in kopi.tsx (line 102) where the "Brew Button" is absolutely positioned.

[Copilot]

The paddingBottom calculation may not account for the bottom CTA button height correctly. The button appears to be absolutely positioned, but this calculation uses 72 as a magic number which seems intended to represent the button height plus spacing. However, the actual button height is defined by py-4 (padding vertical) plus text height, which may not equal 72 pixels. Consider extracting the button height as a constant (e.g., const CTA_HEIGHT = 60;) and using it consistently in both the ScrollView's paddingBottom and for layout calculations to ensure the content doesn't get hidden behind the button.