hoferlara/UXplore
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page components to match figma design #2

Merged
cantillalisa merged 1 commits from feature/react-router into main 2026-04-08 17:38:25 +02:00
Conversation 0 Commits 1 Files Changed 24 +236 -206
24 changed files with 236 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d828816f12 - Show all commits

3
relume-test/index.html
View File

@ -4,7 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>UXplore</title>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

60
relume-test/package-lock.json generated
View File

@ -14,7 +14,8 @@
"framer-motion": "^12.38.0", "framer-motion": "^12.38.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-icons": "^5.6.0" "react-icons": "^5.6.0",
"react-router-dom": "^7.14.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.13.0", "@eslint/js": "^9.13.0",
@ -5632,6 +5633,19 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/cookie": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/express"
}
},
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
"version": "7.0.6", "version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@ -10049,6 +10063,44 @@
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
} }
}, },
"node_modules/react-router": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz",
"integrity": "sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.0.tgz",
"integrity": "sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==",
"license": "MIT",
"dependencies": {
"react-router": "7.14.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/react-style-singleton": { "node_modules/react-style-singleton": {
"version": "2.2.3", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@ -10322,6 +10374,12 @@
"semver": "bin/semver.js" "semver": "bin/semver.js"
} }
}, },
"node_modules/set-cookie-parser": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
"license": "MIT"
},
"node_modules/set-function-length": { "node_modules/set-function-length": {
"version": "1.2.2", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",

3
relume-test/package.json
View File

@ -16,7 +16,8 @@
"framer-motion": "^12.38.0", "framer-motion": "^12.38.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-icons": "^5.6.0" "react-icons": "^5.6.0",
"react-router-dom": "^7.14.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.13.0", "@eslint/js": "^9.13.0",

7
relume-test/src/App.tsx
View File

@ -1,7 +1,12 @@
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home"; import Home from "./pages/Home";
function App() { function App() {
return <Home />; return (
<Routes>
<Route path="/" element={<Home />} />
</Routes>
);
} }
export default App; export default App;

BIN
relume-test/src/assets/Header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
relume-test/src/assets/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
relume-test/src/assets/logo-footer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
relume-test/src/assets/speaker1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
relume-test/src/assets/speaker2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
relume-test/src/assets/speaker3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
relume-test/src/assets/workshop1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
relume-test/src/assets/workshop2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
relume-test/src/assets/workshop3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

26
relume-test/src/components/Cta30.tsx
View File

@ -28,12 +28,12 @@ export const Cta30 = (props: Cta30Props) => {
}; };
return ( return (
<section id="relume" className="relative px-[5%] py-16 md:py-24 lg:py-28"> <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
<div className="container relative z-10 max-w-lg text-center"> <div className="container relative z-10 max-w-lg text-center">
<h2 className="rb-5 mb-5 text-5xl font-bold text-text-alternative md:mb-6 md:text-7xl lg:text-8xl"> <h2 className="rb-5 mb-5 text-5xl font-bold text-neutral-dark md:mb-6 md:text-7xl lg:text-8xl">
{heading} {heading}
</h2> </h2>
<p className="text-text-alternative md:text-md">{description}</p> <p className="text-neutral-dark md:text-md">{description}</p>
<div className="mx-auto mt-6 w-full max-w-sm md:mt-8"> <div className="mx-auto mt-6 w-full max-w-sm md:mt-8">
<form <form
className="rb-4 mb-4 grid max-w-sm grid-cols-1 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-4" className="rb-4 mb-4 grid max-w-sm grid-cols-1 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-4"
@ -46,34 +46,28 @@ export const Cta30 = (props: Cta30Props) => {
value={emailInput} value={emailInput}
onChange={(e) => setEmailInput(e.target.value)} onChange={(e) => setEmailInput(e.target.value)}
/> />
<Button {...button} className="items-center justify-center px-6 py-3"> <Button {...button} className="items-center justify-center px-6 py-3 bg-electric-green text-cloud-white rounded-2xl border-acid-lime font-semibold">
{button.title} {button.title}
</Button> </Button>
</form> </form>
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} /> <div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
</div> </div>
</div> </div>
<div className="absolute inset-0 z-0">
<video className="absolute inset-0 aspect-video size-full object-cover" autoPlay loop muted>
<source src={video} type={videoType} />
</video>
<div className="absolute inset-0 bg-black/50" />
</div>
</section> </section>
); );
}; };
export const Cta30Defaults: Props = { export const Cta30Defaults: Props = {
heading: "Medium length heading goes here", heading: "Stay tuned!",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.", description: "Bleib' auf dem Laufenden und erfahre alles rund um die UXplore sowie weitere spannende Themen.",
inputPlaceholder: "Enter your email", inputPlaceholder: "Enter your email",
button: { title: "Sign up", variant: "primary", size: "sm" }, button: { title: "Sign Up", variant: "primary", size: "sm" },
termsAndConditions: ` termsAndConditions: `
<p class='text-xs text-text-alternative'> <p class='text-xs text-neutral-dark text-center'>
By clicking Sign Up you're confirming that you agree with our By clicking Sign Up you're confirming that you agree with our
<a href='#' class='underline'>Terms and Conditions</a>. <a href='#' class='underline'>Terms and Conditions</a>.
</p> </p>
`, `,
video: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video.mp4", video: "",
videoType: "video/mp4", videoType: "",
}; };

95
relume-test/src/components/Event17.tsx
View File

@ -1,8 +1,11 @@
import speaker1 from "../assets/speaker1.png";
import speaker2 from "../assets/speaker2.png";
import speaker3 from "../assets/speaker3.png";
import * as React from "react"; import * as React from "react";
import type { ButtonProps } from "@relume_io/relume-ui"; import type { ButtonProps } from "@relume_io/relume-ui";
import { Button } from "@relume_io/relume-ui"; import { Button } from "@relume_io/relume-ui";
import { RxChevronRight } from "react-icons/rx"; //import { RxChevronRight } from "react-icons/rx";
import { BiMap, BiCalendarAlt } from "react-icons/bi"; //import { BiMap, BiCalendarAlt } from "react-icons/bi";
type ImageProps = { type ImageProps = {
src: string; src: string;
@ -43,12 +46,12 @@ export const Event17 = (props: Event17Props) => {
...props, ...props,
}; };
return ( return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28"> <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
<div className="container"> <div className="container">
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20"> <div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
<h4 className="font-semibold">{tagline}</h4> <h4 className="font-semibold">{tagline}</h4>
<h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">{heading}</h1> <h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl text-acid-lime">{heading}</h1>
<p className="mt-5 text-base md:mt-6 md:text-md">{description}</p> <p className="mt-5 text-base md:mt-6 md:text-md text-cloud-white whitespace-pre-wrap">{description}</p>
</div> </div>
<div className="grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3"> <div className="grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
{featuredEvents.map((event, index) => ( {featuredEvents.map((event, index) => (
@ -56,7 +59,7 @@ export const Event17 = (props: Event17Props) => {
))} ))}
</div> </div>
<div className="mt-12 flex justify-center md:mt-18 lg:mt-20"> <div className="mt-12 flex justify-center md:mt-18 lg:mt-20">
<Button {...button}>{button.title}</Button> <Button {...button} className="bg-acid-lime text-tech-navy font-semibold px-6 py-3 rounded-2xl border-acid-lime">{button.title}</Button>
</div> </div>
</div> </div>
</section> </section>
@ -64,83 +67,41 @@ export const Event17 = (props: Event17Props) => {
}; };
const FeaturedEvent: React.FC<FeaturedEvent> = ({ const FeaturedEvent: React.FC<FeaturedEvent> = ({
url, image, date, category, title, location, description, button, url, image, title
}) => { }) => {
return ( return (
<div className="flex flex-col items-start"> <div className="flex flex-col items-start gap-4">
<a href={url} className="relative block aspect-[3/2] w-full"> <a href={url} className="relative block aspect-[3/2] w-full">
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" /> <img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
<span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
{category}
</span>
</a> </a>
<div className="mt-5 flex flex-col items-start md:mt-6"> <h2 className="text-xl font-bold text-cloud-white">{title}</h2>
<div className="mb-3 flex flex-wrap gap-4 text-sm md:mb-4">
<div className="flex items-center gap-2">
<BiCalendarAlt className="size-6 flex-none" />
{date.weekday} {date.day} {date.month} {date.year}
</div>
<div className="flex items-center gap-2">
<BiMap className="size-6 flex-none" />
<span>{location}</span>
</div>
</div>
<a href={url} className="mb-2">
<h2 className="text-xl font-bold md:text-2xl">{title}</h2>
</a>
<p>{description}</p>
<Button {...button} className="mt-5 md:mt-6">
{button.title}
</Button>
</div>
</div> </div>
); );
}; };
export const Event17Defaults: Props = { export const Event17Defaults: Props = {
tagline: "Tagline", tagline: "",
heading: "Events", heading: "Speaker:innen",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "Überwältigt von unserem Programm?\nLerne unsere diesjährigen Speakerinnen und Speaker kennen.",
button: { variant: "secondary", size: "primary", title: "View all" }, button: { variant: "primary", size: "primary", title: "Zu den Speakern" },
featuredEvents: [ featuredEvents: [
{ {
url: "#", url: "/speaker", image: { src: speaker1, alt: "Dr. Elena Rossi" },
image: { date: { weekday: "", day: "", month: "", year: "" },
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg", category: "", title: "Dr. Elena Rossi", location: "", description: "",
alt: "Relume placeholder image 1", button: { title: "", variant: "link", size: "link" },
},
date: { weekday: "Fri", day: "09", month: "Feb", year: "2024" },
category: "Category",
title: "Event title heading",
location: "Location",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
}, },
{ {
url: "#", url: "/speaker", image: { src: speaker2, alt: "Jens Riegelberger" },
image: { date: { weekday: "", day: "", month: "", year: "" },
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg", category: "", title: "Jens Riegelberger", location: "", description: "",
alt: "Relume placeholder image 2", button: { title: "", variant: "link", size: "link" },
},
date: { weekday: "Sat", day: "10", month: "Feb", year: "2024" },
category: "Category",
title: "Event title heading",
location: "Location",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
}, },
{ {
url: "#", url: "/speaker", image: { src: speaker3, alt: "Reto Gwerder" },
image: { date: { weekday: "", day: "", month: "", year: "" },
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg", category: "", title: "Reto Gwerder", location: "", description: "",
alt: "Relume placeholder image 3", button: { title: "", variant: "link", size: "link" },
},
date: { weekday: "Sun", day: "11", month: "Feb", year: "2024" },
category: "Category",
title: "Event title heading",
location: "Location",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
}, },
], ],
}; };

72
relume-test/src/components/Event20.tsx
View File

@ -1,3 +1,6 @@
import workshop1 from "../assets/workshop1.png";
import workshop2 from "../assets/workshop2.png";
import workshop3 from "../assets/workshop3.png";
import * as React from "react"; import * as React from "react";
import type { ButtonProps } from "@relume_io/relume-ui"; import type { ButtonProps } from "@relume_io/relume-ui";
import { Button } from "@relume_io/relume-ui"; import { Button } from "@relume_io/relume-ui";
@ -43,15 +46,15 @@ export const Event20 = (props: Event20Props) => {
...props, ...props,
}; };
return ( return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28"> <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
<div className="container"> <div className="container">
<div className="mb-12 grid auto-cols-fr grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20"> <div className="mb-12 grid auto-cols-fr grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20">
<div className="max-w-lg"> <div className="max-w-lg">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p> <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">{heading}</h1> <h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl text-cloud-white">{heading}</h1>
<p className="md:text-md">{description}</p> <p className="md:text-md text-cloud-white">{description}</p>
</div> </div>
<Button {...button} className="hidden md:flex"> <Button {...button} className="hidden md:flex bg-acid-lime text-tech-navy font-semibold px-6 py-3 rounded-2xl border-acid-lime">
{button.title} {button.title}
</Button> </Button>
</div> </div>
@ -72,11 +75,11 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
url, image, date, category, title, location, description, button, url, image, date, category, title, location, description, button,
}) => { }) => {
return ( return (
<div className="flex flex-col items-start border border-border-primary"> <div className="flex flex-col items-start border border-electric-violet bg-cloud-white">
<a href={url} className="relative block aspect-[3/2] w-full"> <a href={url} className="relative block aspect-[3/2] w-full">
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" /> <img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
<span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold"> <span className="absolute right-4 top-4 bg-electric-violet text-cloud-white px-2 py-1 text-sm font-semibold rounded-lg">
{category} {category}
</span> </span>
</a> </a>
<div className="flex flex-col items-start p-6"> <div className="flex flex-col items-start p-6">
@ -91,59 +94,44 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
</div> </div>
</div> </div>
<a href={url} className="mb-2"> <a href={url} className="mb-2">
<h2 className="text-xl font-bold md:text-2xl">{title}</h2> <h2 className="text-xl font-bold md:text-2xl text-neutral-dark">{title}</h2>
</a> </a>
<p>{description}</p> <p>{description}</p>
<Button {...button} className="mt-5 md:mt-6"> <a href={url} className="mt-5 md:mt-6 flex items-center gap-2 text-electric-violet font-semibold text-base">
{button.title} {button.title} <RxChevronRight />
</Button> </a>
</div> </div>
</div> </div>
); );
}; };
export const Event20Defaults: Props = { export const Event20Defaults: Props = {
tagline: "Tagline", tagline: "",
heading: "Events", heading: "Workshops",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "Hands-on, Skills statt Theorie. Lerne Methoden und Workflows direkt von Experten aus der Industrie.",
button: { variant: "secondary", size: "primary", title: "View all" }, button: { variant: "primary", size: "primary", title: "View all" },
featuredEvents: [ featuredEvents: [
{ {
url: "#", url: "/programm",
image: { image: { src: workshop1, alt: "Research Repositories" },
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg", date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
alt: "Relume placeholder image 1", category: "Research", title: "Research Repositories", location: "Location",
},
date: { weekday: "Fri", day: "09", month: "Feb", year: "2024" },
category: "Category",
title: "Event title heading",
location: "Location",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> }, button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
}, },
{ {
url: "#", url: "/programm",
image: { image: { src: workshop2, alt: "The future of Tokens" },
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg", date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
alt: "Relume placeholder image 2", category: "Design / UX", title: "The future of Tokens", location: "Location",
},
date: { weekday: "Sat", day: "10", month: "Feb", year: "2024" },
category: "Category",
title: "Event title heading",
location: "Location",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> }, button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
}, },
{ {
url: "#", url: "/programm",
image: { image: { src: workshop3, alt: "Trust in AI" },
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg", date: { weekday: "Sun", day: "26", month: "Jun", year: "2026" },
alt: "Relume placeholder image 3", category: "AI & Future", title: "Trust in AI", location: "Hall 101",
},
date: { weekday: "Sun", day: "11", month: "Feb", year: "2024" },
category: "Category",
title: "Event title heading",
location: "Location",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> }, button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
}, },

69
relume-test/src/components/Footer.tsx
View File

@ -1,3 +1,4 @@
import LogoFooter from "../assets/logo-footer.png";
import { FaXTwitter } from "react-icons/fa6"; import { FaXTwitter } from "react-icons/fa6";
import { import {
BiLogoFacebookCircle, BiLogoFacebookCircle,
@ -55,7 +56,7 @@ export const Footer3 = (props: Footer3Props) => {
...props, ...props,
}; };
return ( return (
<footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20"> <footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20 bg-cloud-white font-barlow">
<div className="container"> <div className="container">
<div className="grid grid-cols-1 gap-x-[4vw] gap-y-12 pb-12 md:gap-y-16 md:pb-18 lg:grid-cols-[1fr_0.5fr] lg:gap-y-4 lg:pb-20"> <div className="grid grid-cols-1 gap-x-[4vw] gap-y-12 pb-12 md:gap-y-16 md:pb-18 lg:grid-cols-[1fr_0.5fr] lg:gap-y-4 lg:pb-20">
<div> <div>
@ -66,12 +67,12 @@ export const Footer3 = (props: Footer3Props) => {
</div> </div>
<div className="rb-6 mb-6 md:mb-8"> <div className="rb-6 mb-6 md:mb-8">
<div> <div>
<p className="mb-1 text-sm font-semibold">{address.label}</p> <p className="mb-1 text-sm font-semibold text-neutral-dark">{address.label}</p>
<p className="mb-5 text-sm md:mb-6">{address.value}</p> <p className="mb-5 text-sm md:mb-6 text-neutral-dark">{address.value}</p>
</div> </div>
<div> <div>
<p className="mb-1 text-sm font-semibold">{contact.label}</p> <p className="mb-1 text-sm font-semibold text-neutral-dark">{contact.label}</p>
<p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6"> <p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6 text-neutral-dark">
<a href={`tel:${contact.phone}`}>{contact.phone}</a> <a href={`tel:${contact.phone}`}>{contact.phone}</a>
<a href={`mailto:${contact.email}`}>{contact.email}</a> <a href={`mailto:${contact.email}`}>{contact.email}</a>
</p> </p>
@ -89,7 +90,7 @@ export const Footer3 = (props: Footer3Props) => {
{columnLinks.map((column, index) => ( {columnLinks.map((column, index) => (
<ul key={index}> <ul key={index}>
{column.links.map((link, linkIndex) => ( {column.links.map((link, linkIndex) => (
<li key={linkIndex} className="py-2 text-sm font-semibold"> <li key={linkIndex} className="py-2 text-sm font-semibold text-neutral-dark">
<a href={link.url}>{link.title}</a> <a href={link.url}>{link.title}</a>
</li> </li>
))} ))}
@ -97,7 +98,7 @@ export const Footer3 = (props: Footer3Props) => {
))} ))}
</div> </div>
</div> </div>
<div className="h-px w-full bg-black" /> <div className="h-px w-full bg-electric-green" />
<div className="flex flex-col-reverse items-start justify-between pb-4 pt-6 text-sm md:flex-row md:items-center md:pb-0 md:pt-8"> <div className="flex flex-col-reverse items-start justify-between pb-4 pt-6 text-sm md:flex-row md:items-center md:pb-0 md:pt-8">
<p className="mt-8 md:mt-0">{footerText}</p> <p className="mt-8 md:mt-0">{footerText}</p>
<ul className="grid grid-flow-row grid-cols-[max-content] justify-center gap-y-4 text-sm md:grid-flow-col md:gap-x-6 md:gap-y-0"> <ul className="grid grid-flow-row grid-cols-[max-content] justify-center gap-y-4 text-sm md:grid-flow-col md:gap-x-6 md:gap-y-0">
@ -115,50 +116,42 @@ export const Footer3 = (props: Footer3Props) => {
export const Footer3Defaults: Props = { export const Footer3Defaults: Props = {
logo: { logo: {
url: "#", url: "/",
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", src: LogoFooter,
alt: "Logo image", alt: "UXplore Logo",
}, },
address: { address: {
label: "Address:", label: "Address:",
value: "Level 1, 12 Sample St, Sydney NSW 2000", value: "Strasse Nr.\nPLZ Ort",
}, },
contact: { contact: {
label: "Contact:", label: "Kontakt:",
phone: "1800 123 4567", phone: "079 123 45 67",
email: "info@relume.io", email: "kontakt@uxplore.com",
}, },
columnLinks: [ columnLinks: [
{ {
links: [ links: [
{ title: "Link One", url: "#" }, { title: "Programm", url: "/programm" },
{ title: "Link Two", url: "#" }, { title: "Speaker", url: "/speaker" },
{ title: "Link Three", url: "#" }, { title: "Location", url: "/location" },
{ title: "Link Four", url: "#" }, { title: "Tickets", url: "#tickets" },
{ title: "Link Five", url: "#" }, { title: "FAQ", url: "#faq" },
],
},
{
links: [
{ title: "Link Six", url: "#" },
{ title: "Link Seven", url: "#" },
{ title: "Link Eight", url: "#" },
{ title: "Link Nine", url: "#" },
{ title: "Link Ten", url: "#" },
], ],
}, },
{ links: [] },
], ],
socialMediaLinks: [ socialMediaLinks: [
{ url: "#", icon: <BiLogoFacebookCircle className="size-6" /> }, { url: "#", icon: <BiLogoFacebookCircle className="size-6 text-neutral-dark" /> },
{ url: "#", icon: <BiLogoInstagram className="size-6" /> }, { url: "#", icon: <BiLogoInstagram className="size-6 text-neutral-dark" /> },
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5" /> }, { url: "#", icon: <FaXTwitter className="size-6 p-0.5 text-neutral-dark" /> },
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }, { url: "#", icon: <BiLogoLinkedinSquare className="size-6 text-neutral-dark" /> },
{ url: "#", icon: <BiLogoYoutube className="size-6" /> }, { url: "#", icon: <BiLogoYoutube className="size-6 text-neutral-dark" /> },
], ],
footerText: "© 2024 Relume. All rights reserved.", footerText: "© 2026 UXplore",
footerLinks: [ footerLinks: [
{ title: "Privacy Policy", url: "#" }, { title: "AGB", url: "#" },
{ title: "Terms of Service", url: "#" }, { title: "Datenschutz", url: "#" },
{ title: "Cookies Settings", url: "#" }, { title: "Cookie Einstellungen", url: "#" },
], ],
}; };

17
relume-test/src/components/Header.tsx
View File

@ -1,3 +1,4 @@
import headerImage from "../assets/Header.png";
import { Button } from "@relume_io/relume-ui"; import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui"; import type { ButtonProps } from "@relume_io/relume-ui";
@ -21,12 +22,12 @@ export const Header1 = (props: Header1Props) => {
...props, ...props,
}; };
return ( return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28"> <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
<div className="container"> <div className="container">
<div className="grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center"> <div className="grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center">
<div> <div>
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1> <h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl text-acid-lime whitespace-pre-wrap">{heading}</h1>
<p className="md:text-md">{description}</p> <p className="text-[48px] font-bold leading-[1.2] text-cloud-white whitespace-pre-wrap">{description}</p>
<div className="mt-6 flex flex-wrap gap-4 md:mt-8"> <div className="mt-6 flex flex-wrap gap-4 md:mt-8">
{buttons.map((button, index) => ( {buttons.map((button, index) => (
<Button key={index} {...button}> <Button key={index} {...button}>
@ -45,12 +46,12 @@ export const Header1 = (props: Header1Props) => {
}; };
export const Header1Defaults: Props = { export const Header1Defaults: Props = {
heading: "Medium length hero heading goes here", heading: "UXplore Konferenz 2026",
description: description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.", "25-26 Juni Zürich",
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary" }], buttons: [],
image: { image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg", src: headerImage,
alt: "Relume placeholder image", alt: "UXplore Konferenz 2026",
}, },
}; };

34
relume-test/src/components/Navbar.tsx
View File

@ -1,3 +1,4 @@
import logo from "../assets/Logo.png";
import { useState } from "react"; import { useState } from "react";
import { Button, useMediaQuery } from "@relume_io/relume-ui"; import { Button, useMediaQuery } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui"; import type { ButtonProps } from "@relume_io/relume-ui";
@ -35,7 +36,7 @@ export const Navbar3 = (props: Navbar3Props) => {
return ( return (
<section <section
id="relume" id="relume"
className="z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18" className="z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-neutral-dark bg-tech-navy px-[5%] md:min-h-18 font-barlow"
> >
<button <button
className="flex size-12 flex-col justify-center lg:hidden" className="flex size-12 flex-col justify-center lg:hidden"
@ -44,7 +45,7 @@ export const Navbar3 = (props: Navbar3Props) => {
{Array(3) {Array(3)
.fill(null) .fill(null)
.map((_, index) => ( .map((_, index) => (
<span key={index} className="my-[3px] h-0.5 w-6 bg-black lg:hidden" /> <span key={index} className="my-[3px] h-0.5 w-6 bg-cloud-white lg:hidden" />
))} ))}
</button> </button>
<AnimatePresence> <AnimatePresence>
@ -68,7 +69,7 @@ export const Navbar3 = (props: Navbar3Props) => {
transition: { type: "spring", duration: 0.4, bounce: 0 }, transition: { type: "spring", duration: 0.4, bounce: 0 },
}, },
}} }}
className="absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-white px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]" className="absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-tech-navy px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]"
> >
<a href={logo.url} className="mb-8 mt-10 flex flex-shrink-0 lg:hidden"> <a href={logo.url} className="mb-8 mt-10 flex flex-shrink-0 lg:hidden">
<img src={logo.src} alt={logo.alt} /> <img src={logo.src} alt={logo.alt} />
@ -80,7 +81,7 @@ export const Navbar3 = (props: Navbar3Props) => {
) : ( ) : (
<a <a
href={navLink.url} href={navLink.url}
className="relative block py-3 text-md lg:px-4 lg:py-2 lg:text-base" className="relative block py-3 text-md text-cloud-white lg:px-4 lg:py-2 lg:text-base"
> >
{navLink.title} {navLink.title}
</a> </a>
@ -112,7 +113,7 @@ export const Navbar3 = (props: Navbar3Props) => {
<div className="flex min-h-16 items-center justify-end gap-x-4"> <div className="flex min-h-16 items-center justify-end gap-x-4">
<div> <div>
{buttons.map((button, index) => ( {buttons.map((button, index) => (
<Button key={index} {...button} className="px-4 py-1 md:px-6 md:py-2"> <Button key={index} {...button} className="px-5 py-2 bg-electric-violet text-cloud-white rounded-2xl border-electric-violet font-barlow font-semibold">
{button.title} {button.title}
</Button> </Button>
))} ))}
@ -186,27 +187,20 @@ const SubMenu = ({ navLink, isMobile }: { navLink: NavLink; isMobile: boolean })
export const Navbar3Defaults: Props = { export const Navbar3Defaults: Props = {
logo: { logo: {
url: "#", url: "/",
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", src: logo,
alt: "Logo image", alt: "UXplore Logo",
}, },
navLinks: [ navLinks: [
{ title: "Link One", url: "#" }, { title: "Programm", url: "/programm" },
{ title: "Link Two", url: "#" }, { title: "Speaker", url: "/speaker" },
{ { title: "Location", url: "/location" },
title: "Link Three",
url: "#",
subMenuLinks: [
{ title: "Link Four", url: "#" },
{ title: "Link Five", url: "#" },
{ title: "Link Six", url: "#" },
],
},
], ],
buttons: [ buttons: [
{ {
title: "Button", title: "Tickets",
size: "sm", size: "sm",
variant: "primary",
}, },
], ],
}; };

5
relume-test/src/declarations.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.svg";
declare module "*.webp";

22
relume-test/src/index.css
View File

@ -1,3 +1,23 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
:root {
--color-scheme-1-background: #f8fafc;
--color-scheme-1-text: #f8fafc;
--color-scheme-1-accent: #895af6;
--color-scheme-1-border: #895af6;
--color-tech-navy: #1d283a;
--color-acid-lime: #cfff24;
--color-electric-violet: #895af6;
--color-electric-green: #00d949;
--color-cloud-white: #f8fafc;
--color-neutral-dark: #283c5e;
}
body {
background-color: #1d283a;
font-family: "Barlow", sans-serif;
}
}

5
relume-test/src/main.tsx
View File

@ -1,10 +1,13 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css' import './index.css'
import App from './App' import App from './App'
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<App /> <BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>, </StrictMode>,
) )

10
relume-test/src/pages/Home.tsx
View File

@ -1,11 +1,8 @@
import { Navbar3 } from "../components/Navbar"; import { Navbar3 } from "../components/Navbar";
import { Header1 } from "../components/Header"; import { Header1 } from "../components/Header";
import { Event17 } from "../components/Event17"; import { Event17 } from "../components/Event17";
import { Gallery19 } from "../components/Gallery19";
import { Cta30 } from "../components/Cta30";
import { Event20 } from "../components/Event20"; import { Event20 } from "../components/Event20";
import { Pricing18 } from "../components/Pricing18"; import { Cta30 } from "../components/Cta30";
import { Faq10 } from "../components/Faq10";
import { Footer3 } from "../components/Footer"; import { Footer3 } from "../components/Footer";
export const Home = () => { export const Home = () => {
@ -14,11 +11,8 @@ export const Home = () => {
<Navbar3 /> <Navbar3 />
<Header1 /> <Header1 />
<Event17 /> <Event17 />
<Gallery19 />
<Cta30 />
<Event20 /> <Event20 />
<Pricing18 /> <Cta30 />
<Faq10 />
<Footer3 /> <Footer3 />
</div> </div>
); );

14
relume-test/tailwind.config.js
View File

@ -9,7 +9,19 @@ export default {
], ],
presets: [relumetailwind], presets: [relumetailwind],
theme: { theme: {
extend: {}, extend: {
colors: {
"tech-navy": "#1d283a",
"acid-lime": "#cfff24",
"electric-violet": "#895af6",
"electric-green": "#00d949",
"cloud-white": "#f8fafc",
"neutral-dark": "#283c5e",
},
fontFamily: {
barlow: ["Barlow", "sans-serif"],
},
},
}, },
plugins: [], plugins: [],
} }