- 🍳 Astrolus Clone -> Live Demo Astrolus Clone is a free template website built with React JS and Tailwind CSS. It offers small businesses a user-friendly Template to create their own websites. With a responsive layout, it adapts seamlessly to various screen sizes.
- 📱 Responsive UI Design: The website is designed to adapt and look good on different screen sizes and devices.
- ⏳ Animated Website Loader: A visually appealing animation is displayed while the website content is loading.
- 〰 Animated Nav Bar: The navigation bar has animated elements to provide a dynamic and engaging user experience.
- 🔄 Dynamic Rendering of Data: The website fetches data from a data.js file, allowing for easy modification and updating of the displayed data.
- 🌑 Dark Theme UI: The website offers a dark color scheme option for a visually pleasing and comfortable browsing experience in low-light environments.
- Src : astro-theme by Tailus-UI)
- React Icons
- React Scroll
- Tailwind CSS (Version 3.3)
-
Clone the repository :
git clone https://github.com/[Your_Github_User_Name]/Astrolus_Clone.git
-
Navigate to the project directory :
cd Astrolus Clone
-
Install dependencies using your preferred package manager :
npm create vite@latest
or
yarn create vite
or
pnpm create vite
-
Installing Tailwind CSS :
npm install -D tailwindcss postcss autoprefixer
or
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
or
pnpm install -g create-vite
pnpm install tailwindcss postcss autoprefixer
- add this to tailwind.config.js file
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
bg: '#0F172A',
textH: '#FFFFFF',
textP: '#5B626E',
accent: '#FF7E33',
btn: '#9333EA',
Tdiv: '#293041',
PieI: '#0EA5E9',
chatT: '#A5B4FC',
chatI: '#818CF8',
chatBg: '#151B3C',
locT: '#5EEAD4',
locI: '#2DD4BF',
locBg: '#0F2131',
},
},
},
plugins: [],
};
-
Installing React Packages
npm i react-icons
npm i react-scroll
or
yarn add react-icons
yarn add react-scroll
or
pnpm install react-icons
pnpm install react-scroll
-
Start the development server :
npm run dev
or
yarn dev
or
pnpm run vite
-
Open your browser and visit
http://localhost:3000
to see the app running locally.
Feel free to explore and customize the project according to your needs. Happy coding! 😊🚀