Home
Relevant source files
The following files were used as context for generating this wiki page:
The Home page, located at the root of the application (/), serves as the primary landing page for the Heyme project. Its main purpose is to introduce users to the concept of sending video messages to their future selves, encouraging self-reflection, motivation, and personal growth. The page is designed to clearly articulate the service's value proposition and guide users toward the core functionality: recording a message.
Built with Next.js and styled with Tailwind CSS, the Home page features a clean, modern design with support for dark mode. It includes a prominent call-to-action, a demonstration video, and social proof in the form of user testimonials to build trust and encourage engagement.
Sources: README.md:5-15, pages/index.tsx:30-35
Page Structure and Layout
The Home page is composed of several key React components that form its overall structure. The main layout is defined in pages/index.tsx and includes a site-wide header, a hero section, a video demonstration, a testimonials section, and a footer.
Sources: pages/index.tsx:20-103
This diagram illustrates the high-level component structure of the Home page.
Sources: pages/index.tsx:20
Site Header
The SiteHeader component is a sticky navigation bar at the top of the page. It provides consistent navigation and branding across the site.
- Branding: Displays the application name "Heyme" and a logo. On mobile, it collapses to show just the logo and name.
- Navigation: Contains links to the project's GitHub and the author's Twitter profile. These links are configured in
config/site.ts. - Theme Toggle: Includes a button to switch between light and dark modes, leveraging
next-themes.
Sources: components/site-header.tsx:10-49, config/site.ts:18-21, components/main-nav.tsx:21-26
Main Content (Hero Section)
The main content area is designed to capture the user's attention immediately.
- Headline: A large, bold headline reads "Say hello to the future you."
- Description: A paragraph explains the application's purpose: sending a message to your future self to track goals and progress.
- Calls to Action (CTAs): Two primary buttons are presented:
- Record a message: The primary CTA, which links to the
/recordingpage to start the core user flow. - Learn how it's built: A secondary CTA that links to the project's GitHub repository.
- Record a message: The primary CTA, which links to the
- Demonstration Video: A video player is embedded to show a demonstration of the application. It uses a poster image before playback.
Sources: pages/index.tsx:37-83
Testimonials Section
To build credibility, the page includes a section titled "Kind words from some awesome people."
- This section dynamically renders a list of testimonials using the
Testimonialscomponent. - The testimonial data is currently hardcoded within the
components/testimonials.tsxfile. - Each testimonial includes the author's name, Twitter username, profile picture, the review text, and a direct link to the source tweet.
The Testimonial interface defines the data structure for each review:
interface Testimonial {
name: string
profilePicture: string
link: string
username: string
review: string
}
Sources: components/testimonials.tsx:9-15, pages/index.tsx:96-98
Footer
A simple Footer component at the bottom of the page contains an attribution message, "Built with ❤️," and a link to the creator's Twitter profile.
Sources: components/footer.tsx:6-11, pages/index.tsx:99-101
Key Features
The Home page and the overall application showcase several key technical features.
| Feature | Description | Implementation Source(s) |
|---|---|---|
| Dark Mode | The application supports both light and dark themes. The theme is managed by next-themes and can be toggled via a button in the SiteHeader. The default is system, and the <html> tag is pre-configured for dark mode. | pages/_app.tsx:28, components/site-header.tsx:44, pages/_document.tsx:5 |
| SEO | The page uses the next-seo library to configure metadata for search engines and social media platforms, including title, description, Open Graph, and Twitter card details. | pages/index.tsx:21-36 |
| Message Scheduling | Users can schedule messages for future delivery. This is a core feature of the application. | README.md:20-21 |
| Social Sharing | The application encourages social sharing on platforms like Twitter, Facebook, and LinkedIn, particularly after a message has been successfully sent. | README.md:26-27, components/success.tsx:39-51 |
Sources: README.md:19-27, pages/index.tsx:21-36, pages/_app.tsx:28, components/success.tsx:39-51
Primary User Flow
The Home page is the starting point for the application's main user journey. The flow is designed to be simple and direct, guiding the user from discovery to action.
This flowchart shows the user's path from the Home page to the completion of the core task.
Sources: pages/index.tsx:50-56, components/success.tsx
Upon successful submission, the user is redirected to a success page that confirms their message is scheduled. This page enhances the user experience with a celebratory fireworks animation (from lib/utils.ts) and provides easy options for sharing the site on social media.
Sources: components/success.tsx:12, components/success.tsx:39-51