mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-09 23:48:36 +01:00
adjusting layout landing page
This commit is contained in:
Emily
@@ -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>
|
||||
|
||||
@@ -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
98
landing/components/Testimonials.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
<div> <i class="fas fa-chevron-right"></i> </div>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
|
||||
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>
|
||||
|
||||
@@ -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">
|
||||
<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">
|
||||
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>
|
||||
Reference in New Issue
Block a user