FEAT: v1
This commit is contained in:
prosety
@@ -1,62 +0,0 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0.15rem;
|
||||
background-color: white;
|
||||
background-image: var(--accent-gradient);
|
||||
background-size: 400%;
|
||||
border-radius: 0.5rem;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: 1rem 1.3rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #111;
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: #444;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +1,33 @@
|
||||
<script>
|
||||
import Nextcloud from '../svg/apps/nextcloud.vue'
|
||||
export default {
|
||||
components: { Nextcloud },
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<div class="bg-slate-900 rounded-xl w-72 h-56">
|
||||
<section class="flex flex-col md:flex-row items-center justify-center mb-28">
|
||||
<div class="bg-slate-900 rounded-xl w-4/5 md:w-96 h-56 md:z-10 -mb-8 md:-mb-0 max-w-full">
|
||||
<div class="p-3 flex justify-between w-20">
|
||||
<div class="bg-green-400 h-4 w-4 r-1 rounded-full"></div>
|
||||
<div class="bg-yellow-300 h-4 w-4 r-1 rounded-full"></div>
|
||||
<div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
|
||||
</div>
|
||||
<div class="text-white font-mono p-4 pt-0">
|
||||
$: pegaz up nextcloud
|
||||
$: pegaz up nextcloud
|
||||
<span class="w-2 h-4 bg-white inline-block animate-blink relative" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-400 rounded-2xl w-96 h-80">
|
||||
<div class="bg-white"></div>
|
||||
<div class="bg-slate-400 flex flex-col items-center rounded-2xl w-full md:w-2/4 md:min-w-fit h-80 md:-ml-8 md:z-0">
|
||||
<div class="bg-white inline-block rounded-2xl px-4 py-1 m-4 w-4/6">
|
||||
<span class="text-gray-400">
|
||||
https://
|
||||
</span>
|
||||
domain.com
|
||||
</div>
|
||||
<div class="bg-white w-full h-full flex justify-center items-center group">
|
||||
<Nextcloud class="w-20 bg-black bg-opacity-10 inline-block rounded-xl p-4 cursor-pointer scale-0 group-hover:scale-100 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
36
src/components/hero-buttons.vue
Normal file
36
src/components/hero-buttons.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script>
|
||||
import ClipBoard from '../svg/clipboard.vue'
|
||||
export default {
|
||||
components: { ClipBoard },
|
||||
data: () => {
|
||||
return {
|
||||
isClicked: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyToClipBoard() {
|
||||
navigator.clipboard.writeText('curl -sL get.pegaz.io | sudo bash').then(() => {
|
||||
this.isClicked = true
|
||||
setTimeout(() => {
|
||||
this.isClicked = false
|
||||
}, 600);
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="py-4 sm:flex justify-center items-center">
|
||||
<a href="https://github.com/valerebron/pegaz" target="_blank"
|
||||
class="py-4 px-6 h-14 leading-6 flex justify-center bg-purple-500 text-black text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-purple-400 focus:outline-none focus:text-white focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
|
||||
get started
|
||||
</a>
|
||||
<div class="font-mono bg-neutral-900 text-neutral-50 rounded-md flex justify-between pl-3 pr-4 py-3 sm:ml-4 border border-transparent text-base shadow-primary-700 relative">
|
||||
<span class="select-all">
|
||||
curl -sL get.pegaz.io | sudo bash
|
||||
</span>
|
||||
<ClipBoard class="inline ml-3 cursor-pointer" :class="{ 'animate-ping': isClicked }" @click="copyToClipBoard" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
25
src/components/hero-title.vue
Normal file
25
src/components/hero-title.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
import Logo from '../svg/logo.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<div class="flex justify-center -ml-24 animate-slide">
|
||||
<div class="py-4 mr-3 animate-fadeout opacity-0">
|
||||
<div class="bg-gray-400 h-px w-16 my-3 block"></div>
|
||||
<div class="bg-gray-400 h-px w-16 my-3 translate-x-3 block"></div>
|
||||
<div class="bg-gray-400 h-px w-16 my-3 translate-x-1 block"></div>
|
||||
<div class="bg-gray-400 h-px w-16 my-3 translate-x-6 block"></div>
|
||||
</div>
|
||||
<Logo />
|
||||
</div>
|
||||
<div class="text-center py-4">
|
||||
<h1 class="text-5xl font-bold leading-relaxed">
|
||||
Pegaz
|
||||
</h1>
|
||||
<h2 class="text-3xl text-center">
|
||||
Deploy stack on the go
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user