asdf

kasanestudios · Dec 17, 2023 · d21174c · d21174c
1 parent 97040cf
commit d21174c
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 24 deletions.
diff --git a/app/components/sticky.tsx b/app/components/sticky.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { ReactNode, useEffect, useRef } from "react";
+import { gsap } from "gsap";
+
+export function Sticky({
+  children,
+  wrapperClass,
+  className,
+  start = 0,
+  end = 0,
+  target,
+  id = "sticky",
+  enabled = true,
+  pinType = "fixed",
+  snap,
+}: {
+  pinType?: "fixed" | "transform";
+  children: ReactNode;
+  wrapperClass?: string;
+  className?: string;
+  start?: number;
+  end?: number | string;
+  target?: string;
+  snap:
+    | number
+    | number[]
+    | "labels"
+    | "labelsDirectional"
+    | ScrollTrigger.SnapFunc
+    | ScrollTrigger.SnapVars;
+  id?: string;
+  enabled?: boolean;
+}) {
+  const pinSpacer = useRef<any>();
+  const trigger = useRef<any>();
+  const targetRef = useRef<any>();
+
+  useEffect(() => {
+    if (!enabled || !pinSpacer.current || !trigger.current) return;
+    gsap.set(trigger.current, { clearProps: "all" });
+
+    const timeline = gsap.timeline({
+      scrollTrigger: {
+        id: id,
+        pinType,
+        pinSpacing: false,
+        pinSpacer: pinSpacer.current,
+        trigger: trigger.current,
+        scrub: true,
+        pin: true,
+        start: `top top+=${start}px`,
+        snap,
+        // end: () => {
+        //   const targetRefRect = (
+        //     targetRef.current as HTMLElement
+        //   ).getBoundingClientRect()
+        //   const triggerRect = trigger.current.getBoundingClientRect()
+        //   return `+=${targetRefRect.bottom - triggerRect.bottom + end}`
+        // },
+        end: end || "bottom bottom",
+        invalidateOnRefresh: true,
+      },
+    });
+
+    return () => {
+      timeline.kill();
+    };
+  }, [id, start, enabled, end, pinType]);
+
+  useEffect(() => {
+    if (target) {
+      targetRef.current = document.querySelector(target);
+    } else {
+      targetRef.current = pinSpacer.current.parentNode;
+    }
+  }, [target]);
+
+  return (
+    <div
+      ref={(node) => {
+        pinSpacer.current = node;
+      }}
+      className={wrapperClass}
+    >
+      <div
+        ref={(node) => {
+          trigger.current = node;
+        }}
+        className={className}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/footer.tsx b/app/footer.tsx
@@ -6,29 +6,41 @@ import { useEffect } from "react";
 export const Footer = () => {
   return (
     <>
-      <footer className="h-screen relative z-0 w-full bg-black text-white">
-        <div className="container font-display py-20">
-          <h3 className="xl:text-6xl font-bold">Let&apos;s work together</h3>
-          <h3 className="xl:text-6xl font-bold">and make something great.</h3>
-          <p className="mt-8"> email [email protected]</p>
-        </div>
+      <footer className="h-screen relative z-0 w-full flex flex-col justify-between dark bg-black text-white">
+        <div className="container font-display flex flex-col mt-12 justify-center h-full items-center">
+          <h2 className="text-4xl text-center sm:text-5xl font-medium">
+            Have a project in mind?
+          </h2>
+
+          <a
+            href="mailto:[email protected]"
+            className="contact-container relative text-4xl mt-8 rounded-full border-white  px-12 py-4 group border-2 overflow-hidden"
+          >
+            <div className="ripple bg-white rounded-t-[50%] group-hover:rounded-none w-full h-full translate-y-[101%] absolute delay-[50ms] inset-0 transition-all duration-300 group-hover:-translate-y-0"></div>
 
-        <div className="container flex">
-          {" "}
-          <Link href="https://twitter.com/kasanestudios">
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 1200 1227"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
-                fill="white"
-              />
-            </svg>
-          </Link>
+            <div className="contact-us inline-block after:inline-block relative group-hover:translate-y-[-130%] transition duration-300 after:[content:'Contact_us_→'] after:text-black after:absolute after:top-[130%] after:left-0 ">
+              Contact us &rarr;
+            </div>
+          </a>
+        </div>
+        <div className="container text-center py-8 text-gray-10">
+          <h3 className="text-xs  ">Socials</h3>
+          <div className="flex justify-center mt-4 gap-8">
+            <Link href="https://twitter.com/kasanestudios">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 1200 1227"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </Link>
+          </div>
         </div>
       </footer>
     </>

diff --git a/app/method.tsx b/app/method.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { gsap } from "@/lib/gsap";
+import { useEffect } from "react";
+
+const Method = () => {
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      gsap.fromTo(
+        ".method.container",
+        {
+          scrollTrigger: {
+            trigger: ".method.container",
+            start: "top center",
+            end: "+=500",
+          },
+        },
+        {}
+      );
+    });
+  }, []);
+
+  return (
+    <div className="method container ">
+      <div>
+        <h1 className="text-8xl">Method</h1>
+
+        <p className="text-lg mt-8">
+          We believe that design and development are inseparable, and that the
+          best products are made when the two are considered together. <br />
+        </p>
+      </div>
+    </div>
+  );
+};
+export default Method;
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,6 +4,7 @@ import Logo from "./components/logo";
 import { Hero } from "./hero";
 import { Teto } from "./teto";
 import Works from "./works";
+import Method from "./method";
 
 export default function Home() {
   return (
@@ -47,6 +48,8 @@ export default function Home() {
           <li>Product design</li>
         </ul>
       </div>
+
+    <Method />
     </main>
   );
 }

diff --git a/app/works.tsx b/app/works.tsx
@@ -62,8 +62,9 @@ const Project = ({
         height={500}
       />
 
-      <div className="text-lg mt-4 font-semibold font-display">
-        {name} <span className="text-gray-11 font-normal">- {type}</span>
+      <div className="text-2xl mt-4 font-semibold font-display">
+        {name}{" "}
+        <span className="text-gray-11 font-normal text-lg">- {type}</span>
       </div>
       <div className="text-gray-11 mt-1">{desc}</div>
     </div>