[homepage] Dispaly header and improve homepage

56kcloud · Sep 19, 2023 · 0ce9db1 · 0ce9db1
1 parent 570c8ca
commit 0ce9db1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/...components/ui/organisms/header/header.tsx → src/components/ui/organisms/header/index.tsx b/...components/ui/organisms/header/header.tsx → src/components/ui/organisms/header/index.tsx
@@ -16,7 +16,10 @@ import useTranslation from 'next-translate/useTranslation'
 
 export type HeaderProps = {
   logo: ImageProps
-  links: Array<LinkProps>
+  links: Array<{
+    title: string
+    href: string
+  }>
   isFloating?: boolean
 }
 
@@ -25,7 +28,7 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const pathname = usePathname()
 
-  const navigation: Array<LinkProps> = links.map((link) => ({
+  const navigation: Array<LinkProps> = links.map(link => ({
     href: link.href || '',
     title: link.title
   }))
@@ -86,7 +89,7 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
                   <Link href={item.href}>
                     {item.title}
                   </Link>
-                </Button>
+                </Button>       
               ))}
             </div>
             <div className='flex justify-center pt-8 border-t pb-28'>
@@ -130,7 +133,7 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
                     <Button
                       key={index}
                       variant='ghost'
-                      className='capitalize'
+                      className='text-white capitalize'
                       data-active={pathname.includes(item.href)}
                     >
                       <Link href={item.href}>

diff --git a/src/components/ui/organisms/heros/home/index.tsx b/src/components/ui/organisms/heros/home/index.tsx
@@ -20,14 +20,18 @@ export default function HomeHero({title, button, image}: HomeHeroProps) {
         blurDataURL={image.blurDataURL}
         width={image.width}
         height={image.height}
-        className='w-full pointer-events-none opacity-70'/>
+        className='w-full pointer-events-none'/>
       <div 
         className='absolute inset-0 flex flex-col items-center justify-center title'>
-        <h1 className='mx-10 mt-4 mb-8 text-4xl text-center text-black sm:mb-20 sm:mx-40'>
+        <h1
+          className={`mx-10 my-4 mt-20 text-xl text-center text-white sm:mx-30 sm:mt-10 sm:text-3xl md:text-5xl 
+          lg:text-6xl xl:text-7xl 2xl:text-8xl`}>
           {title}
         </h1>
         <Button
           tone='primary'
+          size='small'
+          className='p-2 mt-8 text-xs/3 lg:mt-20'
         >
           <Link href={button.href}>
             {button.title}

diff --git a/src/utils/cms/renderer/blueprints.ts b/src/utils/cms/renderer/blueprints.ts
@@ -5,7 +5,7 @@ import BackgroundImage from '@/components/ui/atoms/background-image'
 import CompanyList from '@/components/ui/organisms/lists/company'
 import FeatureList from '@/components/ui/organisms/lists/feature'
 import Footer from '@/components/ui/organisms/footer'
-import Header from '@/components/ui/organisms/header/header'
+import Header from '@/components/ui/organisms/header'
 import HomeHero from '@/components/ui/organisms/heros/home'
 import IllustrationCardList from '@/components/ui/organisms/lists/illustration'
 import MediumTitleSection from '@/components/ui/molecules/title-sections/medium'