Add a floating configurator

This commit is contained in:
Cagatay Civici
2024-07-30 00:31:51 +03:00
parent 72ef6a60b6
commit 4711b6868c
7 changed files with 49 additions and 16 deletions

View File

@@ -115,7 +115,7 @@ watch([getPrimary, getSurface], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div>
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
<i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">24 new </span>
@@ -130,7 +130,7 @@ watch([getPrimary, getSurface], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
<i class="pi pi-map-marker text-orange-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">%52+ </span>
@@ -145,7 +145,7 @@ watch([getPrimary, getSurface], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
<i class="pi pi-inbox text-cyan-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">520 </span>
@@ -160,7 +160,7 @@ watch([getPrimary, getSurface], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
<i class="pi pi-comment text-purple-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">85 </span>

View File

@@ -1,6 +1,9 @@
<script setup></script>
<script setup>
import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
</script>
<template>
<FloatingConfigurator />
<div class="flex items-center justify-center min-h-screen overflow-hidden">
<div class="flex flex-col items-center justify-center">
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">

View File

@@ -1,6 +1,9 @@
<script setup></script>
<script setup>
import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
</script>
<template>
<FloatingConfigurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">

View File

@@ -1,6 +1,9 @@
<script setup></script>
<script setup>
import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
</script>
<template>
<FloatingConfigurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">

View File

@@ -1,4 +1,5 @@
<script setup>
import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
import { ref } from 'vue';
const email = ref('');
@@ -7,6 +8,7 @@ const checked = ref(false);
</script>
<template>
<FloatingConfigurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">