Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-09 23:48:36 +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>

98
landing/components/Testimonials.vue Normal file
View File

@@ -0,0 +1,98 @@
<script lang="ts" setup>
const testimonials = ref<{ text: string, name: string, stars: number }[]>([
// { text: ``, name: "Vik", stars: 5 },
// { text: ``, name: "Fede", stars: 5 },
{ text: `Litlyx saved me so much time.`, name: "Luca", stars: 5 },
{ text: `This simplicity is a game-changer! Thank you Litlyx.`, name: "Anto", stars: 5 },
{ text: `Transparency & Open-source. Love it!`, name: "Alessio", stars: 5 },
{
text: `Litlyx made setting up analytics on my website incredibly easy with just one line of code.
At only €9,99 a month, it tracks all KPIs perfectly. Cost-effective I’ve to say!`, name: "Bobby", stars: 5
},
]);
</script>
<template>
<div class="flex animated-container w-full h-fit">
<div v-for="testimonial of testimonials">
<div class="flex flex-col gap-3 items-center px-20 text-center">
<div class="poppins font-semibold text-[1.2rem]">
{{ testimonial.name }}
</div>
<div class="flex gap-2">
<i v-for="_ of new Array(testimonial.stars).fill(0)" class="fas fa-star"></i>
</div>
<div class="poppins">
"{{ testimonial.text }}"
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
$n: 4;
/* number of elements */
.animated-container {
--d: 25s;
/* duration */
display: grid;
grid-template-columns: repeat(4, auto);
/* number of visible elements + width */
overflow: hidden;
-webkit-mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000);
}
.animated-container>div {
grid-area: 1/1;
display: grid;
align-content: center;
gap: 10px;
background: #000000 padding-box;
border-radius: 1rem;
padding: 1rem 1rem;
border-inline: 10px solid #0000;
animation: r var(--d) linear infinite;
height: 15rem;
}
.animated-container>div img {
width: 100%;
grid-row: span 2;
}
.animated-container>div * {
margin: 0
}
.animated-container>div h3 {
margin-top: auto;
}
@for $i from 2 to ($n + 1) {
.animated-container>div:nth-child(#{$i}) {
animation-delay: calc(#{(1 - $i)/$n}*var(--d))
}
}
$perc: calc(100% / $n);
@keyframes r {
#{$perc} {
transform: translate(-100%)
}
#{$perc + 0.01%} {
transform: translate(($n - 1) * 100%)
}
}
</style>

6
landing/components/pricing/PricingCard.vue
View File

@@ -12,7 +12,7 @@ const props = defineProps<{ data: PricingCardProp }>();
function onUpgradeClick() {
window.open('https://dashboard.litlyx.com/book_demo')
window.open('https://dashboard.litlyx.com')
}
</script>
@@ -35,8 +35,8 @@ function onUpgradeClick() {
<div @click="onUpgradeClick()" v-if="data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
Start now for FREE
</div>
<div @click="onUpgradeClick()" v-if="!data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#4d4d4d] rounded-md py-2 text-center">
Upgrade
<div @click="onUpgradeClick()" v-if="!data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#141414] rounded-md py-2 text-center">
Go to Dashboard
</div>
</div>