Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

adjusting layout landing page

Browse Source
This commit is contained in:
Emily
2024-06-07 19:10:30 +02:00
parent e6a9d3e9c7
commit 09baf307c6
5 changed files with 325 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
landing/components/Code.vue
View File

@@ -20,7 +20,8 @@ onMounted(() => {
Collect Analytics, Easy way
</div>
<div class="poppins text-[1.35rem] text-text-sub text-center w-[90%] lg:w-[60%] z-[10]">
Website Visits, Custom Events, Referrers, Browsers, Devices, Operating Systems (OS), Countries, Search Terms, Unique Users, Sessions, and many more.
Website Visits, Custom Events, Referrers, Browsers, Devices, Operating Systems (OS), Countries, Search
Terms, Unique Users, Sessions, and many more.
</div>
</div>
@@ -32,15 +33,13 @@ onMounted(() => {
<div class="flex justify-center mt-12 z-[20] relative">
<div class="flex gap-6 items-center flex-col lg:flex-row">
<NuxtLink to="https://dashboard.litlyx.com"
class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl bg-text text-bg-light px-8 py-3 rounded-2xl text-black">
<div class="poppins"> Get Started for Free </div>
<i class="fas fa-arrow-right"></i>
class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl animated-button px-8 py-3 rounded-2xl">
<div class="flex gap-4 items-center">
<div class="poppins"> Get Started for Free </div>
<i class="fas fa-arrow-right"></i>
</div>
</NuxtLink>
<!-- <NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo"
class="hover:bg-accent/90 font-semibold cursor-pointer flex items-center gap-4 text-xl bg-accent text-bg-light px-16 py-3 rounded-2xl text-text">
<div class="poppins"> Live demo </div>
</NuxtLink> -->
</div>
</div>
@@ -48,4 +47,58 @@ onMounted(() => {
</div>
</template>
</template>
<style scoped lang="scss">
.animated-button {
display: grid;
place-content: center;
color: white;
text-shadow: 0 1px 0 #000;
width: 100%;
--border-angle: 0turn; // For animation.
--main-bg: conic-gradient(from var(--border-angle),
rgb(17, 20, 51),
rgb(17, 18, 34) 5%,
rgb(17, 20, 34) 60%,
rgb(17, 28, 51) 95%);
border: solid 2px transparent;
--gradient-border: conic-gradient(from var(--border-angle),
transparent 25%,
rgb(0, 136, 255),
transparent 99%,
transparent);
background:
// padding-box clip this background in to the overall element except the border.
var(--main-bg) padding-box,
// border-box extends this background to the border space
var(--gradient-border) border-box,
// Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
var(--main-bg) border-box;
background-position: center center;
animation: bg-spin 3s linear infinite;
@keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
&:hover {
animation-play-state: paused;
}
}
@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
</style>