File: /home/dnlightw-124/dn.lightweb.kr/themes/prompt/Pages/Welcome.vue
<template>
<Layout>
<Index />
<!-- =========== demos Section Start =========== -->
<section class="py-20" id="demo">
<div class="container">
<div class="text-center">
<span class="text-sm font-medium py-1 px-3 rounded-full text-primary bg-primary/10">{{ __('New') }}</span>
<h1 class="text-4xl my-4">{{ __('Admin Pages') }}</h1>
<p class="text-slate-500 mb-14">{{ __('Modern landing pages available for every need') }}</p>
</div>
<div class="grid md:grid-cols-2 grid-cols-1 gap-6" data-aos="fade-up" data-duration="600">
<Link class="block" :href="item.link" v-for="(item,idx) in adminPagesData" :key="idx" target="_blank">
<div class="border p-2 rounded">
<img :src="item.image" alt=""/>
</div>
<h4 class="text-base text-center mt-4">{{ __('Dashboard') }}</h4>
</Link>
</div>
</div>
</section>
<!-- =========== demos Section End =========== -->
<!-- =========== demos Section Start =========== -->
<section class="py-20" id="demo">
<div class="container">
<div class="text-center">
<span class="text-sm font-medium py-1 px-3 rounded-full text-primary bg-primary/10">{{ __('Demos') }}</span>
<h1 class="text-4xl my-4">{{ __('Landing Pages') }}</h1>
<p class="text-slate-500 mb-14">{{ __('Modern landing pages available for every need') }}</p>
</div>
<div class="grid md:grid-cols-2 grid-cols-1 gap-6" data-aos="fade-up" data-duration="600">
<Link :href="item.link" v-for="(item,idx) in landingPagesData" :key="idx" target="_blank">
<div class="border p-2 rounded">
<img :src="item.image" alt=""/>
</div>
<h4 class="text-base text-center mt-4">{{ item.text }}</h4>
</Link>
</div>
</div>
</section>
<!-- =========== demos Section End =========== -->
<!-- =========== showcase Section Start =========== -->
<section class="py-20">
<div class="container">
<div class="text-center" data-aos="fade-up">
<span class="text-sm font-medium py-1 px-3 rounded-full text-primary bg-primary/10">{{ __('Inner Pages') }}</span>
<h1 class="text-4xl mt-4 mb-14">{{ __('Inner Pages') }}</h1>
</div>
<div class="grid md:grid-cols-2 grid-cols-1 gap-6" data-aos="fade-up" data-duration="600">
<Link :href="item.link" v-for="(item,idx) in innerPagesData" :key="idx" target="_blank">
<div class="border p-2 rounded">
<img :src="item.image" alt=""/>
</div>
<h4 class="text-base text-center mt-4">{{ item.text }}</h4>
</Link>
</div>
</div>
</section>
<!-- =========== showcase Section End =========== -->
<!-- =========== Auth pages Section Start =========== -->
<section class="py-20">
<div class="container">
<div class="text-center" data-aos="fade-up">
<span class="text-sm font-medium py-1 px-3 rounded-full text-primary bg-primary/10">{{ __('Account Pages') }}</span>
<h1 class="text-4xl mt-4 mb-14">{{ __('Auth Pages') }}</h1>
</div>
<div class="grid md:grid-cols-2 grid-cols-1 gap-6" data-aos="fade-up" data-duration="600">
<Link :href="item.link" v-for="(item,idx) in authPagesData" :key="idx" target="_blank">
<div class="border p-2 rounded">
<img :src="item.image" alt=""/>
</div>
<h4 class="text-base text-center mt-4">{{ item.text }}</h4>
</Link>
</div>
</div>
</section>
<!-- =========== Auth pages Section End =========== -->
<!-- =========== features Section Start =========== -->
<section class="py-20 bg-primary/10" data-aos="fade-up">
<div class="container">
<div class="text-center">
<span class="text-sm font-medium py-1 px-3 rounded-full text-primary bg-primary/10">{{ __('Features') }}</span>
<h1 class="text-4xl my-4">{{ __('Why Choose Prompt') }}</h1>
<p class="text-slate-500 mb-14">{{ __('A modern design, fresh look and feel') }}</p>
</div>
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="600">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 54 33">
<g clip-path="url(#prefix__clip0)">
<path fill="#38bdf8" fill-rule="evenodd"
d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
clip-rule="evenodd"/>
</g>
<defs>
<clipPath id="prefix__clip0">
<path fill="#fff" d="M0 0h54v32.4H0z"/>
</clipPath>
</defs>
</svg>
</span>
<h5>{{ __('Based on latest Tailwind v3.3.3') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="600">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path
d="M8,2.5 C7.30964406,2.5 6.75,3.05964406 6.75,3.75 L6.75,20.25 C6.75,20.9403559 7.30964406,21.5 8,21.5 L16,21.5 C16.6903559,21.5 17.25,20.9403559 17.25,20.25 L17.25,3.75 C17.25,3.05964406 16.6903559,2.5 16,2.5 L8,2.5 Z"
id="Combined-Shape" fill="currentcolor" opacity="0.3"></path>
<path
d="M8,2.5 C7.30964406,2.5 6.75,3.05964406 6.75,3.75 L6.75,20.25 C6.75,20.9403559 7.30964406,21.5 8,21.5 L16,21.5 C16.6903559,21.5 17.25,20.9403559 17.25,20.25 L17.25,3.75 C17.25,3.05964406 16.6903559,2.5 16,2.5 L8,2.5 Z M8,1 L16,1 C17.5187831,1 18.75,2.23121694 18.75,3.75 L18.75,20.25 C18.75,21.7687831 17.5187831,23 16,23 L8,23 C6.48121694,23 5.25,21.7687831 5.25,20.25 L5.25,3.75 C5.25,2.23121694 6.48121694,1 8,1 Z M9.5,1.75 L14.5,1.75 C14.7761424,1.75 15,1.97385763 15,2.25 L15,3.25 C15,3.52614237 14.7761424,3.75 14.5,3.75 L9.5,3.75 C9.22385763,3.75 9,3.52614237 9,3.25 L9,2.25 C9,1.97385763 9.22385763,1.75 9.5,1.75 Z"
id="Combined-Shape" fill="currentcolor"></path>
</g>
</svg>
</span>
<h5>{{ __('Fully Responsive') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="600">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<rect id="Rectangle-7-Copy" fill="currentcolor" x="2" y="5" width="19" height="4"
rx="1"></rect>
<rect id="Rectangle-7-Copy-4" fill="currentcolor" opacity="0.3" x="2" y="11" width="19"
height="10" rx="1"></rect>
</g>
</svg>
</span>
<h5>{{ __('Cross-browser compatible') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="900">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<span class="text-xl font-semibold text-primary">S</span>
</span>
<h5>{{ __('Sass Powered') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="900">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path
d="M12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z M12,5.99999664 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18.0000034 L12,5.99999664 Z"
id="Combined-Shape" fill="currentColor"></path>
</g>
</svg>
</span>
<h5>{{ __('Easy to customize') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="900">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path
d="M12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z M12,5.99999664 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18.0000034 L12,5.99999664 Z"
id="Combined-Shape" fill="currentColor"></path>
</g>
</svg>
</span>
<h5>{{ __('Developer Friendly') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="1200">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path
d="M17.2718029,8.68536757 C16.8932864,8.28319382 16.9124644,7.65031935 17.3146382,7.27180288 C17.7168119,6.89328641 18.3496864,6.91246442 18.7282029,7.31463817 L22.7282029,11.5646382 C23.0906029,11.9496882 23.0906029,12.5503176 22.7282029,12.9353676 L18.7282029,17.1853676 C18.3496864,17.5875413 17.7168119,17.6067193 17.3146382,17.2282029 C16.9124644,16.8496864 16.8932864,16.2168119 17.2718029,15.8146382 L20.6267538,12.2500029 L17.2718029,8.68536757 Z M6.72819712,8.6853647 L3.37324625,12.25 L6.72819712,15.8146353 C7.10671359,16.2168091 7.08753558,16.8496835 6.68536183,17.2282 C6.28318808,17.6067165 5.65031361,17.5875384 5.27179713,17.1853647 L1.27179713,12.9353647 C0.909397125,12.5503147 0.909397125,11.9496853 1.27179713,11.5646353 L5.27179713,7.3146353 C5.65031361,6.91246155 6.28318808,6.89328354 6.68536183,7.27180001 C7.08753558,7.65031648 7.10671359,8.28319095 6.72819712,8.6853647 Z"
id="Combined-Shape" fill="currentColor"></path>
<rect id="Rectangle-28" fill="currentColor" opacity="0.3"
transform="translate(12.000000, 12.000000) rotate(-345.000000) translate(-12.000000, -12.000000) "
x="11" y="4" width="2" height="16" rx="1"></rect>
</g>
</svg>
</span>
<h5>{{ __('Clean & Easy to Understand Code') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="1200">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
<rect id="Rectangle-25" fill="currentColor" opacity="0.3" x="2" y="4" width="20"
height="16" rx="2"></rect>
<polygon id="Path" fill="currentColor" opacity="0.3"
points="4 20 10.5 11 17 20"></polygon>
<polygon id="Path-Copy" fill="currentColor" points="11 20 15.5 14 20 20"></polygon>
<circle id="Oval-76" fill="currentColor" opacity="0.3" cx="18.5" cy="8.5"
r="1.5"></circle>
</g>
</svg>
</span>
<h5>{{ __('Font and SVG Icons') }}</h5>
</div>
<div class="flex items-center gap-5 bg-white p-2 rounded" data-aos="fade-up" data-duration="1200">
<span class="flex items-center justify-center rounded-md w-12 h-12 bg-blue-100">
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
<path
d="M9.26193932,16.6476484 C8.90425297,17.0684559 8.27315905,17.1196257 7.85235158,16.7619393 C7.43154411,16.404253 7.38037434,15.773159 7.73806068,15.3523516 L16.2380607,5.35235158 C16.6013618,4.92493855 17.2451015,4.87991302 17.6643638,5.25259068 L22.1643638,9.25259068 C22.5771466,9.6195087 22.6143273,10.2515811 22.2474093,10.6643638 C21.8804913,11.0771466 21.2484189,11.1143273 20.8356362,10.7474093 L17.0997854,7.42665306 L9.26193932,16.6476484 Z"
id="Path-94-Copy" fill="currentColor" opacity="0.3"
transform="translate(14.999995, 11.000002) rotate(-180.000000) translate(-14.999995, -11.000002) "></path>
<path
d="M4.26193932,17.6476484 C3.90425297,18.0684559 3.27315905,18.1196257 2.85235158,17.7619393 C2.43154411,17.404253 2.38037434,16.773159 2.73806068,16.3523516 L11.2380607,6.35235158 C11.6013618,5.92493855 12.2451015,5.87991302 12.6643638,6.25259068 L17.1643638,10.2525907 C17.5771466,10.6195087 17.6143273,11.2515811 17.2474093,11.6643638 C16.8804913,12.0771466 16.2484189,12.1143273 15.8356362,11.7474093 L12.0997854,8.42665306 L4.26193932,17.6476484 Z"
id="Path-94" fill="currentColor"
transform="translate(9.999995, 12.000002) rotate(-180.000000) translate(-9.999995, -12.000002) "></path>
</g>
</svg>
</span>
<h5>{{ __('Free Updates') }}</h5>
</div>
</div>
</div>
</section>
<!-- =========== features Section End =========== -->
<Footer1/>
</Layout>
</template>
<script lang="ts" setup>
import {Head, Link, router, usePage} from '@inertiajs/vue3';
import assets from "@/lib/assets";
import {__} from "@/lib/translate";
import Layout from "@prompt/Layouts/Default.vue"
import Index from "@prompt/Components/HeroSections/Index.vue";
import Footer1 from "@prompt/Layouts/Partials/Footers/Footer1.vue";
import {onMounted} from "vue";
const adminPagesData = [
{
link: route('dashboard'),
image: assets('images/demo/dashboard.png'),
text: __('Dashboard')
},
{
link: route('profile.show'),
image: assets("images/demo/account.png"),
text: __('Account Settings')
},
]
const landingPagesData = [
{
link: route('theme.prompt.pages',{componentPath : 'landing/app'}),
image: assets("images/demo/home-app.jpg"),
text: __('Mobile App')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/saas'}),
image: assets("images/demo/home-saas.jpg"),
text: __('Saas Modern')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/saas2'}),
image: assets("images/demo/home-saas2.jpg"),
text: __('Saas Classic')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/startup'}),
image: assets("images/demo/home-startup.jpg"),
text: __('Startup')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/software'}),
image: assets("images/demo/home-software.jpg"),
text: __('Software')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/agency'}),
image: assets("images/demo/home-agency.jpg"),
text: __('Agency')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/coworking'}),
image: assets("images/demo/home-coworking.jpg"),
text: __('Co-Working')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/crypto'}),
image: assets("images/demo/home-crypto.jpg"),
text: __('Crypto')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/marketing'}),
image: assets("images/demo/home-marketing.jpg"),
text: __('Marketing')
},
{
link: route('theme.prompt.pages',{componentPath : 'landing/portfolio'}),
image: assets("images/demo/home-portfolio.jpg"),
text: __('Portfolio')
},
]
const innerPagesData = [
{
link: route('theme.prompt.pages',{componentPath : 'pages/company'}),
image: assets("images/demo/company.jpg"),
text: __('Company')
},
{
link: route('theme.prompt.pages',{componentPath : 'contact/contact-us'}),
image: assets("images/demo/contact.jpg"),
text: __('Contact')
},
{
link: route('theme.prompt.pages',{componentPath : 'pages/career'}),
image: assets("images/demo/career.jpg"),
text: __('Career')
},
{
link: route('theme.prompt.pages',{componentPath : 'blog/blog'}),
image: assets("images/demo/blog.jpg"),
text: __('Blog')
},
{
link: route('theme.prompt.pages',{componentPath : 'blog/blog-post'}),
image: assets("images/demo/blog-post.jpg"),
text: __('Blog Post')
},
{
link: route('theme.prompt.pages',{componentPath : 'portfolio/grid'}),
image: assets("images/demo/portfolio-grid.jpg"),
text: __('Portfolio Grid')
},
{
link: route('theme.prompt.pages',{componentPath : 'portfolio/masonry'}),
image: assets("images/demo/portfolio-masonry.jpg"),
text: __('Portfolio Masonry')
},
{
link: route('theme.prompt.pages',{componentPath : 'portfolio/item'}),
image: assets("images/demo/portfolio-item.jpg"),
text: __('Portfolio Item')
},
{
link: route('theme.prompt.pages',{componentPath : 'pages/pricing'}),
image: assets("images/demo/pricing.jpg"),
text: __('Pricing')
},
{
link: route('theme.prompt.pages',{componentPath : 'pages/help'}),
image: assets("images/demo/help.jpg"),
text: __('Help')
},
]
const authPagesData = [
{
link: route('login'),
image: assets("images/demo/auth-login.jpg"),
text: __('Login')
},
{
link: route('register'),
image: assets("images/demo/auth-signup.jpg"),
text: __('Signup')
},
{
link: route('password.request'),
image: assets("images/demo/auth-password.jpg"),
text: __('Forget Password')
},
{
link: route('theme.prompt.pages',{componentPath : 'account/confirm'}),
image: assets("images/demo/auth-confirm.jpg"),
text: __('Confirm Account')
},
]
function initTypewrite() {
var TxtType = function (el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function () {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) {
delta /= 2;
}
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function () {
that.tick();
}, delta);
};
var elements = document.getElementsByClassName('typewrite');
for (var i = 0; i < elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
}
onMounted(() => {
initTypewrite()
})
</script>