feat: add section + remove unused code

fbuireu · Feb 29, 2024 · 82c180a · 82c180a
1 parent c5ef739
commit 82c180a
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 124 deletions.
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -2,9 +2,11 @@
 import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro';
 import Tabs from '@components/organisms/tabs/Tabs.astro';
 import ContactIntro from '@components/organisms/contactIntro/ContactIntro.astro';
+import LatestArticles from 'src/ui/components/organisms/latestArticles/LatestArticles.astro';
 ---
 
 <BaseLayout title="" description="">
     <ContactIntro />
     <Tabs />
+    <LatestArticles />
 </BaseLayout>
diff --git a/src/ui/components/organisms/contactForm/contact-form.css b/src/ui/components/organisms/contactForm/contact-form.css
@@ -170,8 +170,7 @@
         --right-body-third-y: 100;
         color: var(--white);
         display: block;
-        min-width: 150px;
-        padding: 0.75rem 0;
+        padding: 0.75rem 1rem;
         position: relative;
         -webkit-tap-highlight-color: transparent;
         text-align: center;

diff --git a/src/ui/components/organisms/tabs/Tabs.astro b/src/ui/components/organisms/tabs/Tabs.astro
@@ -27,125 +27,3 @@ import { ContactFormProvider } from 'src/ui/components/organisms/contactFormProv
         </div>
     </div>
 </section>
-
-<script>
-    document.querySelectorAll('.button').forEach((button) => {
-        console.log('hehehehe');
-        let getVar = (variable) => getComputedStyle(button).getPropertyValue(variable);
-        button.addEventListener('click', (e) => {
-            if (!button.classList.contains('active')) {
-                button.classList.add('active');
-                gsap.to(button, {
-                    keyframes: [
-                        {
-                            '--left-wing-first-x': 50,
-                            '--left-wing-first-y': 100,
-                            '--right-wing-second-x': 50,
-                            '--right-wing-second-y': 100,
-                            duration: 0.2,
-                            onComplete() {
-                                gsap.set(button, {
-                                    '--left-wing-first-y': 0,
-                                    '--left-wing-second-x': 40,
-                                    '--left-wing-second-y': 100,
-                                    '--left-wing-third-x': 0,
-                                    '--left-wing-third-y': 100,
-                                    '--left-body-third-x': 40,
-                                    '--right-wing-first-x': 50,
-                                    '--right-wing-first-y': 0,
-                                    '--right-wing-second-x': 60,
-                                    '--right-wing-second-y': 100,
-                                    '--right-wing-third-x': 100,
-                                    '--right-wing-third-y': 100,
-                                    '--right-body-third-x': 60,
-                                });
-                            },
-                        },
-                        {
-                            '--left-wing-third-x': 20,
-                            '--left-wing-third-y': 90,
-                            '--left-wing-second-y': 90,
-                            '--left-body-third-y': 90,
-                            '--right-wing-third-x': 80,
-                            '--right-wing-third-y': 90,
-                            '--right-body-third-y': 90,
-                            '--right-wing-second-y': 90,
-                            duration: 0.2,
-                        },
-                        {
-                            '--rotate': 50,
-                            '--left-wing-third-y': 95,
-                            '--left-wing-third-x': 27,
-                            '--right-body-third-x': 45,
-                            '--right-wing-second-x': 45,
-                            '--right-wing-third-x': 60,
-                            '--right-wing-third-y': 83,
-                            duration: 0.25,
-                        },
-                        {
-                            '--rotate': 55,
-                            '--plane-x': -8,
-                            '--plane-y': 24,
-                            duration: 0.2,
-                        },
-                        {
-                            '--rotate': 40,
-                            '--plane-x': 45,
-                            '--plane-y': -180,
-                            '--plane-opacity': 0,
-                            duration: 0.3,
-                            onComplete() {
-                                setTimeout(() => {
-                                    button.removeAttribute('style');
-                                    gsap.fromTo(
-                                        button,
-                                        {
-                                            opacity: 0,
-                                            y: -8,
-                                        },
-                                        {
-                                            opacity: 1,
-                                            y: 0,
-                                            clearProps: true,
-                                            duration: 0.3,
-                                            onComplete() {
-                                                button.classList.remove('active');
-                                            },
-                                        }
-                                    );
-                                }, 2000);
-                            },
-                        },
-                    ],
-                });
-                gsap.to(button, {
-                    keyframes: [
-                        {
-                            '--text-opacity': 0,
-                            '--border-radius': 0,
-                            '--left-wing-background': getVar('--primary-darkest'),
-                            '--right-wing-background': getVar('--primary-darkest'),
-                            duration: 0.1,
-                        },
-                        {
-                            '--left-wing-background': getVar('--primary'),
-                            '--right-wing-background': getVar('--primary'),
-                            duration: 0.1,
-                        },
-                        {
-                            '--left-body-background': getVar('--primary-dark'),
-                            '--right-body-background': getVar('--primary-darkest'),
-                            duration: 0.4,
-                        },
-                        {
-                            '--success-opacity': 1,
-                            '--success-scale': 1,
-                            duration: 0.25,
-                            delay: 0.25,
-                        },
-                    ],
-                });
-            }
-        });
-    });
-</script>
diff --git a/src/ui/components/organisms/tabs/tabs.css b/src/ui/components/organisms/tabs/tabs.css
@@ -1,6 +1,7 @@
 @layer contact.tabs {
     .contact-tabs__wrapper {
         background-color: var(--neutral-light-4);
+        margin: 2rem 0;
         padding: 3rem 0;
     }