A modern, responsive e-bike brand website built with Next.js 14, TypeScript, and Tailwind CSS. Featuring a vibrant orange color scheme and comprehensive functionality for showcasing electric bikes for urban transportation.
- Big Banner Slider: Auto-rotating hero banners with navigation controls
- Product Introduction: Feature-rich showcase of e-bike benefits
- News System: Dynamic news listing and detail pages
- Responsive Design: Optimized for all screen sizes
- Modern UI: Clean, contemporary design using shadcn/ui components
- Home (
/): Hero banner, product features, latest news - News (
/news): News listing with category filters - News Detail (
/news/[id]): Individual news articles - About (
/about): Company story and values - Join Us (
/joinus): Contact form and community information
- TypeScript: Full type safety
- Next.js 14: Latest features with App Router
- Tailwind CSS: Utility-first styling
- shadcn/ui: Modern component library
- Responsive Design: Mobile-first approach
- SEO Optimized: Meta tags and semantic HTML
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Build Tool: Next.js with Turbopack
- Primary: Orange (
#f97316) - Secondary: Neutral grays
- Accent: Complementary colors
- Dark Mode: Full dark theme support
- Cards with hover effects
- Responsive navigation
- Interactive buttons
- Form inputs
- Banners and carousels
-
Clone the repository
git clone <repository-url> cd ebike-official
-
Install dependencies
npm install
-
Run development server
npm run dev
-
Open browser Navigate to http://localhost:3000
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
src/
├── app/ # Next.js App Router
│ ├── about/ # About page
│ ├── globals.css # Global styles
│ ├── joinus/ # Join Us page
│ ├── layout.tsx # Root layout
│ ├── news/ # News pages
│ │ ├── [id]/ # Dynamic news detail
│ │ └── page.tsx # News listing
│ └── page.tsx # Home page
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── Footer.tsx # Global footer
│ ├── Header.tsx # Global header
│ ├── HeroBanner.tsx # Home page banner
│ ├── NewsList.tsx # News listing component
│ └── ProductIntro.tsx # Product features
└── lib/ # Utilities
└── utils.ts # Helper functions
- Auto-rotating carousel
- Manual navigation controls
- Clickable banners linking to news
- Responsive design
- Smooth transitions
- Grid layout for news items
- Category tags and dates
- Hover effects and interactions
- Links to detail pages
- Responsive navigation menu
- Mobile hamburger menu
- Social media links
- Contact information
Modify src/app/globals.css to update the color scheme:
:root {
--primary: 25 95% 53%; /* Orange */
/* Other color variables */
}- Create folder in
src/app/ - Add
page.tsxfile - Update navigation in
Header.tsx
- Use TypeScript for type safety
- Follow shadcn/ui patterns
- Implement responsive design
- Add hover states and transitions
- Optimized Build: Automatic code splitting
- Image Optimization: Next.js Image component
- Static Generation: Where possible
- Lazy Loading: Components as needed
- Tree Shaking: Unused code removal
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Large Desktop: > 1280px
- Push to GitHub
- Connect Vercel account
- Deploy automatically
- Netlify: Build command
npm run build - AWS Amplify: React app deployment
- Docker: Use provided Dockerfile
- Fork the repository
- Create feature branch
- Make changes with tests
- Submit pull request
This project is licensed under the MIT License.
For support, please contact:
- Email: info@cityebike.com
- Phone: +1 (555) 123-4567
- Address: 123 Urban Street, City, State 12345
Built with ❤️ for modern urban transportation