About the Project: Readify Hub is a book landing page built with Next.js and React. It presents reading plans, chapter previews, pricing options, and author details in a clean, structured layout. Designed to showcase frontend skills with a focus on component architecture and responsive design.
Key Highlights: Interactive chapter preview tabs, a three-tier pricing section, smooth sticky header on scroll, and a fully responsive layout across all screen sizes.
- Header — Sticky navigation bar with mobile menu toggle.
- Hero — Full-width banner with headline and book cover image.
- Benefits — Six benefit cards highlighting key reading advantages.
- Chapters — Nine chapter cards outlining the book's core topics.
- Preview — Interactive tab system showing five sample chapter images.
- Pricing — Three-tier pricing cards for digital, print, and bundle editions.
- Author — Author biography with image and background description.
- Achievements — Gallery section displaying platform milestones and recognition.
- Contact — Contact form with address, phone, email, and social links.
- Footer — Navigation links and copyright information.
- Sticky Header — Header activates sticky behavior after scrolling 100px.
- Mobile Navigation — Hamburger menu with smooth open and close animation.
- Interactive Preview Tabs — Click to switch between five chapter preview images.
- Responsive Grid Layout — Adapts from one to four columns across all screen sizes.
- Hover Card Effects — Benefit and chapter cards lift smoothly on hover.
- Three Pricing Tiers — Digital, printed, and bundle options clearly presented.
- Contact Form — Simple form with name, email, subject, and message fields.
- Optimized Images — Next.js Image component used throughout for performance.
- Next.js 14 — React framework with App Router and file-based routing.
- React — Component-based UI with useState and useEffect hooks.
- CSS (Custom) — Global styles using CSS variables, no utility framework.
- Lucide React — Lightweight icon library for UI and social icons.
- Google Fonts — Poppins and Philosopher loaded via next/font.
- Vercel — Deployed and hosted on Vercel for fast global delivery.
readify-hub/
│
├── public/ # Images, logos, chapter previews, achievements, and more
│
├── src/
│ ├── app/
│ │ ├── layout.jsx # Root layout with fonts and metadata
│ │ ├── page.jsx # Main page importing all sections
│ │ └── index.css # Global styles and CSS variables
│ │
│ └── components/
│ ├── Header.jsx # Sticky navigation and mobile menu
│ ├── Hero.jsx # Hero banner section
│ ├── Benefits.jsx # Six benefit cards grid
│ ├── Chapters.jsx # Chapter cards showcase
│ ├── Preview.jsx # Interactive tab preview system
│ ├── Pricing.jsx # Three-tier pricing cards
│ ├── Author.jsx # Author biography section
│ ├── Achievements.jsx # Achievement gallery
│ ├── Contact.jsx # Contact form and social links
│ └── Footer.jsx # Footer navigation and copyright
│
├── package.json # Dependencies and scripts
├── next.config.mjs # Next.js configuration
├── jsconfig.json # Path aliases configuration
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/nawazdevx/readify-hub.git
<li>
<strong>Navigate to project folder:</strong>
<pre><code>cd readify-hub</code></pre>
</li>
<li>
<strong>Install dependencies:</strong>
<pre><code>npm install</code></pre>
</li>
<li>
<strong>Start development server:</strong>
<pre><code>npm run dev</code></pre>
Then visit the local URL shown in terminal (usually <code>http://localhost:3000</code>)
</li>
<li>
<strong>Build for production:</strong>
<pre><code>npm run build</code></pre>
Production files will be generated in <code>.next/</code> folder
</li>
</ol>
License: This project is licensed under the MIT License.
Contact: Connect with me on LinkedIn or visit my Portfolio.
Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.
