adjust content structure on programm detail page
This commit is contained in:
parent
f6db9f6134
commit
92a72166da
BIN
relume-test/src/assets/relume.png
Normal file
BIN
relume-test/src/assets/relume.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
relume-test/src/assets/speaker-detail/jens.jpg
Normal file
BIN
relume-test/src/assets/speaker-detail/jens.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
relume-test/src/assets/webflow.png
Normal file
BIN
relume-test/src/assets/webflow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@ -1,4 +1,5 @@
|
|||||||
import speaker1 from "../assets/speakers/speaker1.jpg";
|
import speaker1 from "../assets/speakers/speaker1.jpg";
|
||||||
|
import jensDetail from "../assets/speaker-detail/jens.jpg";
|
||||||
import speaker2 from "../assets/speakers/speaker2.jpg";
|
import speaker2 from "../assets/speakers/speaker2.jpg";
|
||||||
import speaker3 from "../assets/speakers/speaker3.jpg";
|
import speaker3 from "../assets/speakers/speaker3.jpg";
|
||||||
import speaker4 from "../assets/speakers/speaker4.jpg";
|
import speaker4 from "../assets/speakers/speaker4.jpg";
|
||||||
@ -24,6 +25,7 @@ type Talk = {
|
|||||||
|
|
||||||
export type TeamMember = {
|
export type TeamMember = {
|
||||||
image: ImageProps;
|
image: ImageProps;
|
||||||
|
detailImage?: ImageProps;
|
||||||
name: string;
|
name: string;
|
||||||
role: string;
|
role: string;
|
||||||
company: string;
|
company: string;
|
||||||
@ -113,6 +115,7 @@ export const Team4Defaults: Props = {
|
|||||||
teamMembers: [
|
teamMembers: [
|
||||||
{
|
{
|
||||||
image: { src: speaker1, alt: "Jens Riegelsberger" },
|
image: { src: speaker1, alt: "Jens Riegelsberger" },
|
||||||
|
detailImage: { src: jensDetail, alt: "Jens Riegelsberger" },
|
||||||
name: "Jens Riegelsberger",
|
name: "Jens Riegelsberger",
|
||||||
role: "UX Director",
|
role: "UX Director",
|
||||||
company: "Google",
|
company: "Google",
|
||||||
|
|||||||
@ -6,6 +6,13 @@ import { Team4Defaults } from "../components/Team4";
|
|||||||
import { ALL_EVENTS } from "../data/events";
|
import { ALL_EVENTS } from "../data/events";
|
||||||
import { BiCalendarAlt, BiMap, BiUser } from "react-icons/bi";
|
import { BiCalendarAlt, BiMap, BiUser } from "react-icons/bi";
|
||||||
import { RxCube } from "react-icons/rx";
|
import { RxCube } from "react-icons/rx";
|
||||||
|
import webflowLogo from "../assets/webflow.png";
|
||||||
|
import relumeLogo from "../assets/relume.png";
|
||||||
|
|
||||||
|
const SPONSORS = [
|
||||||
|
{ src: webflowLogo, alt: "Webflow" },
|
||||||
|
{ src: relumeLogo, alt: "Relume" },
|
||||||
|
];
|
||||||
|
|
||||||
const SponsorsSection = () => (
|
const SponsorsSection = () => (
|
||||||
<section className="bg-tech-navy px-[5%] py-16 md:py-24 font-barlow">
|
<section className="bg-tech-navy px-[5%] py-16 md:py-24 font-barlow">
|
||||||
@ -13,15 +20,13 @@ const SponsorsSection = () => (
|
|||||||
<h2 className="mb-12 text-center text-4xl font-bold text-cloud-white md:text-5xl">
|
<h2 className="mb-12 text-center text-4xl font-bold text-cloud-white md:text-5xl">
|
||||||
Unsere Sponsoren & Partner
|
Unsere Sponsoren & Partner
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-3 gap-6 md:grid-cols-5">
|
<div className="flex flex-wrap items-center justify-center gap-8">
|
||||||
{Array(15).fill(null).map((_, i) => (
|
{SPONSORS.map((sponsor) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={sponsor.alt}
|
||||||
className="flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-4 py-6"
|
className="flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-8 py-6"
|
||||||
>
|
>
|
||||||
<span className="text-sm font-semibold text-white/50">
|
<img src={sponsor.src} alt={sponsor.alt} className="h-10 w-auto object-contain" />
|
||||||
{i % 2 === 0 ? "Webflow" : "Relume"}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -38,8 +43,8 @@ const ProgrammDetail = () => {
|
|||||||
const speaker = Team4Defaults.teamMembers.find((m) => m.slug === event.speakerSlug);
|
const speaker = Team4Defaults.teamMembers.find((m) => m.slug === event.speakerSlug);
|
||||||
|
|
||||||
const dateLabel = event.day === "Donnerstag"
|
const dateLabel = event.day === "Donnerstag"
|
||||||
? "Donnerstag, 7. Mai 2026"
|
? "Donnerstag, 25. Juni 2026"
|
||||||
: "Freitag, 8. Mai 2026";
|
: "Freitag, 26. Juni 2026";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -44,8 +44,8 @@ const SpeakerDetail = () => {
|
|||||||
{/* Hero image */}
|
{/* Hero image */}
|
||||||
<div className="w-full aspect-[16/7] overflow-hidden">
|
<div className="w-full aspect-[16/7] overflow-hidden">
|
||||||
<img
|
<img
|
||||||
src={speaker.image.src}
|
src={(speaker.detailImage ?? speaker.image).src}
|
||||||
alt={speaker.image.alt}
|
alt={(speaker.detailImage ?? speaker.image).alt}
|
||||||
className="size-full object-cover object-top"
|
className="size-full object-cover object-top"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user