From cb56567f4e18a453aa4ef30161da8763baf204f0 Mon Sep 17 00:00:00 2001
From: Timo Erdelt <timo@unit214.de>
Date: Wed, 29 Nov 2023 16:07:05 +0100
Subject: [PATCH 1/2] feat(boxes): improve animation of cyan box in header

---
 src/components/CyanAmberHeaderBox.tsx | 44 +++++++++++++++++++++++++--
 src/components/HeaderAndMainClaim.tsx |  4 +--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/CyanAmberHeaderBox.tsx b/src/components/CyanAmberHeaderBox.tsx
index 4a0d865..4866dfa 100644
--- a/src/components/CyanAmberHeaderBox.tsx
+++ b/src/components/CyanAmberHeaderBox.tsx
@@ -1,7 +1,12 @@
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 
 import { cn } from '@/lib/utils'
 
+const initBottomRightX = 1333.88
+const initBottomRightY = 777.16
+const initBottomLeftX = 90.69
+const initBottomLeftY = 850
+
 export default function CyanAmberHeaderBox({
   children,
   className,
@@ -9,11 +14,46 @@ export default function CyanAmberHeaderBox({
   children: ReactNode
   className: string
 }) {
+  const [bottomRightX, setBottomRightX] = useState(initBottomRightX)
+  const [bottomRightY, setBottomRightY] = useState(initBottomRightY)
+  const [bottomLeftX, setBottomLeftX] = useState(initBottomLeftX)
+  const [bottomLeftY, setBottomLeftY] = useState(initBottomLeftY)
+
+  useEffect(() => {
+    let angle1 = 0,
+      angle2 = 0
+
+    // Idea: Let bottom corners rotate in circles with different radios and different cycling time
+    function updateClipPath() {
+      const radius1 = 15 // radius of the circle of bottom right
+      const radius2 = 10 // radius of the circle of bottom left
+
+      // Calculate new positions for the bottom corners and update clip path
+      setBottomRightX(initBottomRightX + Math.cos(angle1) * radius1)
+      setBottomRightY(initBottomRightY + Math.sin(angle1) * radius1)
+      setBottomLeftX(initBottomLeftX + Math.cos(angle2) * radius2)
+      setBottomLeftY(initBottomLeftY + Math.sin(angle2) * radius2)
+
+      // Update angles for asynchronous movement
+      angle1 += 0.00413
+      angle2 -= 0.00652 // Different increment for asynchronous movement
+
+      requestAnimationFrame(updateClipPath)
+    }
+
+    updateClipPath()
+  }, [])
+
   return (
     <div className={cn('-top-[540px] z-10 lg:-top-[690px]', className)}>
       <div className='flex w-full justify-center'>
         <div className='bg-primary-amber custom-angled-rectangle-amber-header absolute h-[700px] w-full justify-center lg:h-[824px]' />
-        <div className='bg-primary-cyan custom-angled-rectangle-cyan-animated-mobile lg:custom-angled-rectangle-cyan-animated h-[700px] w-full lg:h-[850px] lg:w-[1300px]'>
+        <div
+          className='bg-primary-cyan h-[700px] w-full px-[50px] pb-[50px] lg:h-[900px] lg:w-[1400px]'
+          style={{
+            clipPath: `polygon(50px 0px, 1350px 0px, ${bottomRightX}px ${bottomRightY}px, ${bottomLeftX}px ${bottomLeftY}px)`,
+          }}
+        >
           {children}
         </div>
       </div>
diff --git a/src/components/HeaderAndMainClaim.tsx b/src/components/HeaderAndMainClaim.tsx
index a484a7b..5204ac5 100644
--- a/src/components/HeaderAndMainClaim.tsx
+++ b/src/components/HeaderAndMainClaim.tsx
@@ -56,7 +56,7 @@ export default function HeaderAndMainClaim() {
         {headerOpacity > 0 && (
           <Header
             opacity={headerOpacity}
-            className='absolute bottom-10'
+            className='absolute bottom-[90px]'
             clickOnLogoBehaviour='scrollUp'
             clickOnContactBehaviour='scrollDown'
           />
@@ -65,7 +65,7 @@ export default function HeaderAndMainClaim() {
         {scrollDownButtonOpacity > 0 && (
           <button
             style={{ opacity: scrollDownButtonOpacity }}
-            className='absolute bottom-12 flex max-w-[1300px] flex-col items-center gap-1 pl-6 text-white lg:gap-4 lg:pl-24'
+            className='absolute bottom-[98px] flex max-w-[1300px] flex-col items-center gap-1 pl-6 text-white lg:gap-4 lg:pl-24'
             onClick={scrollDown}
           >
             <div className='text-xs font-light [writing-mode:vertical-lr]'>

From e9f50d699ef414a9db95affc7df7d50cd8072869 Mon Sep 17 00:00:00 2001
From: Timo Erdelt <timo@unit214.de>
Date: Wed, 29 Nov 2023 16:08:45 +0100
Subject: [PATCH 2/2] fix: typo

---
 src/components/CyanAmberHeaderBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CyanAmberHeaderBox.tsx b/src/components/CyanAmberHeaderBox.tsx
index 4866dfa..0fa1d93 100644
--- a/src/components/CyanAmberHeaderBox.tsx
+++ b/src/components/CyanAmberHeaderBox.tsx
@@ -23,7 +23,7 @@ export default function CyanAmberHeaderBox({
     let angle1 = 0,
       angle2 = 0
 
-    // Idea: Let bottom corners rotate in circles with different radios and different cycling time
+    // Idea: Let bottom corners rotate in circles with different radius and different cycling time
     function updateClipPath() {
       const radius1 = 15 // radius of the circle of bottom right
       const radius2 = 10 // radius of the circle of bottom left