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

65
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">
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>
@@ -49,3 +48,57 @@ onMounted(() => {
</div>
</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>

107
landing/layouts/header.vue
View File

@@ -32,17 +32,23 @@ nuxtApp.hook("page:finish", () => {
</NuxtLink>
<div class="grow"></div>
<div class="flex gap-8 text-[1rem] text-white font-[500] poppins">
<NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo" class="hover:text-text-sub/90">
Live demo </NuxtLink>
<NuxtLink target="_blank" to="https://docs.litlyx.com" class="hover:text-text-sub/90"> Docs </NuxtLink>
<NuxtLink to="/pricing" class="hover:text-text-sub/90"> Pricing </NuxtLink>
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="hover:text-text-sub/90"> GitHub
<div class="flex gap-8 text-[1.1rem] text-white font-[500]">
<NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo" class="poppins hover:text-text-sub/90">
Live demo
</NuxtLink>
<NuxtLink target="_blank" to="https://docs.litlyx.com" class="poppins hover:text-text-sub/90">
Docs
</NuxtLink>
<NuxtLink to="/pricing" class="poppins hover:text-text-sub/90">
Pricing
</NuxtLink>
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="poppins hover:text-text-sub/90">
GitHub
</NuxtLink>
</div>
<div class="px-10 pt-6 lg:pt-0">
<NuxtLink to="https://dashboard.litlyx.com" target="_blank"
class="poppins font-[500] px-4 py-[.3rem] bg-accent rounded-xl">
class="poppins font-[500] px-10 py-[.3rem] bg-accent rounded-xl animated-button">
Get started
</NuxtLink>
</div>
@@ -72,39 +78,41 @@ nuxtApp.hook("page:finish", () => {
<div class="flex flex-col gap-4">
<NuxtLink to="https://dashboard.litlyx.com" target="_blank"
class="poppins font-semibold px-4 py-3 text-center bg-accent rounded-lg">
Get started
class="animated-button poppins font-semibold px-4 py-3 text-center bg-black rounded-lg">
Get started for free
</NuxtLink>
<NuxtLink to="https://dashboard.litlyx.com/live_demo" target="_blank"
class="poppins font-semibold px-4 mb-6 py-3 text-center bg-[#e4e6f7] text-accent rounded-lg">
class="poppins font-semibold px-4 mb-6 py-3 text-center bg-transparent border-solid border-[1px] border-white/80 text-white rounded-lg">
Live demo
</NuxtLink>
</div>
<div class="flex justify-between items-center mr-2">
<NuxtLink target="_blank" to="https://docs.litlyx.com" class="hover:text-text-sub/90 py-3">
<NuxtLink target="_blank" to="https://docs.litlyx.com"
class="flex justify-between items-center mr-2">
<div class="hover:text-text-sub/90 py-3">
Docs
</NuxtLink>
<div> <i class="fas fa-chevron-right"></i> </div>
</div>
<div> <i class="fas fa-chevron-right"></i> </div>
</NuxtLink>
<div class="divider border-b border-gray-500/40"></div>
<div class="flex justify-between items-center mr-2">
<NuxtLink @click="isMenuOpen = false" to="/pricing" class="hover:text-text-sub/90 py-3"> Pricing
</NuxtLink>
<div> <i class="fas fa-chevron-right"></i> </div>
<NuxtLink @click="isMenuOpen = false" to="/pricing" class="flex justify-between items-center mr-2">
<div class="hover:text-text-sub/90 py-3">
Pricing
</div>
<div> <i class="fas fa-chevron-right"></i> </div>
</NuxtLink>
<div class="divider border-b border-gray-500/40"></div>
<div class="flex justify-between items-center mr-2">
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
class="hover:text-text-sub/90 py-3"> GitHub </NuxtLink>
class="flex justify-between items-center mr-2">
<div class="hover:text-text-sub/90 py-3"> GitHub </div>
<div> <i class="fas fa-chevron-right"></i> </div>
</div>
</NuxtLink>
<div class="divider border-b border-gray-500/40"></div>
@@ -191,4 +199,61 @@ nuxtApp.hook("page:finish", () => {
.layout * {
font-family: "Inter";
}
.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>

84
landing/pages/index.vue
View File

@@ -82,17 +82,21 @@ const mouseStyle = computed(() => {
</div>
<div class="flex gap-6 items-center flex-col lg:flex-row">
<div class="flex gap-6 items-center flex-col lg:flex-row lg:w-[80%]">
<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">
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">
class="hover:bg-[#1b1b1b] justify-center font-semiboldcursor-pointer w-full flex items-center gap-4 text-xl text-bg-light px-16 py-3 rounded-2xl bg-black border-solid border-[1px] border-white/80 text-white">
<div class="poppins"> Live Demo </div>
</NuxtLink>
</div>
</div>
@@ -146,18 +150,20 @@ const mouseStyle = computed(() => {
<Analyst></Analyst>
</div>
<div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
<Testimonials>
</Testimonials>
</div>
<div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
<div class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text"> Why Use Litlyx </div>
<div class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text"> Why Choose Litlyx </div>
<div ref="autoscroll"
class="flex gap-8 flex-row lg:flex-col overflow-x-auto overflow-y-hidden lg:overflow-hidden w-full hide-scroll px-6">
<div class="flex justify-center gap-8">
<HomeCard title="1-Minute Setup" text="Effortlessly set up and start collecting KPIs in seconds."
icon="far fa-clock">
</HomeCard>
<HomeCard title="Real-Time Insights"
text="Immediately visualize visits & events on your Dashboard."
<HomeCard title="Real-Time Insights" text="Immediately visualize visits & events on your Dashboard."
icon="far fa-line-chart">
</HomeCard>
<HomeCard title="Custom Events" text="Tailor your user experience tracking with custom events."
@@ -168,21 +174,21 @@ const mouseStyle = computed(() => {
<HomeCard title="Start for Free" text="Try Litlyx with 3k FREE Visits & Events for your website."
icon="far fa-gift">
</HomeCard>
<HomeCard title="Open-Source"
text="Litlyx is transparent, Self-Hostable & Open-Source." icon="far fa-globe">
<HomeCard title="Open-Source" text="Litlyx is transparent, Self-Hostable & Open-Source."
icon="far fa-globe">
</HomeCard>
<HomeCard title="Cost-Effective"
text="Get more for less with Litlyx, without breaking the bank."
<HomeCard title="Cost-Effective" text="Get more for less with Litlyx, without breaking the bank."
icon="far fa-wallet">
</HomeCard>
</div>
</div>
</div>
</div>
</template>
<style scoped>
<style scoped lang="scss">
.footer * {
font-family: "Poppins";
}
@@ -200,4 +206,58 @@ const mouseStyle = computed(() => {
background-blend-mode: normal, normal, normal, normal, normal, normal;
filter: blur(100px);
}
.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>