mirza.millahsyafiq.0912/template-matdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init project

Browse Source
This commit is contained in:
Mirza Millahsyafiq Khusni
2025-03-12 10:20:27 +07:00
commit fe04ff1137
84 changed files with 3050 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
landingpage/index.html Normal file
View File

@@ -0,0 +1,358 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Matdash Nuxtjs Admin Template by Adminmart</title>
<!-- Favicon -->
<!-- --------------------------------------------------- -->
<link
rel="shortcut icon"
type="image/png"
href="https://bootstrapdemos.adminmart.com/matdash-free/src/assets/images/logos/favicon.png"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<div id="main-wrapper">
<header class="py-3 bg-white">
<div class="container">
<!-- Start Header -->
<div class="header">
<nav class="navbar navbar-expand-md navbar-light px-0">
<a class="navbar-brand d-flex" href="index.html">
<img
src="https://bootstrapdemos.adminmart.com/matdash-free/src/assets/images/logos/logo.svg"
alt="logo"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto py-3 py-md-0">
<li class="nav-item pe-0 pe-md-3">
<a
href="https://adminmart.com/product/matdash-free-nuxt-js-admin-template/"
class="btn btn-custom btn-outline-primary d-block d-md-inline-block"
target="_blank"
>Free Download</a
>
</li>
<li class="nav-item mt-3 mt-md-0">
<a
href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=5"
class="btn btn-custom btn-primary d-block d-md-inline-block"
target="_blank"
>Check Pro Version</a
>
</li>
</ul>
</div>
</nav>
</div>
<!-- End Header -->
</div>
</header>
<div class="content-wrapper">
<section class="spacer bg-light">
<div class="container">
<div class="row justify-content-md-center pt-5">
<div class="col-md-9 text-center">
<h2 class="text-dark">
Create Userfriendly Interface for your
<span class="fw-bold">Applications</span> &
<span class="fw-bold">Products</span> with
<span class="border-bottom border-dark">
Matdash Nuxtjs Vuetify Admin</span
>
</h2>
</div>
</div>
<div class="row py-5 justify-content-md-center">
<!-- ============================================================== -->
<!-- Lite Demo -->
<!-- ============================================================== -->
<div class="col-lg-6 col-md-9">
<div class="card p-2 me-1">
<div class="card-body p-4">
<div class="text-center">
<h3 class="text-dark font-weight-medium">Free Version</h3>
</div>
<div class="live-box text-center mt-4">
<img
class="img-fluid"
src="https://adminmart.com/wp-content/uploads/2024/12/MatDash_Nuxtjs_free_adminmart_img.jpg"
alt="Free version"
/>
</div>
<div class="text-center mt-4">
<a
class="btn btn-outline-primary btn-custom mb-2 mb-md-0"
href="https://matdash-nuxtjs-free.netlify.app/"
target="_blank"
>Live Preview</a
>
<a
href="https://adminmart.com/product/matdash-free-nuxt-js-admin-template/"
class="btn btn-custom btn-primary ms-2"
target="_blank"
>Free Download</a
>
</div>
<p class="text-muted mt-5 line-h33 font-16">
If you are looking for an eye-catching and elegantly
designed free Nuxtjs admin template that comes with several
added features, then look no more. Matdash Free Vuetify
3 Nuxtjs Admin Dashboard Template that has everything you
require to develop an amazing web app. It has a very
simple sleek design which will give your next project a
professional and engaging look.
</p>
<div class="row text-muted mt-4">
<div class="col-md-6">
<ul class="list-unstyled listing">
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span>
1 Basic Dashboard
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>7+ Pages Template
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>5+ UI Components
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>Vuetify 3
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>Solar Icons
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>Google Fonts
</li>
<li class="text-dark py-2">
<span class="icon-circle me-2"></span>No Support
Provided
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled listing">
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>Code splitting
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>Organized Code Structure
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>SCSS Base CSS
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>Easy To Customize
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-muted me-2"></span
>Fully Responsive Pages
</li>
<li class="text-dark py-2">
<span class="icon-circle me-2"></span>No
Documentation
</li>
<li class="text-dark py-2">
<span class="icon-circle me-2"></span>Backlink
Required
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- Pro Demo -->
<!-- ============================================================== -->
<div class="col-lg-6 col-md-9 mt-0 mt-md-4 mt-lg-0">
<div class="card pro-demo p-2 ms-1">
<div class="card-body p-4">
<div class="text-center">
<h3 class="text-primary font-weight-medium">
Pro Version
</h3>
</div>
<div class="live-box text-center mt-4">
<img
class="img-fluid"
src="https://adminmart.com/wp-content/uploads/2024/10/matdash-nuxtjs-pro.jpg"
alt="Pro version"
/>
</div>
<div class="text-center mt-4">
<a
class="btn btn-outline-primary btn-custom mb-2 mb-md-0"
href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/#product-demo-section"
target="_blank"
>Live Preview</a
>
<a
href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=5"
class="btn btn-custom btn-primary ms-2"
target="_blank"
>Buy Pro Version</a
>
</div>
<div class="row text-dark mt-5">
<div class="col-md-6">
<ul class="list-unstyled listing">
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>2+ Stunning Dashboards
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>65+ Page Templates
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>45+ UI Components
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>15+ Integrated Plugins
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Vuetify 3
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Nuxtjs Landing Page
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>1 Year Premium Support
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>3400+ Font Icons
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Lots of Charts Added
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Vue3 Carousel Added
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Fully Responsive Pages
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>& lots more..
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled listing">
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>5+ Unique Demos
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Axios - Mock API Included
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>12+ Ready to Use App
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>4+ Frontend Pages
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>i18 Vue Included
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Figma file for most of pages
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Documentation Provided
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Lots of Widgets
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Tons of Table Example
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Variety of Forms Included
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>SCSS Base CSS
</li>
<li class="py-2 d-flex align-items-center">
<span class="icon-circle circle-primary me-2"></span
>Easy to Customize
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="text-center p-4">
All Rights Reserved by Matdash Nuxtjs Vuetify Admin. Designed and Developed
by
<a href="https://adminmart.com">adminmart.com</a>
</footer>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"
></script>
</body>
</html>

167
landingpage/style.css Normal file
View File

@@ -0,0 +1,167 @@
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root {
--bs-font-sans-serif: "Manrope",
sans-serif;
--bs-primary: #635BFF;
--bs-secondary: #14E9E2;
--bs-danger: #FA896B;
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #5A6A85;
--bs-body-bg: #fff;
--bs-border-color: #ebf1f6;
--bs-heading-color: #2A3547;
--bs-border-radius: 7px;
--bs-gutter-x: 24px;
--bs-btn-font-size: 0.875rem;
--bs-card-spacer-y: 30px;
--bs-card-spacer-x: 30px;
--bs-card-border-width: 0px;
--bs-success-rgb: 19,222,185;
--bs-primary-rgb: 99,91,255;
--bs-light-rgb: 246,249,252;
--bs-dark-rgb: 42,53,71;
}
.btn {
--bs-btn-padding-x: 16px;
--bs-btn-padding-y: 7px;
--bs-btn-font-size: 0.875rem;
}
.btn-primary {
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-bg: var(--bs-primary);
--bs-btn-active-border-color: var(--bs-primary);
--bs-btn-disabled-bg: var(--bs-primary);
--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-secondary {
--bs-btn-bg: var(--bs-secondary);
--bs-btn-border-color: var(--bs-secondary);
--bs-btn-hover-bg: var(--bs-secondary);
--bs-btn-hover-border-color: var(--bs-secondary);
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-bg: var(--bs-secondary);
--bs-btn-active-border-color: var(--bs-secondary);
--bs-btn-disabled-bg: var(--bs-secondary);
--bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-danger {
--bs-btn-bg: var(--bs-danger);
--bs-btn-border-color: var(--bs-danger);
--bs-btn-hover-bg: var(--bs-danger);
--bs-btn-hover-border-color: var(--bs-danger);
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-bg: var(--bs-danger);
--bs-btn-active-border-color: var(--bs-danger);
--bs-btn-disabled-bg: var(--bs-danger);
--bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-outline-primary {
--bs-btn-color: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: 13,110,253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--bs-primary);
--bs-btn-active-border-color: var(--bs-primary);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--bs-primary);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--bs-primary);
}
/* background */
.bg-light {
background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
}
/* text colors */
.text-success {
color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;
}
.text-primary {
color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
}
.text-dark {
color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
}
.text-muted {
color: #5a6a85!important;
}
/* card */
.card {
--bs-card-spacer-y: 30px;
--bs-card-spacer-x: 30px;
--bs-card-title-color: #2A3547;
--bs-card-subtitle-color: #2A3547;
--bs-card-border-width: 0px;
--bs-card-box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
--bs-card-inner-border-radius: 7px;
}
.container {
max-width: 1150px;
}
/* custom */
.spacer {
padding: 80px 0;
}
.pro-demo {
-webkit-box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
}
.line-h33 {
line-height: 33px;
}
.icon-circle {
background-color: rgb(var( --bs-dark-rgb));
display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
position: relative;
}
.icon-circle.circle-primary {
background-color: rgb(var( --bs-primary-rgb)) !important;
}
.icon-circle.circle-muted {
background-color: var(--bs-body-color) !important;
opacity: 0.8;
}
.icon-circle:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 5px;
height: 5px;
border-radius: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
top: 5px;
}