Merge pull request #9 from 0xPlaygrounds/fix/align-wave-animation-to-product-image

fix: align-wave-animation-to-product-image

Author: mateobelanger

src/app/page.tsx

@@ -1,7 +1,6 @@
 import { CreateCombine } from '@/components/createCombine';
 import { DoThingsDifferently } from '@/components/doThingsDifferently';
 import { Footer } from '@/components/footer';
-import { Header } from '@/components/header';
 import { MeetTeam } from '@/components/meetTeam';
 import { Navbar } from '@/components/navbar';
 import { ProductAnimation } from '@/components/productAnimation';
@@ -11,7 +10,6 @@ export default function Home() {
   return (
     <div className="flex flex-col">
       <Navbar />
-      <Header />
       <ProductAnimation />
       <CreateCombine />
       <ThreePlatforms />

src/components/analytics/PostHogProvider.tsx

@@ -21,6 +21,7 @@ export function PostHogClientProvider({ children }: Props) {
 
     posthog.init(key, {
       api_host: '/panopticon',
+      ui_host: 'https://us.i.posthog.com',
       capture_pageview: true,
       autocapture: true,
     });

src/components/meetTeam.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import { useState } from 'react';
 
 type TeamMember = {
   name: string;
@@ -14,10 +15,14 @@ const team: TeamMember[] = [
   { name: 'Stopher', title: 'CTO', image: '/assets/team/stopher.webp' },
   {
     name: 'Marie',
-    title: 'Lead Developer',
+    title: 'Lead Engineer',
     image: '/assets/team/garance.webp',
   },
-  { name: 'Mateo', title: 'Product Manager', image: '/assets/team/mateo.webp' },
+  {
+    name: 'Mateo',
+    title: 'Product Manager & Engineer',
+    image: '/assets/team/mateo.webp',
+  },
   {
     name: 'Mochan',
     title: 'Founding Engineer',
@@ -55,15 +60,39 @@ const team: TeamMember[] = [
   },
 ];
 
-const TeamMemberCard = ({ name, title, image }: TeamMember) => {
+type TeamMemberCardProps = TeamMember & {
+  isActive: boolean;
+  onActivate: () => void;
+};
+
+const TeamMemberCard = ({
+  name,
+  title,
+  image,
+  isActive,
+  onActivate,
+}: TeamMemberCardProps) => {
   return (
-    <div className="relative w-[240px] h-[288px] overflow-hidden rounded-lg group flex-shrink-0">
+    <div
+      className="relative w-[240px] h-[288px] overflow-hidden rounded-lg group flex-shrink-0 cursor-pointer"
+      onClick={onActivate}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onActivate();
+        }
+      }}
+    >
       <Image
         src={image || '/placeholder.svg'}
         alt={name}
         width={240}
         height={288}
-        className="w-full h-full object-cover filter grayscale transition duration-500 group-hover:grayscale-0"
+        className={`w-full h-full object-cover filter transition duration-500 ${
+          isActive ? 'grayscale-0' : 'grayscale'
+        } group-hover:grayscale-0`}
         draggable={false}
         onDragStart={(e) => e.preventDefault()}
       />
@@ -76,6 +105,12 @@ const TeamMemberCard = ({ name, title, image }: TeamMember) => {
 };
 
 export const MeetTeam = () => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const handleMemberToggle = (index: number) => {
+    setActiveIndex((prev) => (prev === index ? null : index));
+  };
+
   return (
     <div className="flex flex-col gap-y-[80px] pt-32 bg-gradient-to-b from-[#0A0A0A] from-65% to-[#16161A]">
       <div className="flex text-[28px] md:text-[52px] text-center flex-col px-4 md:px-[112px]">
@@ -95,6 +130,8 @@ export const MeetTeam = () => {
               title={member.title}
               image={member.image}
               name={member.name}
+              isActive={activeIndex === i}
+              onActivate={() => handleMemberToggle(i)}
             />
           ))}
         </div>

src/components/productAnimation.tsx

@@ -2,25 +2,59 @@ import Image from 'next/image';
 
 export const ProductAnimation = () => {
   return (
-    <div className="flex flex-col p-4 pt-6 md:pt-[64px] items-center justify-center h-full relative">
+    <div className="relative">
+      {/* Video background - extends beyond content to show the wave */}
       <video
         src="/assets/videoanimation.mp4"
         autoPlay
         loop
         muted
         playsInline
-        className="absolute top-[-10rem] md:top-[-45%] w-full h-full md:h-screen object-cover object-top z-0"
+        className="absolute inset-x-0 top-0 w-full object-contain z-0"
+        style={{
+          height: 'calc(130% + 5vw)',
+          objectPosition: 'center 65%',
+        }}
       />
+
+      {/* Top gradient fade */}
       <div className="pointer-events-none absolute top-0 left-0 w-full h-8 bg-gradient-to-b from-[#010101] to-transparent z-10" />
-      <Image
-        src="/assets/header-product.webp"
-        alt="Product header"
-        width={800}
-        height={400}
-        sizes="(min-width: 768px) 800px, 100vw"
-        className="object-contain w-full md:w-auto max-w-[800px] relative z-10"
+
+      {/* Content container */}
+      <div className="relative z-10 flex flex-col items-center pt-[96px] px-4 md:px-0">
+        {/* Header text */}
+        <div className="flex w-full items-center justify-center gap-y-6 flex-col">
+          <div
+            className="flex text-center leading-none flex-col"
+            style={{ fontSize: 'clamp(2.5rem, 12vw, 5.625rem)' }}
+          >
+            <span>
+              Open and <span className="font-ivypresto italic">fearless</span>.
+            </span>
+            <span>This is AI&apos;s future.</span>
+          </div>
+          <span className="text-[18px] text-[#D4D4D4]">
+            Redefining how AI is built. Open to all, and fast as ever.
+          </span>
+        </div>
+
+        {/* Product image */}
+        <div className="pt-6 md:pt-[64px] pb-8 md:pb-16">
+          <Image
+            src="/assets/header-product.webp"
+            alt="Product header"
+            width={800}
+            height={400}
+            className="object-contain w-full md:w-auto"
+          />
+        </div>
+      </div>
+
+      {/* Bottom gradient fade - aligned with video bottom */}
+      <div
+        className="pointer-events-none absolute inset-x-0 w-full h-32 bg-gradient-to-t from-[#010101] to-transparent z-10"
+        style={{ top: 'calc(130% + 5vw - 8rem)' }}
       />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 md:bottom-auto md:top-[calc(100vh-128px)] w-full h-32 bg-gradient-to-t from-[#010101] to-transparent z-10" />
     </div>
   );
 };