I'll recreate this Gleans mobile app interface using Next.js with a dark theme. Let me implement this for you:
This implementation recreates the Gleans mobile app interface from your Figma design. Key features include:
- Dark theme with the exact color scheme from your design
- Header with Gleans logo and the cyan dot accent
- Social media icons (Instagram, YouTube, LinkedIn)
- Profile section with tagline and follow button
- Tab navigation between Highlights, Collections, and Most viewed Gleans
- Content sections for Mathew's highlights, collections, and most viewed items
- Profile follows section with circular avatars
- Footer with "Create your Gleans Page" button and update information
The implementation is responsive and focuses on the mobile view as shown in your design. You can extend this by adding functionality to the buttons and navigation tabs.
Would you like me to make any specific adjustments to the design or add any interactive functionality?
I'll split the code into reusable components and implement the functionality. Let's organize everything properly:
I've completely restructured the code into reusable components and implemented the functionality. Here's what I've done:
Component Structure
Header Components
header.tsx- Contains the logo and social media iconsprofile-section.tsx- User profile with follow button functionality
Navigation Components
tab-navigation.tsx- Tab switching between highlights, collections, and most viewed
Content Components
highlights-section.tsx- Displays highlight cardscollections-section.tsx- Grid layout for collectionsmost-viewed-section.tsx- List of most viewed locationsfollows-section.tsx- Horizontal scrollable list of followed users
Footer Components
footer.tsx- Contains the "Create your Gleans Page" buttons and metadata
Implemented Functionality
Tab Navigation
- Working tabs that switch between different content sections
- Active tab is highlighted with a white underline
Follow Button
- Toggle between "Follow" and "Following" states
- Color changes to indicate the active state
Create Page Button
- Shows a modal when clicked (simulating the page creation flow)
- Includes hover effects for better user feedback
Data Management
- Mock data for locations and users in their respective components
- Proper mapping of data to UI elements
Responsive Design
- Maintains the mobile-first approach from the original design
- Added overflow handling for the follows section
This structure makes the code much more maintainable and allows for easier updates in the future. Each component is focused on a specific part of the UI and has its own functionality.
Would you like me to add any additional features or make any adjustments to the current implementation?