From 770307c591601f3e84d12ea5f31a3722f0354629 Mon Sep 17 00:00:00 2001
From: nyomansunima <nyomansunima@gmail.com>
Date: Mon, 24 Apr 2023 16:08:28 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=98=8E=20fix:=20magnetic,=20add=20pro?=
 =?UTF-8?q?ps=20to=20disable=20the=20magnetic=20effect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/components/buttons/outline-button.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/components/buttons/outline-button.tsx b/apps/frontend/components/buttons/outline-button.tsx
index ca8c967..e8685f0 100644
--- a/apps/frontend/components/buttons/outline-button.tsx
+++ b/apps/frontend/components/buttons/outline-button.tsx
@@ -12,6 +12,7 @@ interface OutlineButtonProps {
   type?: string
   onClick?: () => void
   form?: string
+  magnetic?: any
 }
 
 /**
@@ -30,6 +31,7 @@ const OutlineButton: FunctionComponent<OutlineButtonProps> = ({
   onClick,
   form,
   isProcess,
+  magnetic,
 }): JSX.Element => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const backdropRef = useRef<HTMLSpanElement>(null)
@@ -122,7 +124,7 @@ const OutlineButton: FunctionComponent<OutlineButtonProps> = ({
   return (
     <button
       ref={buttonRef}
-      data-cursor-magnetic
+      data-cursor-magnetic={magnetic}
       data-cursor-stick
       disabled={disabled}
       type={type as any}

From 274a7ae238b440cc1bc41d62a0f9fefaaaf94b70 Mon Sep 17 00:00:00 2001
From: nyomansunima <nyomansunima@gmail.com>
Date: Mon, 24 Apr 2023 16:09:26 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=98=8E=20fix:=20magnetic=20effect,=20?=
 =?UTF-8?q?give=20the=20dynamc=20amount=20for=20magnetic=20effect=20using?=
 =?UTF-8?q?=20props=20dataset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/components/common/fancy-cursor.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/components/common/fancy-cursor.tsx b/apps/frontend/components/common/fancy-cursor.tsx
index 23c253a..7a3857f 100644
--- a/apps/frontend/components/common/fancy-cursor.tsx
+++ b/apps/frontend/components/common/fancy-cursor.tsx
@@ -442,14 +442,18 @@ const FancyCursor: FunctionComponent<FancyCursorProps> = ({
       el.addEventListener('mousemove', (e) => {
         const areatarget = el as HTMLElement
         const type = areatarget.dataset['cursorMagnetic'] as string
+        const amount = parseFloat(
+          areatarget.dataset['cursorMagneticAmount'] || '.24'
+        )
+
         if (type == 'fixed') {
           gsap.to(areatarget, {
             x:
               (e.clientX - areatarget.offsetLeft - areatarget.clientWidth / 2) *
-              0.24,
+              amount,
             y:
               (e.clientY - areatarget.offsetTop - areatarget.clientHeight / 2) *
-              0.24,
+              amount,
             duration: magneticAnimationDuration,
             ease: magneticAnimationEase,
           })
@@ -459,12 +463,12 @@ const FancyCursor: FunctionComponent<FancyCursorProps> = ({
               (e.clientX -
                 (areatarget.offsetLeft - window.scrollX) -
                 areatarget.clientWidth / 2) *
-              0.24,
+              amount,
             y:
               (e.clientY -
                 (areatarget.offsetTop - window.scrollY) -
                 areatarget.clientHeight / 2) *
-              0.24,
+              amount,
             duration: magneticAnimationDuration,
             ease: magneticAnimationEase,
           })

From 90ed896a3652b0c244c25b9fd5939280fc4388f0 Mon Sep 17 00:00:00 2001
From: nyomansunima <nyomansunima@gmail.com>
Date: Mon, 24 Apr 2023 16:09:57 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=98=8E=20fix:=20magnetic,=20chnage=20?=
 =?UTF-8?q?the=20magnetic=20value=20amount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/components/forms/pill-option.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/frontend/components/forms/pill-option.tsx b/apps/frontend/components/forms/pill-option.tsx
index e1886c6..c52e0f5 100644
--- a/apps/frontend/components/forms/pill-option.tsx
+++ b/apps/frontend/components/forms/pill-option.tsx
@@ -68,6 +68,7 @@ const PillOption: FunctionComponent<PillOptionProps> = ({
       onClick={onSelect}
       data-cursor-stick
       data-cursor-magnetic
+      data-cursor-magnetic-amount=".02"
       data-cursor-exclusion
       className={`${styles.option} ${className}`}
     >

From 9d796d3feb071af231296788224626b084d15d57 Mon Sep 17 00:00:00 2001
From: nyomansunima <nyomansunima@gmail.com>
Date: Mon, 24 Apr 2023 16:10:51 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=8E=89=20fix:=20social,=20adding=20so?=
 =?UTF-8?q?cial=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/pages/contact.tsx | 37 ++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/pages/contact.tsx b/apps/frontend/pages/contact.tsx
index daf5e10..477f6ba 100644
--- a/apps/frontend/pages/contact.tsx
+++ b/apps/frontend/pages/contact.tsx
@@ -6,7 +6,7 @@ import {
   TextInput,
 } from '@components/forms'
 import { GeneralLayout } from '@components/layouts'
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 import Head from 'next/head'
 import { useForm } from 'react-hook-form'
 import { NextPageWithLayout } from '~/types/app'
@@ -18,6 +18,7 @@ import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import contactService from '@lib/services/contact-service'
 import { gsap } from 'gsap'
+import commonService from '@lib/services/common-service'
 
 const interests = [
   'Site from scratch',
@@ -52,6 +53,11 @@ const ContactPage: NextPageWithLayout = (): JSX.Element => {
   const [selectedInterests, setSelectedInterests] = useState<string[]>([])
   const cursor = useCursor()
   const mainRef = useRef<HTMLElement>(null)
+  const socialsQuery = useQuery(['socials'], commonService.loadAllSocialMedia, {
+    onSuccess: () => {
+      cursor.reload()
+    },
+  })
 
   const sendContact = useMutation(contactService.sendContact, {
     onSuccess: () => {
@@ -96,12 +102,21 @@ const ContactPage: NextPageWithLayout = (): JSX.Element => {
         y: 80,
         opacity: 0,
       })
+
+      if (socialsQuery.data) {
+        gsap.from('.socials li', {
+          left: -100,
+          ease: 'back',
+          stagger: 0.25,
+          duration: 1.5,
+        })
+      }
     }, mainRef)
 
     cursor.reload()
 
     return () => ctx.revert()
-  }, [])
+  }, [socialsQuery.data])
 
   return (
     <>
@@ -121,7 +136,7 @@ const ContactPage: NextPageWithLayout = (): JSX.Element => {
               data-cursor-size="200"
               data-cursor-exclusion
             >
-              Hey, tell me about anything 🖐️
+              Hey, tell me about anything 🎉
             </h1>
 
             <Form
@@ -174,6 +189,22 @@ const ContactPage: NextPageWithLayout = (): JSX.Element => {
             </Form>
           </div>
         </section>
+
+        {socialsQuery.data && (
+          <ul className={`${styles.socials} socials`}>
+            {socialsQuery.data.map(({ iconCode, url }, index) => (
+              <li
+                data-cursor-stick
+                data-cursor-exclusion
+                data-cursor-size="80"
+                key={index}
+                onClick={() => window.open(url)}
+              >
+                <i className={iconCode}></i>
+              </li>
+            ))}
+          </ul>
+        )}
       </main>
     </>
   )

From 18e0cdacd4e2eb3011b12cc6959243b75ab6b7e0 Mon Sep 17 00:00:00 2001
From: nyomansunima <nyomansunima@gmail.com>
Date: Mon, 24 Apr 2023 16:11:37 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8D=80=20styles:=20update=20the=20com?=
 =?UTF-8?q?ponent=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/components/forms/input.module.scss |  4 +--
 .../components/forms/pill-option.module.scss  |  2 +-
 .../frontend/styles/pages/contact.module.scss | 25 +++++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/styles/components/forms/input.module.scss b/apps/frontend/styles/components/forms/input.module.scss
index b930a13..2bdd1e7 100644
--- a/apps/frontend/styles/components/forms/input.module.scss
+++ b/apps/frontend/styles/components/forms/input.module.scss
@@ -16,8 +16,8 @@
     padding: size(10) size(6);
     border: transparent;
     border-bottom: 1px solid var(--clr-gray-200);
-    font-size: fontSize(3xl);
-    font-weight: normal;
+    font-size: fontSize(4xl);
+    font-weight: 500;
     transition: all 0.7s ease-in-out;
     font-family: var(--font-sans);
 
diff --git a/apps/frontend/styles/components/forms/pill-option.module.scss b/apps/frontend/styles/components/forms/pill-option.module.scss
index a189d1f..d967040 100644
--- a/apps/frontend/styles/components/forms/pill-option.module.scss
+++ b/apps/frontend/styles/components/forms/pill-option.module.scss
@@ -9,7 +9,7 @@
   overflow: hidden;
   background: transparent;
   font-size: fontSize(lg);
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1;
 
   .backdrop {
diff --git a/apps/frontend/styles/pages/contact.module.scss b/apps/frontend/styles/pages/contact.module.scss
index 696891c..59314e5 100644
--- a/apps/frontend/styles/pages/contact.module.scss
+++ b/apps/frontend/styles/pages/contact.module.scss
@@ -46,8 +46,33 @@
           margin-top: size(14);
           display: flex;
           justify-content: flex-end;
+          position: relative;
         }
       }
     }
   }
+
+  .socials {
+    position: fixed;
+    left: size(10);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: size(8);
+    list-style: none;
+    margin: auto 0;
+
+    li {
+      display: flex;
+      width: size(10);
+      height: size(10);
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      i {
+        font-size: fontSize(3xl);
+      }
+    }
+  }
 }