A modern, responsive corporate website for NBA TECH with light and dark mode support.
- Responsive Design: Fully responsive layout that works on all devices
- Light/Dark Mode: Toggle between light and dark themes with a smooth transition
- Modern UI: Clean, professional design with subtle animations
- Interactive Components: Engaging UI elements with hover effects and animations
- Service Showcase: Detailed presentation of company services
- Case Studies: Portfolio of past projects with detailed case studies
- Performance Dashboard: Visual representation of company metrics
- Contact Form: Easy-to-use contact form for inquiries
- Next.js: React framework for server-rendered applications
- TypeScript: Type-safe JavaScript
- Tailwind CSS: Utility-first CSS framework
- Shadcn/UI: High-quality UI components built with Radix UI and Tailwind
- Framer Motion: Animation library for React
- Lucide Icons: Beautiful, consistent icon set
- Node.js 18.x or higher
- npm or pnpm
-
Clone the repository:
git clone https://github.com/yourusername/nba-tech-redesign.git cd nba-tech-redesign -
Install dependencies:
npm install --legacy-peer-deps # or pnpm install --no-strict-peer-dependencies -
Run the development server:
npm run dev # or pnpm dev -
Open http://localhost:3000 in your browser to see the result.
nba-tech-redesign/
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Home page component
├── components/ # React components
│ ├── ui/ # UI components from shadcn/ui
│ ├── hero-section.tsx # Hero section component
│ ├── navbar.tsx # Navigation bar component
│ ├── services-section.tsx # Services section component
│ └── ... # Other components
├── lib/ # Utility functions
├── public/ # Static assets
└── ... # Configuration files
The theme colors can be customized in app/globals.css. The website uses CSS variables for theming, making it easy to change colors for both light and dark modes.
UI components are built using shadcn/ui, which provides a collection of reusable components that you can copy and paste into your project. These components are built on top of Radix UI and styled with Tailwind CSS.
See the Deployment Guide for detailed instructions on deploying the website to various environments.
The easiest way to deploy the website is using Vercel:
npm install -g vercel
vercelYou can also deploy using Docker:
docker-compose up -dThis project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui for the UI components
- Tailwind CSS for the utility-first CSS framework
- Framer Motion for the animations
- Lucide Icons for the icons
- 21st.dev for theme toggle inspiration