Merge pull request #98 from SzymCode/dev

Dev
SzymCode · Jul 15, 2024 · 5457ae0 · 5457ae0
2 parents a3d2de4 + 0b62035
commit 5457ae0
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 26 deletions.
diff --git a/atomic/_old_structure/sass/styles/components/flip_card.scss b/atomic/_old_structure/sass/styles/components/flip_card.scss
@@ -12,6 +12,7 @@
     max-width: $flip-card-width;
     min-height: $flip-card-height;
     perspective: $flip-card-perspective;
+    z-index: $flip-card-z-index;
 
     .flip-card-inner {
         position: $flip-card-inner-position;

diff --git a/atomic/_old_structure/sass/styles/pages/home/why_us.scss b/atomic/_old_structure/sass/styles/pages/home/why_us.scss
@@ -18,6 +18,7 @@
     .whyUs4 {
         width: 310px;
     }
+
     .whyUs1,
     .whyUs3,
     .whyUs5 {
@@ -121,32 +122,28 @@
 
         &:hover {
             color: $primary-color;
-            font-size: 20px;
         }
 
         @media (min-width: 768px) {
             padding: 12px;
             background: white;
             font-size: 20px;
-
-            &:hover {
-                font-size: 25px;
-            }
         }
 
         @media (min-width: 992px) {
             padding: 15px;
             background: white;
             font-size: 25px;
-
-            &:hover {
-                font-size: 30px;
-            }
         }
     }
 }
 
-
+.whyUsDialog {
+    .p-dialog-content {
+        position: relative;
+        top: -1px;
+    }
+}
 
 
 

diff --git a/atomic/_old_structure/sass/variables/components/_flip_card_variables.scss b/atomic/_old_structure/sass/variables/components/_flip_card_variables.scss
@@ -7,6 +7,7 @@ $flip-card-height: 210px;
 $flip-card-perspective: 1000px;
 $flip-card-border: 1px solid $secondary-whitesmoke-color;
 $flip-card-hover-transform: rotateY(180deg);
+$flip-card-z-index: 999;
 
 // Flip card inner
 $flip-card-inner-position: relative;

diff --git a/atomic/_old_structure/ts/components/Home/WhyUs.vue b/atomic/_old_structure/ts/components/Home/WhyUs.vue
@@ -2,17 +2,62 @@
     <section id="why-us">
         <div class="whyUsContainer px-4 py-8 md:px-6 lg:px-8 text-center flex justify-content-center align-items-center">
             <div class="mb-3 font-bold text-3xl -mt-5 absolute whyUsHeader">
-                <span class="text-900">Why </span>
+                <span>Why </span>
                 <span class="text-green-600">Us?</span>
             </div>
 
-            <div v-for="(group, index) in whyUsData" :key="index" :class="`whyUs${index} flex justify-content-between absolute`">
-                <item-molecule v-for="(item, i) in group.items" :key="i" :icon="item.icon" class="whyUsItem" />
+            <div v-for="(group, groupIndex) in whyUsData" :key="groupIndex" :class="`whyUs${groupIndex} flex justify-content-between absolute`">
+                <item-molecule
+                    v-for="(item, itemIndex) in group.items"
+                    :key="itemIndex"
+                    :icon="item.icon"
+                    class="whyUsItem"
+                    @click="openDialog(item)"
+                    v-tooltip="'Click me!'"
+                />
             </div>
         </div>
     </section>
+    <Dialog v-model:visible="dialogVisible" :data="dialogData" @close="dialogVisible = false" modal class="whyUsDialog m-4">
+        <template #header>
+            <div class="flex w-full justify-content-between align-items-center">
+                <div class="flex align-items-center gap-4">
+                    <i class="text-xl" :class="dialogData.icon"></i>
+                    <h4 class="m-0">{{ dialogData.title }}</h4>
+                </div>
+            </div>
+        </template>
+        <template #default>
+            <p class="m-0 text-sm">{{ dialogData.description }}</p>
+        </template>
+    </Dialog>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
 import { whyUsData } from '@/constants'
+
+const dialogVisible = ref(false)
+const dialogData = ref()
+
+const openDialog = (item) => {
+    dialogData.value = {
+        title: item.title,
+        description: item.description,
+        icon: item.icon
+    }
+    dialogVisible.value = true
+}
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside)
+})
+
+const handleClickOutside = (event: MouseEvent) => {
+    const element = document.querySelector('.whyUsContainer')
+    if (element && !element.contains(event.target as Node)) {
+        dialogVisible.value = false
+    }
+}
 </script>
diff --git a/atomic/_old_structure/ts/constants/home.ts b/atomic/_old_structure/ts/constants/home.ts
@@ -81,38 +81,86 @@ export const homeItems: Ref<HomeItemsInterface[]> = ref([
 export const whyUsData = [
     {
         items: [
-            { icon: 'pi pi-cloud' },
-            { icon: 'pi pi-github' }
+            {
+                icon: 'pi pi-cloud',
+                title: 'Your Own Cloud',
+                description: 'Manage and store your data securely with your own cloud'
+            },
+            {
+                icon: 'pi pi-github',
+                title: 'Open Source',
+                description: 'Enjoy this free template, available for anyone to use and modify'
+            }
         ]
     },
     {
         items: [
-            { icon: 'pi pi-building' },
-            { icon: 'pi pi-sitemap' }
+            {
+                icon: 'pi pi-building',
+                title: 'Enterprise Solutions',
+                description: 'Tailored solutions for large-scale enterprises to optimize operations'
+            },
+            {
+                icon: 'pi pi-share-alt',
+                title: 'Share Data',
+                description: 'Efficiently share your data with your co-workers'
+            }
         ]
     },
     {
         items: [
-            { icon: 'pi pi-chart-line' },
-            { icon: 'pi pi-palette' }
+            {
+                icon: 'pi pi-chart-line',
+                title: 'Analytics',
+                description: 'Gain insights and make data-driven decisions with powerful analytics'
+            },
+            {
+                icon: 'pi pi-palette',
+                title: 'Customizable',
+                description: 'Customize this template to create a unique look and feel'
+            }
         ]
     },
     {
         items: [
-            { icon: 'pi pi-file-pdf' },
-            { icon: 'pi pi-database' }
+            {
+                icon: 'pi pi-file-pdf',
+                title: 'Many Extensions',
+                description: 'Streamline document handling and storage in your work'
+            },
+            {
+                icon: 'pi pi-database',
+                title: 'Database Services',
+                description: 'Secure and reliable database management services for your data'
+            }
         ]
     },
     {
         items: [
-            { icon: 'pi pi-history' },
-            { icon: 'pi pi-sync' }
+            {
+                icon: 'pi pi-history',
+                title: 'Stay up to date',
+                description: 'Track and manage activities efficiently'
+            },
+            {
+                icon: 'pi pi-sync',
+                title: 'Synchronization',
+                description: 'Keep your data synchronized across devices and platforms'
+            }
         ]
     },
     {
         items: [
-            { icon: 'pi pi-key' },
-            { icon: 'pi pi-bell' }
+            {
+                icon: 'pi pi-shield',
+                title: 'Security',
+                description: 'Advanced security solutions to protect your data and systems'
+            },
+            {
+                icon: 'pi pi-bell',
+                title: 'Notifications',
+                description: 'Real-time notifications to keep you informed of critical events'
+            }
         ]
     }
-];
+]