ECOSENSE is an innovative IoT device designed to monitor indoor CO₂ levels in real-time, providing intelligent alerts and actionable recommendations to improve air quality and protect your health.
- Real-Time CO₂ Monitoring: Continuous tracking with laboratory-grade precision
- AI-Powered Insights: Edge AI processing and machine learning analytics
- Smart Alerts: Instant notifications when air quality thresholds are exceeded
- IoT Connected: Seamlessly integrates with your smart home ecosystem
- Long Battery Life: Up to 12 months of continuous operation
- Cloud Analytics: Historical data tracking and trend analysis
- Mobile App: Remote monitoring and control from anywhere
This website is built with modern web technologies:
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- Icons: Lucide React
- Deployment: Vercel
- Node.js 18.x or higher
- npm, yarn, or pnpm package manager
- Clone or download this repository:
git clone <repository-url>
cd ecosense-website- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open your browser and navigate to:
http://localhost:3000
The website should now be running locally on your machine.
ecosense-website/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ ├── order/
│ │ └── page.tsx # Order page
│ └── globals.css # Global styles and design tokens
├── components/
│ ├── navbar.tsx # Navigation bar with smooth scrolling
│ ├── hero.tsx # Hero section with CTA
│ ├── about.tsx # About section with features
│ ├── reviews.tsx # User reviews/testimonials
│ ├── contact.tsx # Contact form and info
│ ├── footer.tsx # Footer with links
│ └── ui/ # shadcn/ui components
├── public/ # Static assets
└── README.md # This file
- Smooth scrolling to all page sections
- Responsive mobile menu
- Fixed navbar with scroll effects
- Cross-page navigation support
- Hero: Eye-catching introduction with key statistics and CTA buttons
- About: Detailed information about ECOSENSE, key features, and how it works (5-step process)
- Reviews: Customer testimonials and ratings
- Contact: Contact form with company information
- Order Page: Complete order form with payment options and order summary
The website is fully responsive and optimized for:
- Mobile devices (320px and up)
- Tablets (768px and up)
- Desktops (1024px and up)
- Large screens (1280px and up)
Edit the design tokens in app/globals.css to customize the color scheme:
@theme inline {
--color-primary: ...;
--color-accent: ...;
/* etc. */
}Update the content in component files:
components/hero.tsx- Hero section text and statscomponents/about.tsx- Features and how it workscomponents/reviews.tsx- Customer testimonialscomponents/contact.tsx- Contact information
Fonts are configured in app/layout.tsx and app/globals.css. To change fonts, update the font imports and theme variables.
To create an optimized production build:
npm run build
# or
yarn build
# or
pnpm buildTo run the production build locally:
npm run start
# or
yarn start
# or
pnpm startThis project is optimized for deployment on Vercel:
- Push your code to a Git repository (GitHub, GitLab, Bitbucket)
- Import the project in Vercel
- Configure your domain (optional)
- Deploy!
Alternatively, you can deploy to any platform that supports Next.js.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is created for ECOSENSE startup. All rights reserved.
For questions or support, contact:
- Email: support@ecosense.io
- Phone: +1 (555) 123-4567
Built with ❤️ for a healthier environment