Welcome to the DeReview Landing Page project—a modern, responsive, and pixel-perfect landing page built with React, Vite, TypeScript, and Tailwind CSS.
- Overview
- Features
- Project Structure
- Getting Started
- Technologies Used
- Color Scheme
- Scripts
- Contributing
- License
DeReview is a revolutionary protocol aiming to bring transparency, authenticity, and integrity back to online reviews using blockchain technology. This landing page serves as the front door to the DeReview platform, providing visitors with essential information, calls to action, and a seamless user experience.
- Responsive Design: Optimized for all devices, including desktops, tablets, and mobile phones.
- Modern UI: Clean and professional design with a cohesive color scheme.
- Navigation: Smooth scrolling to sections and a responsive hamburger menu for mobile devices.
- Static Pages: Includes comprehensive Privacy Policy and Terms of Service pages.
- Future-Proof: Reflects future plans for launching the DeReview chain and DVW token.
- Accessibility: Built with accessibility best practices in mind.
de-review-landing-page/
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── postcss.config.js
├── public/
│ └── favicon.ico
├── src/
├── main.tsx
├── App.tsx
├── index.css
├── assets/
│ └── logo.png
├── components/
│ ├── Header.tsx
│ ├── Footer.tsx
│ ├── Home.tsx
│ ├── TermsOfService.tsx
│ ├── PrivacyPolicy.tsx
│ ├── HeroSection.tsx
│ ├── AboutSection.tsx
│ ├── WhySection.tsx
│ ├── HowItWorksSection.tsx
│ ├── JoinSection.tsx
│ ├── BuyTokenSection.tsx
│ ├── GetStartedSection.tsx
│ └── StayConnectedSection.tsx
- Node.js (v14 or later)
- npm (v6 or later) or yarn
-
Clone the repository:
git clone https://github.com/your-username/de-review-landing-page.git
-
Navigate to the project directory:
cd de-review-landing-page
-
Install dependencies:
npm install
or, if you're using yarn:
yarn install
Start the development server with the following command:
npm run dev
or, with yarn:
yarn dev
The application will be available at http://localhost:3000
(or the next available port).
To build the project for production, run:
npm run build
or, with yarn:
yarn build
This will create an optimized build in the dist
folder.
- React with TypeScript: For building the user interface.
- Vite: As the build tool for fast development and optimized production builds.
- Tailwind CSS: For utility-first CSS styling.
- React Router: For client-side routing between pages.
- React Scroll: For smooth scrolling to sections.
- Heroicons: For icons used in the navigation menu.
The application uses a professional and cohesive color scheme:
- Primary Color:
#4F46E5
(Indigo 600) - Secondary Color:
#10B981
(Emerald 500) - Accent Color:
#F59E0B
(Amber 500) - Background Color:
#F9FAFB
(Gray 50) - Text Color:
#111827
(Gray 900)
These colors are defined in the tailwind.config.js
file and used consistently throughout the application.
The following scripts are available in the package.json
file:
npm run dev
: Starts the development server.npm run build
: Builds the application for production.npm run preview
: Previews the production build locally.npm run lint
: Lints the code for errors and warnings (if ESLint is configured).
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
-
Fork the repository.
-
Create a new branch:
git checkout -b feature/your-feature-name
-
Commit your changes:
git commit -m 'Add some feature'
-
Push to the branch:
git push origin feature/your-feature-name
-
Open a Pull Request.
This project is licensed under the MIT License. See the LICENSE file for details.
- DeReview Chain: Plans are underway to launch the DeReview chain (
dviewd
) in the Cosmos ecosystem using Ignite CLI. - DVW Token: Before launching the DeReview chain, a DVW token will be deployed on the Osmosis network. After the chain launch, tokens can be transferred via IBC to the DeReview chain.
- Buy DVW Token: A "Buy DVW Token" button is prominently featured on the landing page for users to participate early.
- ARIA Labels: Interactive elements include ARIA labels where necessary to improve accessibility.
- Keyboard Navigation: The site supports keyboard navigation for users who rely on it.
- Meta Tags: Important meta tags are included for better search engine ranking.
- Performance: Images and assets are optimized to reduce load times.
- Email: [email protected]
- Twitter: @DeReviewOrg
- GitHub: github.com/dereview
Thank you for your interest in DeReview! If you have any questions or need further assistance, please don't hesitate to reach out.