diff --git a/landing/components/Code.vue b/landing/components/Code.vue index 3dcfcb7..9f68f0c 100644 --- a/landing/components/Code.vue +++ b/landing/components/Code.vue @@ -20,7 +20,8 @@ onMounted(() => { Collect Analytics, Easy way
- 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.
@@ -32,15 +33,13 @@ onMounted(() => {
-
Get Started for Free
- + class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl animated-button px-8 py-3 rounded-2xl"> +
+
Get Started for Free
+ +
-
@@ -48,4 +47,58 @@ onMounted(() => { - \ No newline at end of file + + + \ No newline at end of file diff --git a/landing/components/Testimonials.vue b/landing/components/Testimonials.vue new file mode 100644 index 0000000..0e74fc2 --- /dev/null +++ b/landing/components/Testimonials.vue @@ -0,0 +1,98 @@ + + + + + + + \ No newline at end of file diff --git a/landing/components/pricing/PricingCard.vue b/landing/components/pricing/PricingCard.vue index 63a81a0..3bb208f 100644 --- a/landing/components/pricing/PricingCard.vue +++ b/landing/components/pricing/PricingCard.vue @@ -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') } @@ -35,8 +35,8 @@ function onUpgradeClick() {
Start now for FREE
-
- Upgrade +
+ Go to Dashboard
diff --git a/landing/layouts/header.vue b/landing/layouts/header.vue index c8e74ff..8a37cb7 100644 --- a/landing/layouts/header.vue +++ b/landing/layouts/header.vue @@ -32,17 +32,23 @@ nuxtApp.hook("page:finish", () => {
-
- - Live demo - Docs - Pricing - GitHub +
+ + Live demo + + + Docs + + + Pricing + + + GitHub
+ class="poppins font-[500] px-10 py-[.3rem] bg-accent rounded-xl animated-button"> Get started
@@ -72,39 +78,41 @@ nuxtApp.hook("page:finish", () => {
- Get started + class="animated-button poppins font-semibold px-4 py-3 text-center bg-black rounded-lg"> + Get started for free + 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
-
- + +
Docs - +
-
+
-
- Pricing - + +
+ Pricing +
-
+
-
- GitHub + +
GitHub
-
+
@@ -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: ""; + inherits: true; + initial-value: 0turn; +} diff --git a/landing/pages/index.vue b/landing/pages/index.vue index 75a840f..ccc6a82 100644 --- a/landing/pages/index.vue +++ b/landing/pages/index.vue @@ -82,17 +82,21 @@ const mouseStyle = computed(() => {
-
+
+ -
Get Started for Free
- + class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl animated-button px-8 py-3 rounded-2xl"> +
+
Get Started for Free
+ +
+ 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">
Live Demo
+
@@ -141,23 +145,25 @@ const mouseStyle = computed(() => { - +
- +
+ + +
-
Why Use Litlyx
+
Why Choose Litlyx
- { - + -
+ - \ No newline at end of file