[home] Add new Header (#47)

56kcloud · Sep 21, 2023 · c3a92da · c3a92da
1 parent 78df9be
commit c3a92da
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ data
 public/blog
 .vercel
 .env
+.vscode
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 || '',
     children: link.children
   }))
@@ -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'>
@@ -131,7 +134,7 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
                       asChild
                       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
@@ -1,34 +1,42 @@
 import {ImageProps} from '@/models/image.model'
+import {LinkProps} from '@/models/link.model'
+import Button from '@/components/ui/atoms/button'
 import Image from 'next/image'
+import Link from 'next/link'
 
 export type HomeHeroProps = {
-  titleLine1: string
-  titleLine2: string
-  titleLine3: string
+  title: string
+  button: LinkProps
   image: ImageProps
 }
 
-export default function HomeHero({titleLine1, titleLine2, titleLine3, image}: HomeHeroProps) {  
+export default function HomeHero({title, button, image}: HomeHeroProps) {  
   return (
     <div className='relative pt-24 overflow-hidden bg-white sm:pt-0'>
       <Image
-        alt={'Train background'}
+        alt={'Team background'}
         src={image.src}
         placeholder='blur'
         blurDataURL={image.blurDataURL}
         width={image.width}
         height={image.height}
         className='w-full pointer-events-none'/>
-      <div
-        className='title font-semibold absolute left-[41%] bottom-[40%] z-10 sm:bottom-[43%] sm:left-[46%] \
-        md:bottom-[44%] md:left-[48%] lg:left-1/2 xl:bottom-[45%]'>
+      <div 
+        className='absolute inset-0 flex flex-col items-center justify-center title'>
         <h1
-          className='leading-none sm-responsive-title sm:md-responsive-title md:lg-responsive-title \
-          lg:xl-responsive-title'>
-          <div>{titleLine1}</div>
-          <div className='relative left-[12.5%]'>{titleLine2}</div>
-          <div className='relative left-[50%]'>{titleLine3}</div>
+          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}
+          </Link>
+        </Button>
       </div>
     </div>
   )

diff --git a/src/models/link.model.ts b/src/models/link.model.ts
@@ -5,4 +5,5 @@ export type LinkProps = {
   children: ReactNode
   alt?: string
   className?: string
+  children?: React.ReactNode
 }
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 HeroWithImageTiles from '@/components/ui/organisms/heros/hero-with-image-tiles'
 import HomeHero from '@/components/ui/organisms/heros/home'
 import IllustrationCardList from '@/components/ui/organisms/lists/illustration'
@@ -72,6 +72,11 @@ const linkBlueprint = {
   href: 'href'
 }
 
+const buttonBlueprint = {
+  children: 'button.children',
+  href: 'button.href'
+}
+
 const tagBlueprint = {
   name: 'name'
 }
@@ -415,9 +420,8 @@ export const backgroundImageBlueprint: ComponentBlueprint = {
 export const homeHeroBlueprint: ComponentBlueprint = {
   component: HomeHero,
   props: {
-    titleLine1: 'titleLine1',
-    titleLine2: 'titleLine2',
-    titleLine3: 'titleLine3',
+    title: 'title',
+    button: buttonBlueprint,
     image: imageBlueprint
   }
 }