added content cards and picture with text section. also added hero section

This commit is contained in:
2026-05-27 19:43:53 +01:00
parent ca60b38c85
commit eed242d5bd
6 changed files with 119 additions and 29 deletions

View File

@@ -2,16 +2,27 @@
interface cardProps {
src?: string
button_link?: string
heading?: string
button_text?: string
card_text?: string
}
export default function ContentCard(buttonProps: cardProps) {
export default function ContentCard(CardProps: cardProps) {
return (
<>
<img src={buttonProps.src}></img>
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
{buttonProps.button_text}
</button>
</>
<>
<div className="bg-neutral-primary-soft shadow-lg shadow-blue-500/50 rounded-3xl block p-6 border-2 border-blue-500 rounded-base m-3 min-w-60 max-w-80">
<a href="#">
<img className="rounded-2xl" src={CardProps.src} alt="" />
</a>
<a href="#">
<h5 className="mt-6 mb-2 text-2xl font-semibold tracking-tight text-heading">{CardProps.heading}</h5>
</a>
<p className="mb-6 text-body">{CardProps.card_text}</p>
<a href="#" className="inline-flex rounded-3xl items-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
{CardProps.button_text}
<svg className="w-3 h-3 ms-1.5 rtl:rotate-180 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
</a>
</div>
</>
)
}

View File

@@ -0,0 +1,11 @@
export default function hrWithText() {
return (
<>
<div className="flex items-center w-full my-4 md:my-10">
<div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
<span className="px-4 text-2xl text-neutral-400 dark:text-neutral-500 select-none">scroll down</span>
<div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
</div>
</>
)
}