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(() => {
-
- 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
-
+
-
-
Pricing
-
+
+
+ Pricing
+
-
+
-
+
@@ -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(() => {
-