Merge branch 'feature/design-sprint-landing'

v2/next.config.js

@@ -3,8 +3,8 @@ const nextConfig = {
     async redirects() {
         return [
           {
-            source: '/',
-            destination: '/home',
+            source: '/home',
+            destination: '/',
             permanent: true,
           },
         ];

v2/src/Components/Button/Button.tsx

@@ -1,56 +1,78 @@
 import { cva, VariantProps } from "class-variance-authority";
 import React from "react";
 
-const button = cva(["flex", "items-center", "justify-between", "gap-12"], {
-  variants: {
-    color: {
-      primary: [
-        "bg-primary-500",
-        "text-white",
-        "hover:bg-primary-700",
-        "active:bg-primary-800",
-      ],
-      // **or**
-      // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
-      white: [
-        "bg-gray-100",
-        "text-primary",
-        "hover:bg-gray-300",
-        "active:bg-gray-400",
-      ],
+const button = cva(
+  ["inline-flex", "items-center", "justify-between", "gap-12"],
+  {
+    variants: {
+      color: {
+        primary: [
+          "bg-primary-500",
+          "text-white",
+          "hover:bg-primary-700",
+          "active:bg-primary-800",
+        ],
+        // **or**
+        // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
+        white: [
+          "bg-gray-100",
+          "text-primary",
+          "hover:bg-gray-300",
+          "active:bg-gray-400",
+        ],
+      },
+      size: {
+        small: ["px-16", "py-4", "text-body5"],
+        medium: ["py-12", "px-20"],
+      },
     },
-    size: {
-      small: ["px-16", "py-4", "text-body5"],
-      medium: ["py-12", "px-20"],
+    defaultVariants: {
+      color: "primary",
+      size: "medium",
     },
-  },
-  defaultVariants: {
-    color: "primary",
-    size: "medium",
-  },
-});
+  }
+);
 
-type HTMLButtonProps = Omit<React.HTMLProps<HTMLButtonElement>, "size">;
+type HTMLButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "size"
+>;
+type HTMLAnchorProps = Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "size"
+>;
 
 type ButtonVariantsProps = VariantProps<typeof button>;
 
-type Props = HTMLButtonProps & ButtonVariantsProps;
+type Props = (HTMLButtonProps & HTMLAnchorProps) & ButtonVariantsProps;
+
+const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
+  ({ className, color, size, children, type, href, ...restProps }, ref) => {
+    const isAnchor = !!href;
 
-const Button = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    { className, color, size, children, type = "button", ...restProps },
-    ref
-  ) => {
-    return (
-      <button
-        type={type as any}
-        ref={ref}
-        className={`${button({ color, size })} ${className}`}
-        {...restProps}
-      >
-        {children}
-      </button>
-    );
+    if (isAnchor) {
+      return (
+        <a
+          href={href}
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          className={`${button({ color, size })} ${className}`}
+          {...restProps}
+        >
+          {children}
+        </a>
+      );
+    } else {
+      return (
+        <button
+          type={type}
+          ref={ref as React.Ref<HTMLButtonElement>}
+          className={`${button({ color, size })} ${className}`}
+          {...restProps}
+        >
+          {children}
+        </button>
+      );
+    }
   }
 );
 

v2/src/Components/Home/DesignSprints.tsx

@@ -0,0 +1,150 @@
+"use client";
+import React, { useRef } from "react";
+import Image from "next/image";
+import { CgFileDocument } from "react-icons/cg";
+import { FiChevronRight, FiSettings } from "react-icons/fi";
+import { IoEyeOutline, IoFingerPrintOutline } from "react-icons/io5";
+import { AiOutlineScan, AiOutlineWallet, AiOutlineSwap } from "react-icons/ai";
+import { useScroll, motion, useTransform, MotionValue } from "framer-motion";
+
+import Container from "@/Components/Container/Container";
+import { condensedHeadings, serifText } from "@/assets/fonts";
+import Button from "@/Components/Button/Button";
+
+export default function DesignSprint() {
+  const container = useRef<HTMLDivElement>(null);
+
+  const { scrollYProgress } = useScroll({
+    target: container,
+  });
+
+  return (
+    <section
+      className="lg:min-h-[min(500vh,6000px)] relative py-80 isolate z-10"
+      ref={container}
+    >
+      <div className="relative lg:sticky top-0 overflow-hidden">
+        <Container className="relative">
+          <div className="flex max-lg:flex-wrap justify-between gap-40 min-h-[100vh] w-full items-center ">
+            <div className="max-w-[480px] p-16 rounded-12">
+              <h2
+                className={`${condensedHeadings.className} text-primary text-h2 uppercase leading-none lg:text-[48px] font-light`}
+              >
+                Refine your Vision, Brand <span className="amp">&amp;</span>{" "}
+                Product with Measurable Results
+              </h2>
+              <p
+                className={`${serifText.className} italic text-body2 lg:text-body1`}
+              >
+                A small team that makes big impact... We partner with founders
+                and companies on the bleeding edge that don't want to waste
+                time.
+              </p>
+              <Button
+                className="mt-40 max-lg:w-full"
+                href="https://ch234lt3std.typeform.com/to/OCi31Zif"
+                target="_blank"
+              >
+                <CgFileDocument /> Get in touch <FiChevronRight />
+              </Button>
+            </div>
+            <div className="grid lg:grid-cols-2 lg:pt-64 gap-32">
+              <ul className="flex flex-col gap-32">
+                {sprints.slice(0, 3).map((sprint, i) => (
+                  <ResearchCard
+                    key={sprint.title}
+                    sprint={sprint}
+                    index={i}
+                    scrollYProgress={scrollYProgress}
+                  />
+                ))}
+              </ul>
+              <ul className="flex flex-col gap-32 lg:mt-64">
+                {sprints.slice(3).map((sprint, i) => (
+                  <ResearchCard
+                    key={sprint.title}
+                    sprint={sprint}
+                    index={i + 3}
+                    scrollYProgress={scrollYProgress}
+                  />
+                ))}
+              </ul>
+            </div>
+          </div>
+        </Container>
+      </div>
+    </section>
+  );
+}
+
+function ResearchCard({
+  sprint,
+  scrollYProgress,
+  index,
+}: {
+  sprint: (typeof sprints)[0];
+  scrollYProgress: MotionValue<number>;
+  index: number;
+}) {
+  const segmentLength = 1 / sprints.length;
+  const segmentStart = segmentLength * index;
+  const segmentEnd = segmentStart + segmentLength;
+
+  const opacity = useTransform(
+    scrollYProgress,
+    [segmentStart, segmentEnd],
+    [0, 1]
+  );
+
+  const y = useTransform(scrollYProgress, [segmentStart, segmentEnd], [200, 0]);
+
+  return (
+    <motion.li
+      initial={{ opacity: 0, y: 200 }}
+      style={{ opacity, y }}
+      key={sprint.title}
+      className={`p-16 min-w-[192px] border border-gray-200 bg-white flex flex-col gap-12`}
+    >
+      <sprint.icon />
+      <p className="text-body3 text-gray-800 uppercase font-normal">
+        {sprint.title}
+      </p>
+      <p className={`text-body5 text-gray-800 leading-6`}>
+        {sprint.description}
+      </p>
+    </motion.li>
+  );
+}
+
+const sprints = [
+  {
+    title: "Brand Sprint",
+    icon: IoFingerPrintOutline,
+    description: "Creating your unique brand identity",
+  },
+  {
+    title: "Product Design Sprint",
+    icon: AiOutlineScan,
+    description: "Build winning products",
+  },
+  {
+    title: "Vision Sprint",
+    icon: IoEyeOutline,
+    description: "Crafting the big picture",
+  },
+  {
+    title: "Freedom Tech Sprint",
+    icon: AiOutlineWallet,
+    description: "Decentralised innovation",
+  },
+  {
+    title: "AI Sprint",
+    icon: AiOutlineSwap,
+    description: "Exploring ai for enhanced ux",
+  },
+  {
+    title: "Process Sprint",
+    icon: FiSettings,
+    description: "Optimising workflow efficiently",
+  },
+];

v2/src/app/home/Hero.tsx → v2/src/Components/Home/Hero.tsx

@@ -58,7 +58,7 @@ export default function Hero() {
             staggerChildren: 0.6,
             delayChildren: 2.5,
           }}
-          className="uppercase ps-16 md:ps-42 text-[40px] md:text-[72px] leading-[1.2]"
+          className={`uppercase ps-16 md:ps-42 text-[40px] md:text-[72px] leading-[1.2] font-thin`}
         >
           <motion.span className="inline-block" variants={headTextWords}>
             We

v2/src/app/home/ResearchLab.tsx → v2/src/Components/Home/ResearchLab.tsx

@@ -105,7 +105,7 @@ function ResearchCard({
       initial={{ opacity: 0, y: 200 }}
       style={{ opacity, y }}
       key={research.title}
-      className={`p-16 min-w-[192px] border border-gray-800 bg-white border-dashed flex flex-col gap-12`}
+      className={`p-16 min-w-[192px] border border-gray-200 bg-white flex flex-col gap-12`}
     >
       <research.icon />
       <p className="text-body3 text-gray-800 uppercase font-normal">