[homepage] Dispaly header and improve homepage

56kcloud · Sep 15, 2023 · cce6eb0 · cce6eb0
1 parent 498ec0e
commit cce6eb0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 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,9 +28,9 @@ 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 || '',
-    children: link.children
+    children: link.title
   }))
 
   const sidebarHandler = () => {
@@ -86,7 +89,7 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
                   <Link href={item.href}>
                     {item.children}
                   </Link>
-                </Button>
+                </Button>       
               ))}
             </div>
             <div className='flex justify-center pt-8 border-t pb-28'>
@@ -130,14 +133,15 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
                     <Button
                       key={index}
                       variant='ghost'
-                      className='capitalize'
+                      className='capitalize text-white'
                       data-active={pathname.includes(item.href)}
                     >
                       <Link href={item.href}>
                         {item.children}
                       </Link>
                     </Button>
                   ))}
+
                   <LanguageSwitcher/>
                 </div>
               </div>

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, buttonText, buttonLink, background}: Ho
         blurDataURL={background.blurDataURL}
         width={background.width}
         height={background.height}
-        className='w-full pointer-events-none opacity-70'/>
+        className='w-full pointer-events-none'/>
       <div 
         className='title flex flex-col items-center justify-center absolute inset-0'>
-        <h1 className='text-black text-center mt-4 mb-8 sm:mb-20  text-4xl mx-10 sm:mx-40'>
+        <h1
+          className='text-white text-center mx-10 sm:mx-30 my-4 mt-20 sm:mt-10 text-xl 
+                      sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl'>
           {title}
         </h1>
         <Button
           tone='primary'
+          size='small'
+          className='text-xs/3 p-2 mt-8 lg:mt-20'
         >
           <Link href={buttonLink}>
             {buttonText}

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'