wip

src/components/ui/atoms/arrow/index.tsx

@@ -0,0 +1,22 @@
+import {cn} from '@/utils/toolbox'
+
+type ArrowProps = {
+  theme?: 'dark' | 'light'
+  className?: string
+}
+
+export default function Arrow({className='', theme='dark'}: ArrowProps) {
+  return (
+    <div className={cn('-mt-1 w-1.5 h-24', className)}>
+      <div className={cn('w-px h-full', theme === 'dark' ? 'bg-white' : 'bg-primary-dark')}/>
+      <div
+        className={cn(
+          'text-[10px] rotate-180 -mt-3',
+          theme === 'dark' ? 'text-white' : 'text-primary-dark'
+        )}
+      >
+        ▲
+      </div>
+    </div>
+  )
+}

src/components/ui/atoms/button/button.model.ts

@@ -8,7 +8,7 @@ export const buttonAlignments = ['start', 'center', 'end'] as const
 
 const toneClasses: Record<typeof buttonTones[number], Record<typeof buttonVariants[number], string>> = {
   primary: {
-    default: 'bg-primary-200 text-primary-500 hover:bg-primary-100 focus-visible:ring-primary-500 \
+    default: 'bg-primary-800 text-white hover:bg-white hover:text-primary-800 focus-visible:ring-primary-800 \
     focus-visible:outline-primary-200 uppercase tracking-widest',
     link: 'text-primary-800 hover:underline focus-visible:outline-primary-600 focus-visible:underline',
     ghost: 'text-primary-800 hover:bg-primary-100/30 focus-visible:outline-primary-600  \
@@ -23,9 +23,9 @@ const toneClasses: Record<typeof buttonTones[number], Record<typeof buttonVarian
     ghost: 'text-secondary-500 hover:bg-secondary-50 focus-visible:outline-secondary-600'
   },
   white: {
-    default: 'text-white bg-white hover:bg-white/90 focus-visible:ring-white focus-visible:outline-white',
+    default: 'text-white bg-white hover:bg-white/10 focus-visible:ring-white focus-visible:outline-white',
     link: 'text-white hover:underline focus-visible:outline-white focus-visible:underline',
-    ghost: 'text-white hover:bg-white/90 focus-visible:outline-white'
+    ghost: 'text-white hover:bg-white/10 focus-visible:outline-white'
   }
 }
 
@@ -101,7 +101,7 @@ export class ButtonProps {
       toneClasses[this.tone][this.variant],
       sizeClasses[this.size],
       shapeClasses[this.shape],
-      this.variant === 'link' && 'p-0'
+      this.variant === 'link' && '!p-0'
     )
   }
 

src/components/ui/atoms/titles/vertical/index.tsx

@@ -1,22 +1,33 @@
+import {MoveDown} from 'lucide-react'
 import {cn} from '@/utils/toolbox'
+import Arrow from '../../arrow'
 
 export type VerticalTitleProps = {
   styleCard: 'illustrationCard' | 'detailsCard'
-  title: string
   classNameText?: string
+  title: string
+  theme?: 'dark' | 'light'
 }
 
-export default function VerticalTitle({title, styleCard = 'illustrationCard', classNameText}: VerticalTitleProps) {
+export default function VerticalTitle({
+  title,
+  classNameText,
+  styleCard = 'illustrationCard',
+  theme
+}: VerticalTitleProps) {
   return (
     <div
-      className={cn(styleCard === 'illustrationCard' ? 'top-48' : 'top-[450px]',
-        'absolute items-center translate-x-[50%] translate-y-[100%] rotate-90 gap-x-8 hidden xl:flex right-24')}>
-      <span className={cn('text-sm font-medium tracking-[0.25rem] uppercase', classNameText)}>{title}</span>
-      <span
-        className={cn('flex items-center justify-center w-40 before:bg-blue-medium text-[10px] -left-[3px] relative \
-         rotate-90', classNameText)}>
-        ▲
-      </span>
+      className={cn(styleCard === 'illustrationCard' ? 'top-20' : 'top-[450px]',
+        'absolute right-24 flex flex-col items-center space-y-10'
+      )}
+    >
+      <div className={cn('text-sm font-medium tracking-[0.1rem] uppercase', classNameText)}>
+        <span style={{writingMode: 'vertical-lr'}}>{title}</span>
+      </div>
+      <MoveDown
+        className={
+          cn('w-10 text-white stroke-1 h-14 ml-1', theme === 'dark' ? 'text-white' : 'text-primary-dark')
+        }/>
     </div>
   )
 }

src/components/ui/molecules/article/content-section/index.tsx

@@ -1,9 +1,9 @@
 import {ImageProps} from '@/models/image.model'
+import {MarkdownViewer} from '../../mardown'
 import {Tag} from '@/models/tag.model'
-import Markdown from 'markdown-to-jsx'
 import PostCover from '../../cards/cover'
 import PostTagList from '../../cards/article/tag-list'
-import React, {ReactNode} from 'react'
+import React from 'react'
 
 export type ArticleContentSectionProps = {
   image: ImageProps
@@ -28,23 +28,7 @@ export default function ArticleContentSection({image, tags, title, content}: Art
           <h1 className='text-4xl line-clamp-2 text-grey-dark title'>
             {title}
           </h1>
-          <Markdown
-            options={{
-              createElement(type, props: React.HTMLProps<HTMLDivElement> , children: ReactNode) {
-                const element = Array.isArray(children) ? children[0] : children
-                if (element === 'video') {
-                  return <iframe
-                    key={props['href']}
-                    src={props['href']}
-                    className='w-full rounded-lg h-[500px]'/>
-                } else {
-                  return React.createElement(type, props, children)
-                }
-              }
-            }}
-          >
-            {content}
-          </Markdown>
+          <MarkdownViewer content={content}/>
         </div>
       </div>
     </div>    

src/components/ui/molecules/cards/article/tag-list/index.tsx

@@ -14,8 +14,7 @@ export default function ArticleTagList({tags}: ArticleListProps) {
     slugify(a.name).toLowerCase() === queryTag ? -1 : slugify(b.name).toLowerCase() === queryTag ? 1 : 0)
 
   return (
-    <div
-      className='flex p-1 mb-5 space-x-2 overflow-x-scroll'>
+    <div className='flex p-1 mb-5 space-x-2 overflow-x-scroll'>
       {sortedTags?.map((tag, idx: number) => (
         <Link
           key={idx}

src/components/ui/molecules/cards/feature/index.tsx

@@ -9,18 +9,16 @@ export default function FeatureCard({feature}: FeatureCardProps) {
   return (
     <div
       key={feature.name}
-      className='relative pl-16'>
-      <dt className='text-base font-semibold leading-7 text-gray-900'>
-        <div
-          className={'absolute top-0 left-0 flex items-center justify-center w-10 h-10 p-2 rounded-lg'}>
-          <Image
-            {...feature.icon}
-            alt={feature.name}
-          />
-        </div>
+      className='w-full p-6 h-80 bg-primary-500'>
+      <Image
+        {...feature.icon}
+        alt={feature.name}
+        className='w-auto h-10 mb-2'
+      />
+      <div className='text-xl font-semibold leading-7 text-white title'>
         <span className='capitalize'>{feature.name}</span>
-      </dt>
-      <dd className='mt-2 text-base leading-7 text-gray-600'>{feature.description}</dd>
+      </div>
+      <p className='mt-2 overflow-hidden text-base leading-7 text-gray-100'>{feature.description}</p>
     </div>
   )
 }

src/components/ui/molecules/cards/illustration/illustration-card.model.ts

@@ -1,12 +1,10 @@
 import {ImageProps} from '@/models/image.model'
-import {StaticImageData} from 'next/image'
 
 export type IllustrationCardPropsImpl = {
   number: number
   illustration: ImageProps
-  icon: StaticImageData
+  href: string
   title: string
   description: string
-  alignment?: string
   theme?: string
 }

src/components/ui/molecules/cards/illustration/index.tsx

@@ -2,25 +2,27 @@ import {IllustrationCardPropsImpl} from './illustration-card.model'
 import {cn} from '@/utils/toolbox'
 import {padNumberWithZeroes} from '@/utils/toolbox'
 import Image from 'next/image'
+import Link from 'next/link'
 
 
 export default function IllustrationCard({
-  alignment = 'left',
   theme = 'dark',
   illustration,
-  icon,
+  href,
   number,
   title,
   description
 }: IllustrationCardPropsImpl) {
+  const alignment = number % 2 === 0 ? 'right' : 'left'
   const alignClasses = alignment === 'left' ? 'xl:mr-16' : 'xl:ml-16'
   const backgroundColor = theme === 'dark' ? 'bg-primary-500 text-white' : 'bg-white'
 
   return (
     <div className='w-full mx-auto mb-28 max-w-screen-2xl last:mb-0'>
-      <div
+      <Link
+        href={href}
         className={cn(alignClasses, backgroundColor,
-          'relative flex flex-col md:flex-row')}>
+          'relative flex flex-col md:flex-row duration-200 hover:scale-105')}>
         <div className='absolute right-4 top-3 sm:right-10 sm:top-10'>
           <span className='title'>{padNumberWithZeroes(number, 2)}</span>
         </div>
@@ -37,16 +39,6 @@ export default function IllustrationCard({
           </div>
         </div>
         <div className='p-8 pt-0 md:p-16 md:w-1/3 md:pr-8 md:pl-0 lg:py-28 2xl:pr-36'>
-          <div
-            className={cn((alignment === 'right'
-              ? 'bg-primary-200'
-              : 'bg-secondary-500'),
-            'w-12 h-12 p-3 rounded-full flex items-center justify-center')}>
-            <Image
-              src={icon}
-              alt={title}
-            />
-          </div>
           <h3
             className={cn(
               alignment === 'left' ? 'text-secondary-500' : 'text-primary-200',
@@ -55,7 +47,7 @@ export default function IllustrationCard({
           </h3>
           <p className='w-full sm:w-2/3 md:w-full'>{description}</p>
         </div>
-      </div>
+      </Link>
     </div>
   )
 }

src/components/ui/molecules/cards/team-member/index.tsx

@@ -11,7 +11,9 @@ export type TeamMemberCardProps = {
 
 export default function TeamMemberCard({teamMember}: TeamMemberCardProps) {
   return (
-    <div className='flex w-full p-10 space-x-4 bg-white shadow-lg sm:space-x-8 rounded-xl'>
+    <Link
+      href={`/about/team-members/${teamMember.slug}`}
+      className='flex w-full p-10 space-x-4 bg-white shadow-lg sm:space-x-8 rounded-xl hover:bg-gray-50'>
       <div>
         <Avatar
           size='lg'
@@ -49,6 +51,6 @@ export default function TeamMemberCard({teamMember}: TeamMemberCardProps) {
           }
         </div>
       </div>
-    </div>
+    </Link>
   )
 }

src/components/ui/molecules/mardown/index.tsx

@@ -0,0 +1,28 @@
+import Markdown from 'markdown-to-jsx'
+import React from 'react'
+
+export function MarkdownViewer({content}: {content: string}) {
+  return (
+    <div className='flex justify-center w-full'>
+      <div className='w-full px-4 prose max-w-7xl'>
+        <Markdown
+          options={{
+            createElement(type, props: React.HTMLProps<HTMLDivElement> , children: React.ReactNode) {
+              const element = Array.isArray(children) ? children[0] : children
+              if (element === 'video') {
+                return <iframe
+                  key={props['href']}
+                  src={props['href']}
+                  className='w-full rounded-lg h-[500px]'/>
+              } else {
+                return React.createElement(type, props, children)
+              }
+            }
+          }}
+        >
+          {content}
+        </Markdown>
+      </div>
+    </div>
+  )
+}

src/components/ui/molecules/tag-filter/index.tsx

@@ -31,7 +31,7 @@ export default function TagFilter({tags}: TagFilterProps) {
 
   return (
     <div className='flex items-center justify-center w-full'>
-      <div className='relative flex w-full border-b'>
+      <div className='relative flex w-full mt-10 border-b max-w-7xl'>
         <div className='absolute left-0 flex h-full'>
           <button
             onClick={() => slide('left')}