Upcover Astro Js - Responsive Landing Template
Introduction
Upcover Astro Js is a fully responsive, clean and modern high-converting landing page template. It is a beautifully handcrafted, pixel perfect landing page template based on the Astro js v5.2.5 and Tailwind css v4.0.7.. Upcover comes with 7 home demos files and 3 auth pages. All files are organized we believe it will be easy to use and edit them. This template is well organized and very easy to customize. Quick and easy to setup.
We have added dark version and RTL vesion.
Please feel free to get back to me in case if you are having any question or feedback.
Setup Astro
Introduction
We are using npm which allows having complete automation for build flow. Please follow below steps to install and setup all prerequisites:
Prerequisites
Please follow below steps to install and setup all prerequisites:
-
Nodejs
Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18.
-
Git
Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.
Installation
To setup the admin theme, follow below-mentioned steps:
-
Install Prerequisites
Make sure to have all above prerequisites installed & running on your computer
After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:
| Command | Description |
|---|---|
npm install
|
This would install all the required dependencies in the node_modules folder.
|
npm run dev
|
Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:3000. |
npm run build
|
Generates a /build or dist directory with all the production files.
|
Folder & File Structure
Upcover_AstroJs_v1.0.0 │ ├── Documentation └── Upcover_AstroJs │ ├── public | └── js | └── favicon.ico │ ├── src │ └── assets | └── css | └── all css files │ | └── fonts │ | └── images | └── all images │ │ └── components | └── About.astro │ └── Blog.astro │ └── Contact.astro │ └── Footer.astro │ └── Loader.astro │ └── Portfolio.astro │ └── Pricing.astro │ └── Services.astro │ └── Team.astro │ └── all components files here, │ │ └── layouts | └── Layout.astro │ │ └── pages | └── index.astro | └── index-two.astro | └── index-three.astro | └── index-four.astro | └── index-five.astro | └── all pages are here │ │ └── data.js │ └── astro.config.mjs └── globle.d.ts └── package.json └── tsconfig.json └── vite.config.js └── package.json
How can you change the font-family?
Please follow the step by step process
First of all open tailwind.css (path: Upcover_AstroJs/src/assets/css/tailwind.css)
and add your font family @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
Import the @import link from your Google Fonts.
And then please open the tailwind.css and please create your google fonts name in the module.exports > theme > fontFamily
For example: --font-nunito: "Nunito", "serif";
add your Google fonts like the above example.
Please refer this below link for font-family: https://tailwindcss.com/docs/font-family#customizing-your-theme
And then you can use it directly as a class like font-nunito
Plugins
Here is the list of plugin which used in Upcover Astro:
| Plugin | Version |
|---|---|
| astro | 5.2.5 |
| tailwindcss | 4.0.6 |
| @iconscout/unicons | 4.2.0 |
| @tailwindcss/vite | 4.0.6 |
| gumshoejs | 5.1.2 |
| tiny-slider | 2.9.4 |
| tobii | 2.0.0-alpha |
Components
Please check all components are here like services, features, about us, contact us, team, process, etc.
Path like: Upcover_AstroJs/src/components
How to change your template color?
It's easy to change your color if your color is orange-600 to another (green-600, red-400, orange-700, etc. as your template primary color) please check and read the below link to the customizing colors docs, https://tailwindcss.com/docs/customizing-colors
How to change your Light theme to Dark theme?
Please open the Layout.astro (path: src/layouts/Layout.astro) and add or replace the class light to dark
For Light mode: <html lang="en" className="light scroll-smooth" dir="ltr">
For Dark mode: <html lang="en" className="dark scroll-smooth" dir="ltr">
How to change your LTR theme to RTL theme?
Please open the Layout.astro (path: src/layouts/Layout.astro) and add or replace the dir ltr to rtl
For LTR mode: <html lang="en" className="light scroll-smooth" dir="ltr">
For RTL mode: <html lang="en" className="light scroll-smooth" dir="rtl">
Supports
Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.
If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.
Stay awesome
- Shreethemes
Changelog
Version v1.0 - 20th February 2025
- Initial Released