🎨 style: Hero Section Updates and ContainerScroll Refactor (#177)

components/home/Hero.tsx

@@ -1,13 +1,16 @@
 import React from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import { ContainerScroll } from '@/components/ui/container-scroll-animation'
 import { CardBody, CardContainer, CardItem } from '../ui/3d-card'
 import { HoverBorderGradient } from '../ui/hover-border-gradient'
+import DemoImageMobileLight from './img/demo_mobile_light.png'
+import DemoImageMobileDark from './img/demo_mobile_dark.png'
 import RepoOfTheDay from '@/components/svg/RepoOfTheDay'
 import { HomeSection } from './components/HomeSection'
 import RossIndex from '@/components/svg/RossIndex'
-import DemoImage from './img/demo.png'
-import Image from 'next/image'
+import DemoImageLight from './img/demo_light.png'
+import DemoImageDark from './img/demo_dark.png'
 
 const HERO_TITLE = {
   firstPart: 'Unify',
@@ -42,18 +45,18 @@ const HeroTitle = React.memo(() => (
 ))
 
 const HeroDescription = React.memo(() => (
-  <span className="mt-4 text-primary/70 text-lg lg:text-2xl md:text-balance tracking-wide text-center p-2 lg:p-0">
+  <span className="mt-4 text-primary/70 text-base md:text-lg lg:text-2xl tracking-wide text-center p-2 lg:p-0">
     <span className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
       LibreChat
     </span>
     {HERO_DESCRIPTION}
     <div className="flex justify-center mt-4">
-      <div className="w-[40rem] h-20 relative">
+      <div className="w-full max-w-md lg:max-w-lg xl:max-w-xl h-20 relative">
         {/* Gradients */}
-        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
-        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
-        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
-        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
       </div>
     </div>
   </span>
@@ -83,18 +86,6 @@ const HeroLinks = React.memo(() => (
         <span>Try demo</span>
       </HoverBorderGradient>
     </div>
-    {/* <CardContainer className="inter-var">
-      <Link href={GITHUB_LINK}>
-        <CardBody className="bg-transparent w-auto h-auto px-12">
-          <CardItem
-            translateZ="100"
-            className="cursor-pointer shadow-2xl dark:hover:shadow-emerald-500/[0.1]"
-          >
-            <img alt="LibreChat Github stars" src={GITHUB_STARS_IMG} />
-          </CardItem>
-        </CardBody>
-      </Link>
-    </CardContainer> */}
     <CardContainer className="inter-var">
       <Link href={ROSS_INDEX_LINK}>
         <CardBody className="bg-transparent w-full h-full px-12">
@@ -113,20 +104,48 @@ const HeroLinks = React.memo(() => (
 export function Hero() {
   return (
     <HomeSection>
-      <div className="flex flex-col items-center justify-center gap-2 md:min-h-[calc(60vh-100px)] lg:py-20">
+      <div className="flex flex-col items-center justify-center gap-4 sm:gap-6 md:gap-8 mt-4 md:min-h-[calc(60vh-100px)] lg:py-20 px-4">
         <HeroTitle />
         <HeroDescription />
         <HeroLinks />
-        <ContainerScroll>
+        {/* Desktop */}
+        <ContainerScroll className="hidden md:block">
           <Image
-            src={DemoImage}
-            alt="LibreChat UI"
+            src={DemoImageDark}
+            alt="LibreChat UI Dark"
             height={800}
             width={1600}
-            className="mx-auto rounded-2xl object-cover object-left-top"
+            className="dark:block hidden mx-auto rounded-2xl object-cover object-left-top w-full max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl"
+            draggable={false}
+          />
+          <Image
+            src={DemoImageLight}
+            alt="LibreChat UI Light"
+            height={800}
+            width={1600}
+            className="block dark:hidden mx-auto rounded-2xl object-cover object-left-top w-full max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl"
             draggable={false}
           />
         </ContainerScroll>
+        {/* Mobile */}
+        <div className="block md:hidden">
+          <Image
+            src={DemoImageMobileDark}
+            alt="LibreChat UI Dark Mobile"
+            height={400}
+            width={800}
+            className="dark:block hidden mx-auto rounded-2xl object-cover object-left-top w-full max-w-sm"
+            draggable={false}
+          />
+          <Image
+            src={DemoImageMobileLight}
+            alt="LibreChat UI Light Mobile"
+            height={400}
+            width={800}
+            className="block dark:hidden mx-auto rounded-2xl object-cover object-left-top w-full max-w-sm"
+            draggable={false}
+          />
+        </div>
       </div>
     </HomeSection>
   )

components/ui/container-scroll-animation.tsx

@@ -1,13 +1,20 @@
 import React, { useRef } from 'react'
 import { useScroll, useTransform, motion, MotionValue, useSpring } from 'framer-motion'
 
-export const ContainerScroll = ({ children }: { children: React.ReactNode }) => {
+interface ContainerScrollProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const ContainerScroll: React.FC<ContainerScrollProps> = ({ children, className = '' }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const { scrollYProgress } = useScroll({
     target: containerRef,
     offset: ['start end', 'center start'],
   })
 
+  console.log(scrollYProgress)
+
   const translateY = useTransform(scrollYProgress, [0.3, 0.75], [-100, 200])
   const translateYSpring = useSpring(translateY, { stiffness: 600, damping: 80 })
 
@@ -16,11 +23,11 @@ export const ContainerScroll = ({ children }: { children: React.ReactNode }) =>
 
   return (
     <div
-      className="flex flex-col items-center justify-center relative px-2 md:px-60"
+      className={`flex flex-col items-center justify-center relative px-2 md:px-60 ${className}`}
       ref={containerRef}
     >
       <div
-        className="py-10 md:py-52 h-auto w-auto relative"
+        className="py-10 md:pb-52 md:pt-24 h-auto w-auto relative"
         style={{
           perspective: '800px',
         }}