mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init Hero, TextImage, Logos, People Landing sections
This commit is contained in:
swve
parent
7b33639b9a
commit
1fdbb2b3ca
3 changed files with 158 additions and 65 deletions
|
|
@ -16,7 +16,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
return (
|
||||
<div
|
||||
key={`hero-${section.title}`}
|
||||
className="min-h-[500px] flex items-center justify-center"
|
||||
className="min-h-[400px] sm:min-h-[500px] mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full flex items-center justify-center rounded-xl border border-gray-100"
|
||||
style={{
|
||||
background: section.background.type === 'solid'
|
||||
? section.background.color
|
||||
|
|
@ -25,25 +25,25 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
: `url(${section.background.image}) center/cover`
|
||||
}}
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="text-center w-full max-w-4xl mx-auto px-4 sm:px-6">
|
||||
<h1
|
||||
className="text-5xl font-bold mb-4"
|
||||
className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-4"
|
||||
style={{ color: section.heading.color }}
|
||||
>
|
||||
{section.heading.text}
|
||||
</h1>
|
||||
<h2
|
||||
className="text-2xl mb-8"
|
||||
className="text-sm sm:text-base md:text-lg mb-4 sm:mb-6 md:mb-8 font-medium px-4 max-w-2xl mx-auto"
|
||||
style={{ color: section.subheading.color }}
|
||||
>
|
||||
{section.subheading.text}
|
||||
</h2>
|
||||
<div className="flex gap-4 justify-center">
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center">
|
||||
{section.buttons.map((button, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={button.link}
|
||||
className="px-6 py-3 rounded-lg font-medium"
|
||||
className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow transition-transform hover:scale-105"
|
||||
style={{
|
||||
backgroundColor: button.background,
|
||||
color: button.color
|
||||
|
|
@ -60,18 +60,24 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
return (
|
||||
<div
|
||||
key={`text-image-${section.title}`}
|
||||
className="container mx-auto py-16 px-4"
|
||||
className="mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full"
|
||||
>
|
||||
<div className={`flex items-center gap-12 ${section.flow === 'right' ? 'flex-row-reverse' : 'flex-row'}`}>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-3xl font-bold mb-4">{section.title}</h2>
|
||||
<p className="text-lg text-gray-600 mb-6">{section.text}</p>
|
||||
<div className="flex gap-4">
|
||||
<div className={`flex flex-col md:flex-row items-center gap-8 md:gap-12 bg-white rounded-xl p-6 md:p-8 lg:p-12 nice-shadow ${
|
||||
section.flow === 'right' ? 'md:flex-row-reverse' : ''
|
||||
}`}>
|
||||
<div className="flex-1 w-full max-w-2xl">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900 tracking-tight">{section.title}</h2>
|
||||
<div className="prose prose-lg prose-gray max-w-none">
|
||||
<p className="text-base md:text-lg leading-relaxed text-gray-600 whitespace-pre-line">
|
||||
{section.text}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4 mt-8">
|
||||
{section.buttons.map((button, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={button.link}
|
||||
className="px-6 py-3 rounded-lg font-medium"
|
||||
className="px-6 py-3 rounded-xl font-medium shadow-sm transition-all duration-200 hover:scale-105"
|
||||
style={{
|
||||
backgroundColor: button.background,
|
||||
color: button.color
|
||||
|
|
@ -82,12 +88,14 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<img
|
||||
src={section.image.url}
|
||||
alt={section.image.alt}
|
||||
className="rounded-lg shadow-lg w-full"
|
||||
/>
|
||||
<div className="flex-1 w-full md:w-auto">
|
||||
<div className="relative w-full aspect-[4/3] max-w-[500px] mx-auto">
|
||||
<img
|
||||
src={section.image.url}
|
||||
alt={section.image.alt}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,17 +104,23 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
return (
|
||||
<div
|
||||
key={`logos-${section.type}`}
|
||||
className="container mx-auto py-16 px-4"
|
||||
className="mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full py-20"
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center">
|
||||
{section.logos.map((logo, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={logo.url}
|
||||
alt={logo.alt}
|
||||
className="h-12 object-contain mx-auto"
|
||||
/>
|
||||
))}
|
||||
{section.title && (
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-left mb-16 text-gray-900">{section.title}</h2>
|
||||
)}
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex flex-wrap justify-center gap-16 max-w-6xl">
|
||||
{section.logos.map((logo, index) => (
|
||||
<div key={index} className="flex items-center justify-center w-[140px] h-[80px]">
|
||||
<img
|
||||
src={logo.url}
|
||||
alt={logo.alt}
|
||||
className="max-h-16 max-w-[120px] object-contain hover:opacity-80 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -114,19 +128,21 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
return (
|
||||
<div
|
||||
key={`people-${section.title}`}
|
||||
className="container mx-auto py-16 px-4"
|
||||
className="mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full py-16"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-center mb-12">{section.title}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-left mb-10 text-gray-900">{section.title}</h2>
|
||||
<div className="flex flex-wrap justify-center gap-x-20 gap-y-8">
|
||||
{section.people.map((person, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<img
|
||||
src={person.image_url}
|
||||
alt={person.name}
|
||||
className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
|
||||
/>
|
||||
<h3 className="text-xl font-semibold mb-2">{person.name}</h3>
|
||||
<p className="text-gray-600">{person.description}</p>
|
||||
<div key={index} className="w-[140px] flex flex-col items-center">
|
||||
<div className="w-24 h-24 mb-4">
|
||||
<img
|
||||
src={person.image_url}
|
||||
alt={person.name}
|
||||
className="w-full h-full rounded-full object-cover border-4 border-white nice-shadow"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-center text-gray-900">{person.name}</h3>
|
||||
<p className="text-sm text-center text-gray-600 mt-1">{person.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -136,9 +152,9 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
return (
|
||||
<div
|
||||
key={`featured-courses-${section.title}`}
|
||||
className="container mx-auto py-16 px-4"
|
||||
className="mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full py-16"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-center mb-12">{section.title}</h2>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-left mb-8 text-gray-900">{section.title}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{section.courses.map((course, index) => (
|
||||
<div key={index} className="bg-white rounded-lg shadow-lg p-4">
|
||||
|
|
@ -155,7 +171,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
|
||||
{landing.sections.map((section) => renderSection(section))}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue