Work smarter with a curated suite of powerful AI-powered digital products — all in one place.
DigiTools is a modern SaaS landing page and storefront for premium digital products. It lets users browse a curated collection of tools — from AI writing assistants to design suites — add them to a cart, and choose a pricing plan that fits their workflow. Built with a clean, responsive UI and smooth UX interactions.
Browse premium digital tools and add them to your cart with a single click. Button states update instantly — switching from Buy Now to Added to Cart — and checking out resets everything cleanly so you can start fresh.
Three clearly structured pricing tiers — Starter, Pro, and Enterprise — displayed side by side so users can compare and choose at a glance. The most popular plan is visually highlighted to guide decision-making.
Product and pricing data are fetched asynchronously using React's use() hook with <Suspense> boundaries, delivering a smooth loading experience without blocking the UI.
| Technology | Purpose |
|---|---|
| React 19 | UI framework with use() hook & Suspense |
| Vite | Lightning-fast dev server & bundler |
| Tailwind CSS v4 | Utility-first styling |
| DaisyUI | Component library (badges, buttons, cards) |
| React Icons | Icon set (Fi, Ti, Io, Fa, Tb) |
src/
├── assets/ # Images & icons
├── components/
│ ├── Banner/ # Hero section
│ ├── Footer/ # Footer + copyright + links
│ ├── GetStarted/ # 3-step onboarding section
│ ├── Join/ # CTA section
│ ├── Navbar/ # Top navigation
│ ├── Pricing/ # Pricing cards
│ ├── Products/ # Product cards + cart
│ │ ├── ProductCard.jsx
│ │ ├── Cart.jsx
│ │ └── CartCard.jsx
│ └── Stats/ # Stats banner
├── ui/
│ └── Card.jsx # Shared card layout wrapper
└── App.jsx
# Clone the repository
git clone https://github.com/your-username/digitools.git
# Navigate into the project
cd digitools
# Install dependencies
npm install
# Start the development server
npm run devThen open http://localhost:5173 in your browser.
Made with ❤️ | © 2026 DigiTools. All rights reserved.