Blue starterkit animation

app/(pages)/(hackers)/_components/StarterKit/Resources/DesignDevResources.tsx

@@ -8,14 +8,21 @@ import { Responsibilities } from './Responsibilities';
 import { Tips } from './Tips';
 
 // Icons
-import writing_sign from '@public/hackers/starter-kit/resources/tabler_writing-sign.svg';
-import presentation_analytics from '@public/hackers/starter-kit/resources/tabler_presentation-analytics.svg';
-import sparkles from '@public/hackers/starter-kit/resources/tabler_sparkles-2.svg';
-import figma from '@public/hackers/starter-kit/resources/tabler_brand-figma.svg';
+import dark_writing_sign from '@public/hackers/starter-kit/resources/tabler_dark-writing-sign.svg';
+import dark_presentation_analytics from '@public/hackers/starter-kit/resources/tabler_dark-presentation-analytics.svg';
+import dark_sparkles from '@public/hackers/starter-kit/resources/tabler_dark-sparkles-2.svg';
+import dark_figma from '@public/hackers/starter-kit/resources/tabler_dark-brand-figma.svg';
+import dark_github from '@public/hackers/starter-kit/resources/tabler_dark-brand-github.svg';
+import dark_desktop_code from '@public/hackers/starter-kit/resources/tabler_dark-device-desktop-code.svg';
+import dark_message_chatbot from '@public/hackers/starter-kit/resources/tabler_dark-message-chatbot.svg';
 
-import github from '@public/hackers/starter-kit/resources/tabler_brand-github.svg';
-import desktop_code from '@public/hackers/starter-kit/resources/tabler_device-desktop-code.svg';
-import message_chatbot from '@public/hackers/starter-kit/resources/tabler_message-chatbot.svg';
+import light_writing_sign from '@public/hackers/starter-kit/resources/tabler_light-writing-sign.svg';
+import light_presentation_analytics from '@public/hackers/starter-kit/resources/tabler_light-presentation-analytics.svg';
+import light_sparkles from '@public/hackers/starter-kit/resources/tabler_light-sparkles-2.svg';
+import light_figma from '@public/hackers/starter-kit/resources/tabler_light-brand-figma.svg';
+import light_github from '@public/hackers/starter-kit/resources/tabler_light-brand-github.svg';
+import light_desktop_code from '@public/hackers/starter-kit/resources/tabler_light-device-desktop-code.svg';
+import light_message_chatbot from '@public/hackers/starter-kit/resources/tabler_light-message-chatbot.svg';
 
 import text_size from '@public/hackers/starter-kit/resources/tabler_text-size.svg';
 import image_in_picture from '@public/hackers/starter-kit/resources/tabler_image-in-picture.svg';
@@ -42,25 +49,29 @@ export default function DesignDevResources() {
   // Data
   const designer_responsibilities = [
     {
-      icon: writing_sign,
+      dark_icon: dark_writing_sign,
+      light_icon: light_writing_sign,
       title: 'Research problem statement',
       description:
         'A problem statement should include: background, people affected, and the impact of the problem.',
     },
     {
-      icon: figma,
+      dark_icon: dark_figma,
+      light_icon: light_figma,
       title: 'Craft UI/UX visuals',
       description:
         'Create wireframes, mockups, and prototypes that bring the product vision to life.',
     },
     {
-      icon: sparkles,
+      dark_icon: dark_sparkles,
+      light_icon: light_sparkles,
       title: 'Iterate on feedback & refine',
       description:
         'Collaborate with your team, gather insights, and polish the design through multiple iterations.',
     },
     {
-      icon: presentation_analytics,
+      dark_icon: dark_presentation_analytics,
+      light_icon: light_presentation_analytics,
       title: 'Create presentation & pitch',
       description:
         'Be prepared to present design decisions, rationale, and final deliverables to the judges!',
@@ -69,25 +80,29 @@ export default function DesignDevResources() {
 
   const developer_responsibilities = [
     {
-      icon: writing_sign,
+      dark_icon: dark_writing_sign,
+      light_icon: light_writing_sign,
       title: 'Plan out system design',
       description:
         'Figure out what tech stack and technologies you want to use for your product.',
     },
     {
-      icon: github,
+      dark_icon: dark_github,
+      light_icon: light_github,
       title: 'Set up codebase scaffolding',
       description:
         'Create a GitHub repo and initialize the project so your team can collaborate.',
     },
     {
-      icon: message_chatbot,
+      dark_icon: dark_message_chatbot,
+      light_icon: light_message_chatbot,
       title: 'Divide and conquer',
       description:
         'Split the product into features and assign tasks so teammates can build in parallel.',
     },
     {
-      icon: desktop_code,
+      dark_icon: dark_desktop_code,
+      light_icon: light_desktop_code,
       title: 'Build a functioning demo',
       description:
         'Implement core features and ensure you have a working product ready for presentations.',
@@ -160,7 +175,7 @@ export default function DesignDevResources() {
   };
 
   return (
-    <div className="flex flex-col bg-[#D5FDFF] py-[7%] px-[4%] gap-[112px] md:gap-[144px] items-center">
+    <div className="flex flex-col bg-[#D5FDFF] py-[7%] px-[4%] gap-[112px] md:gap-[144px] items-center items-stretch w-full">
       {/** Section 1 */}
       <div id="design-resources">
         <Responsibilities

app/(pages)/(hackers)/_components/StarterKit/Resources/Responsibilities.tsx

@@ -1,14 +1,16 @@
+'use client';
+
 import Image from 'next/image';
 import type { StaticImageData } from 'next/image';
-import { useRef, useState } from 'react';
+import useIdeateScroll from '@hooks/useIdeateScroll';
 
 interface Responsibility {
-  icon: StaticImageData;
+  dark_icon: StaticImageData;
+  light_icon: StaticImageData;
   title: string;
   description: string;
 }
 
-// shi figure out that bar!!!!!!
 export function Responsibilities({
   image,
   title,
@@ -20,47 +22,18 @@ export function Responsibilities({
   responsibilities: Responsibility[];
   reverse: boolean;
 }) {
-  const sectionRef = useRef<HTMLDivElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const [responsibilityIndex] = useState(0);
-  const [scrollPos] = useState(50);
-
-  /*useEffect(() => {
-    const onPageScroll = () => {
-      const section = sectionRef.current.scrollTo();
-      const scrollContainer = scrollRef.current;
-      if (!section) return;
-
-      const rect = section.getBoundingClientRect();
-      const anchorY = window.innerHeight * 0.35;
-      const traveled = anchorY - rect.top;
-      const rawProgress = traveled / Math.max(rect.height, 1);
-      const progress = Math.min(Math.max(rawProgress, 0), 0.999);
-      const nextIndex = Math.floor(progress * responsibilities.length);
-      const clampedIndex = Math.max(0, Math.min(responsibilities.length - 1, nextIndex));
-
-      setResponsibilityIndex(clampedIndex);
-
-      if (scrollContainer) {
-        const maxHeight = scrollContainer.clientHeight;
-        const fillProgress = responsibilities.length > 1 ? clampedIndex / (responsibilities.length - 1) : 0;
-        setScrollPos(fillProgress * maxHeight);
-      }
-    };
-
-    onPageScroll();
-    window.addEventListener("scroll", onPageScroll, { passive: true });
-    //window.addEventListener("resize", onPageScroll);
-
-    return () => {
-      window.removeEventListener("scroll", onPageScroll);
-      //window.removeEventListener("resize", onPageScroll);
-    };
-  }, );//[responsibilities.length]);*/
+  const { sectionRef, scrollRef, responsibilityIndex, scrollPos } =
+    useIdeateScroll({
+      title,
+      responsibilities,
+    });
 
   return (
-    <div ref={sectionRef}>
+    <div
+      ref={sectionRef}
+      id="sectionID"
+      className="w-full self-stretch px-[16px] min-[1250px]:px-[0px]"
+    >
       <p className="opacity-[0.40] text-[16px] font-mono pb-[12px]">IDEATE</p>
       <p className="text-[32px] text-[#1F1F1F] font-semibold">{title}</p>
       <div
@@ -74,10 +47,10 @@ export function Responsibilities({
         <Image
           src={image}
           alt={`${title} image`}
-          className="w-full min-[1250px]:w-[300px] min-[1400px]:w-[440px]"
+          className="w-full min-[1250px]:w-[500px]"
         />
 
-        <div className=" flex flex-row align-middle items-stretch">
+        <div className=" flex flex-row align-middle items-stretch min-[1250px]:w-[700px]">
           <div
             ref={scrollRef}
             className="bg-[#E2E2E2] h-auto outline-[2px] outline-[#E2E2E2] rounded-full overflow-visible relative w-[8px]"
@@ -89,27 +62,41 @@ export function Responsibilities({
           </div>
           <div className="flex gap-[57px] flex-col h-min px-[12px]">
             {responsibilities.map((responsibility, index) => (
-              <div key={index} className="flex flex-col gap-[4px]">
+              <div
+                key={index}
+                id={title + `responsibility-` + index}
+                className="flex flex-col gap-[4px]"
+              >
                 <div className="flex flex-row items-center gap-[4px]">
                   <Image
-                    src={responsibility.icon}
+                    src={
+                      index == responsibilityIndex
+                        ? responsibility.dark_icon
+                        : responsibility.light_icon
+                    }
                     alt={`${responsibility.title} icon`}
-                    className=""
+                    className={`transition-all duration-300 ease-out ${
+                      index == responsibilityIndex
+                        ? 'w-[32px] h-[32px]'
+                        : 'w-[24px] h-[24px]'
+                    }`}
                   />
                   {index == responsibilityIndex ? (
-                    <p className="text-[20px] text-[#1F1F1F] font-semibold">
+                    <p className="text-[20px] text-[#1F1F1F] font-semibold transition-all">
                       {responsibility.title}
                     </p>
                   ) : (
-                    <p className="text-[16px] text-[#ACACB9] font-semibold">
+                    <p className="text-[16px] text-[#ACACB9] font-semibold transition-all">
                       {responsibility.title}
                     </p>
                   )}
                 </div>
-                {index == responsibilityIndex && (
-                  <p className="opacity-[0.65] text-[16px]">
+                {index == responsibilityIndex ? (
+                  <p className="opacity-[0.65] text-[16px] transition-all">
                     {responsibility.description}
                   </p>
+                ) : (
+                  <p className="text-[16px] transition-all"></p>
                 )}
               </div>
             ))}