style: hero page

LibreChat-AI · Dec 7, 2024 · 3a75534 · 3a75534
1 parent 7d1bad6
commit 3a75534
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/components/home/Features.tsx b/components/home/Features.tsx
@@ -21,7 +21,7 @@ const BentoBgImage = ({
 }) => (
   <>
     <Image
-      className="opacity-30 top-0 right-0 dark:hidden hidden md:block"
+      className="opacity-60 top-0 right-0 dark:hidden hidden md:block"
       style={{
         objectFit: 'contain',
         objectPosition: 'top right',
@@ -33,7 +33,7 @@ const BentoBgImage = ({
       sizes="(min-width: 1024px) 33vw, 100vw"
     />
     <Image
-      className="opacity-30 top-0 right-0 hidden dark:md:block"
+      className="opacity-60 top-0 right-0 hidden dark:md:block"
       style={{
         objectFit: 'contain',
         objectPosition: 'top right',

diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
@@ -43,7 +43,7 @@ const HeroTitle = React.memo(() => (
 ))
 
 const HeroDescription = React.memo(() => (
-  <span className="mt-2 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-lg lg:text-2xl md:text-balance 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>
@@ -74,7 +74,7 @@ const HeroDescription = React.memo(() => (
 ))
 
 const HeroLinks = React.memo(() => (
-  <div className="flex items-center justify-center gap-x-16 flex-wrap">
+  <div className="flex items-center justify-center gap-x-14 flex-wrap">
     <CardContainer className="inter-var">
       <Link href={REPO_OF_THE_DAY_LINK}>
         <CardBody className="bg-transparent w-auto h-auto px-12">
@@ -127,7 +127,7 @@ const HeroLinks = React.memo(() => (
 export function Hero() {
   return (
     <HomeSection>
-      <div className="flex flex-col items-center justify-center gap-4 md:min-h-[calc(60vh-100px)] lg:py-20">
+      <div className="flex flex-col items-center justify-center gap-2 md:min-h-[calc(60vh-100px)] lg:py-20">
         <HeroTitle />
         <HeroDescription />
         <HeroLinks />

diff --git a/components/ui/3d-card.tsx b/components/ui/3d-card.tsx
@@ -41,7 +41,7 @@ export const CardContainer = ({
   return (
     <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
       <div
-        className={cn('py-20 flex items-center justify-center', containerClassName)}
+        className={cn('py-14 flex items-center justify-center', containerClassName)}
         style={{
           perspective: '1000px',
         }}

diff --git a/components/ui/container-scroll-animation.tsx b/components/ui/container-scroll-animation.tsx
@@ -20,7 +20,7 @@ export const ContainerScroll = ({ children }: { children: React.ReactNode }) =>
       ref={containerRef}
     >
       <div
-        className="py-10 md:py-52 h-auto w-auto relative"
+        className="py-10 md:py-32 h-auto w-auto relative"
         style={{
           perspective: '800px',
         }}