styling adjustments speaker detail and ticket pages
This commit is contained in:
Alisa Cantillo-Olsson
parent
de239b4468
commit
ed0d261056
@ -18,7 +18,7 @@ const TicketCardViolet = ({ plan }: { plan: TicketPlan }) => {
|
||||
const total = qty * plan.price;
|
||||
|
||||
return (
|
||||
<div className="bg-electric-violet text-cloud-white p-6 md:p-8 flex flex-col gap-5 font-barlow">
|
||||
<div className="bg-electric-violet text-cloud-white p-6 md:p-8 flex flex-col gap-5 font-barlow border border-white/20">
|
||||
<p className="text-sm font-semibold">{plan.period}</p>
|
||||
<h3 className="text-6xl font-bold md:text-8xl">CHF {plan.price}</h3>
|
||||
<p className="text-sm">{plan.date}</p>
|
||||
@ -26,14 +26,14 @@ const TicketCardViolet = ({ plan }: { plan: TicketPlan }) => {
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setQty((q) => Math.max(0, q - 1))}
|
||||
className="w-8 h-8 rounded-full bg-acid-lime text-tech-navy flex items-center justify-center font-bold text-lg leading-none"
|
||||
className="w-8 h-8 rounded-lg bg-acid-lime text-tech-navy flex items-center justify-center font-bold text-lg leading-none"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="w-6 text-center font-semibold">{qty}</span>
|
||||
<button
|
||||
onClick={() => setQty((q) => q + 1)}
|
||||
className="w-8 h-8 rounded-full bg-acid-lime text-tech-navy flex items-center justify-center font-bold text-lg leading-none"
|
||||
className="w-8 h-8 rounded-lg bg-acid-lime text-tech-navy flex items-center justify-center font-bold text-lg leading-none"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
@ -43,7 +43,7 @@ const TicketCardViolet = ({ plan }: { plan: TicketPlan }) => {
|
||||
<div>{total},-</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full bg-acid-lime text-tech-navy font-semibold py-3 text-sm">
|
||||
<button className="w-full rounded-2xl bg-acid-lime text-tech-navy font-semibold py-3 text-sm">
|
||||
Ticket sichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@ const TicketCardLime = ({ plan }: { plan: TicketPlan }) => {
|
||||
const total = qty * plan.price;
|
||||
|
||||
return (
|
||||
<div className="bg-acid-lime text-tech-navy p-6 md:p-8 flex flex-col gap-5 font-barlow">
|
||||
<div className="bg-acid-lime text-tech-navy p-6 md:p-8 flex flex-col gap-5 font-barlow border border-electric-violet">
|
||||
<p className="text-sm font-semibold">{plan.day}</p>
|
||||
<h3 className="text-6xl font-bold md:text-8xl">CHF {plan.price}</h3>
|
||||
<p className="text-sm">{plan.date}</p>
|
||||
@ -26,14 +26,14 @@ const TicketCardLime = ({ plan }: { plan: TicketPlan }) => {
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setQty((q) => Math.max(0, q - 1))}
|
||||
className="w-8 h-8 rounded-full bg-electric-violet text-cloud-white flex items-center justify-center font-bold text-lg leading-none"
|
||||
className="w-8 h-8 rounded-lg bg-electric-violet text-cloud-white flex items-center justify-center font-bold text-lg leading-none"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="w-6 text-center font-semibold">{qty}</span>
|
||||
<button
|
||||
onClick={() => setQty((q) => q + 1)}
|
||||
className="w-8 h-8 rounded-full bg-electric-violet text-cloud-white flex items-center justify-center font-bold text-lg leading-none"
|
||||
className="w-8 h-8 rounded-lg bg-electric-violet text-cloud-white flex items-center justify-center font-bold text-lg leading-none"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
@ -43,7 +43,7 @@ const TicketCardLime = ({ plan }: { plan: TicketPlan }) => {
|
||||
<div>{total},-</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full bg-electric-violet text-cloud-white font-semibold py-3 text-sm">
|
||||
<button className="w-full rounded-2xl bg-electric-violet text-cloud-white font-semibold py-3 text-sm">
|
||||
Ticket sichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,8 @@ import { Cta30 } from "../components/Cta30";
|
||||
import { Footer3 } from "../components/Footer";
|
||||
import { Team4Defaults } from "../components/Team4";
|
||||
import { ALL_EVENTS } from "../data/events";
|
||||
import { BiCalendarAlt, BiUser } from "react-icons/bi";
|
||||
import { BiCalendarAlt, BiUser, BiLogoLinkedinSquare, BiLogoDribbble } from "react-icons/bi";
|
||||
import { SiXing } from "react-icons/si";
|
||||
import { RxCube } from "react-icons/rx";
|
||||
import webflowLogo from "../assets/webflow.png";
|
||||
import relumeLogo from "../assets/relume.png";
|
||||
@ -109,7 +110,18 @@ const ProgrammDetail = () => {
|
||||
<>
|
||||
<p className="mb-1 text-lg font-bold text-cloud-white">{speaker.name}</p>
|
||||
<p className="mb-1 text-sm text-cloud-white/60">{speaker.role}</p>
|
||||
<p className="mb-6 text-sm text-cloud-white/60">{speaker.company}</p>
|
||||
<p className="mb-4 text-sm text-cloud-white/60">{speaker.company}</p>
|
||||
<div className="flex gap-3 mb-6">
|
||||
<a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
|
||||
<BiLogoLinkedinSquare className="size-6" />
|
||||
</a>
|
||||
<a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
|
||||
<SiXing className="size-5" />
|
||||
</a>
|
||||
<a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
|
||||
<BiLogoDribbble className="size-6" />
|
||||
</a>
|
||||
</div>
|
||||
<Link
|
||||
to={`/speaker/${speaker.slug}`}
|
||||
className="inline-block rounded-2xl border border-acid-lime px-6 py-2.5 text-sm font-semibold text-acid-lime hover:bg-acid-lime hover:text-tech-navy transition-colors"
|
||||
@ -126,7 +138,7 @@ const ProgrammDetail = () => {
|
||||
<div>
|
||||
<RxCube className="mb-4 size-8 text-electric-violet" />
|
||||
<h2 className="mb-6 text-2xl font-bold text-cloud-white md:text-3xl">
|
||||
Das erwartete dich
|
||||
Das erwartet dich
|
||||
</h2>
|
||||
<p className="text-base leading-relaxed text-cloud-white/80">
|
||||
{event.description ?? "Weitere Informationen folgen in Kürze."}
|
||||
|
||||
@ -65,6 +65,8 @@ const SpeakerDetail = () => {
|
||||
<h1 className="mb-4 text-5xl font-bold text-cloud-white md:text-7xl">
|
||||
{speaker.name}
|
||||
</h1>
|
||||
<p className="text-base font-semibold text-cloud-white/80">{speaker.role}</p>
|
||||
<p className="mb-2 text-base text-cloud-white/60">{speaker.company}</p>
|
||||
{speaker.location && (
|
||||
<p className="text-base text-cloud-white/60">{speaker.location}</p>
|
||||
)}
|
||||
@ -75,9 +77,9 @@ const SpeakerDetail = () => {
|
||||
<p className="text-base leading-relaxed text-cloud-white/80 md:text-lg">
|
||||
{speaker.fullBio ?? speaker.description}
|
||||
</p>
|
||||
{speaker.socialLinks.filter((l) => l.href !== "#").length > 0 && (
|
||||
{speaker.socialLinks.length > 0 && (
|
||||
<div className="flex gap-4">
|
||||
{speaker.socialLinks.filter((l) => l.href !== "#").map((link, i) => (
|
||||
{speaker.socialLinks.map((link, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={link.href}
|
||||
@ -94,12 +96,14 @@ const SpeakerDetail = () => {
|
||||
</section>
|
||||
|
||||
{/* Other speakers */}
|
||||
<section className="bg-cloud-white px-[5%] pt-16 font-barlow">
|
||||
<div className="container mb-10">
|
||||
<h2 className="text-3xl font-bold text-tech-navy md:text-4xl">Weitere Speaker</h2>
|
||||
<div className="bg-cloud-white">
|
||||
<div className="px-[5%] pt-16 font-barlow">
|
||||
<div className="container mb-10">
|
||||
<h2 className="text-3xl font-bold text-tech-navy md:text-4xl">Weitere Speaker</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Team4 teamMembers={otherSpeakers} />
|
||||
<Team4 teamMembers={otherSpeakers} />
|
||||
</div>
|
||||
|
||||
<SponsorsSection />
|
||||
<Footer3 />
|
||||
|
||||
@ -6,7 +6,7 @@ import { Header23 } from "../components/Header23";
|
||||
import { Pricing1Ticket } from "../components/Pricing1Ticket";
|
||||
import { Pricing39Ticket } from "../components/Pricing39Ticket";
|
||||
import { Footer3 } from "../components/Footer";
|
||||
import { Button, Input } from "@relume_io/relume-ui";
|
||||
import { Input } from "@relume_io/relume-ui";
|
||||
|
||||
const COUNTDOWN_TARGET = "2026-06-25T09:00:00.000+02:00";
|
||||
|
||||
@ -86,11 +86,13 @@ const Tickets = () => {
|
||||
<div className="mt-5 font-semibold text-cloud-white md:mt-6 md:text-md">
|
||||
DO – FR, 25. – 26. Juni 2026
|
||||
</div>
|
||||
<p className="mt-4 bg-acid-lime px-2 py-1 text-sm font-semibold text-tech-navy">
|
||||
<p className="mt-4 inline-block bg-electric-violet px-2 py-1 text-sm font-semibold text-cloud-white">
|
||||
10 Spots left!
|
||||
</p>
|
||||
<div className="mt-8 w-full">
|
||||
<Countdown targetDate={COUNTDOWN_TARGET} />
|
||||
<div className="mt-8 flex justify-center">
|
||||
<div className="w-fit">
|
||||
<Countdown targetDate={COUNTDOWN_TARGET} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 w-full max-w-sm md:mt-8 mx-auto">
|
||||
<form
|
||||
@ -103,9 +105,14 @@ const Tickets = () => {
|
||||
placeholder="Enter your email"
|
||||
value={emailInput}
|
||||
onChange={(e) => setEmailInput(e.target.value)}
|
||||
className="text-tech-navy"
|
||||
className="rounded-lg border-electric-violet text-electric-violet placeholder:text-electric-violet/50"
|
||||
/>
|
||||
<Button title="Get Updates" size="sm">Get Updates</Button>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-2xl bg-acid-lime px-5 py-2 text-sm font-normal uppercase text-tech-navy hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Get Updates
|
||||
</button>
|
||||
</form>
|
||||
<p className="text-xs text-cloud-white">
|
||||
By clicking Get Updates you're confirming that you agree with our{" "}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user