home page components to match figma design
This commit is contained in:
Alisa Cantillo-Olsson
parent
dd34e08854
commit
d828816f12
@ -4,7 +4,8 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<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>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
60
relume-test/package-lock.json
generated
60
relume-test/package-lock.json
generated
@ -14,7 +14,8 @@
|
||||
"framer-motion": "^12.38.0",
|
||||
"react": "^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": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
@ -5632,6 +5633,19 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "7.0.6",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
||||
@ -10322,6 +10374,12 @@
|
||||
"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": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
"framer-motion": "^12.38.0",
|
||||
"react": "^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": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import Home from "./pages/Home";
|
||||
|
||||
function App() {
|
||||
return <Home />;
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
BIN
relume-test/src/assets/Header.png
Normal file
BIN
relume-test/src/assets/Header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
relume-test/src/assets/Logo.png
Normal file
BIN
relume-test/src/assets/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
relume-test/src/assets/logo-footer.png
Normal file
BIN
relume-test/src/assets/logo-footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
relume-test/src/assets/speaker1.png
Normal file
BIN
relume-test/src/assets/speaker1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
relume-test/src/assets/speaker2.png
Normal file
BIN
relume-test/src/assets/speaker2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
relume-test/src/assets/speaker3.png
Normal file
BIN
relume-test/src/assets/speaker3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
relume-test/src/assets/workshop1.png
Normal file
BIN
relume-test/src/assets/workshop1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
relume-test/src/assets/workshop2.png
Normal file
BIN
relume-test/src/assets/workshop2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
relume-test/src/assets/workshop3.png
Normal file
BIN
relume-test/src/assets/workshop3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
@ -28,12 +28,12 @@ export const Cta30 = (props: Cta30Props) => {
|
||||
};
|
||||
|
||||
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">
|
||||
<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}
|
||||
</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">
|
||||
<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"
|
||||
@ -46,34 +46,28 @@ export const Cta30 = (props: Cta30Props) => {
|
||||
value={emailInput}
|
||||
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>
|
||||
</form>
|
||||
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export const Cta30Defaults: Props = {
|
||||
heading: "Medium length heading goes here",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
|
||||
heading: "Stay tuned!",
|
||||
description: "Bleib' auf dem Laufenden und erfahre alles rund um die UXplore sowie weitere spannende Themen.",
|
||||
inputPlaceholder: "Enter your email",
|
||||
button: { title: "Sign up", variant: "primary", size: "sm" },
|
||||
button: { title: "Sign Up", variant: "primary", size: "sm" },
|
||||
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
|
||||
<a href='#' class='underline'>Terms and Conditions</a>.
|
||||
</p>
|
||||
`,
|
||||
video: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video.mp4",
|
||||
videoType: "video/mp4",
|
||||
video: "",
|
||||
videoType: "",
|
||||
};
|
||||
@ -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 type { ButtonProps } from "@relume_io/relume-ui";
|
||||
import { Button } from "@relume_io/relume-ui";
|
||||
import { RxChevronRight } from "react-icons/rx";
|
||||
import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
||||
//import { RxChevronRight } from "react-icons/rx";
|
||||
//import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
||||
|
||||
type ImageProps = {
|
||||
src: string;
|
||||
@ -43,12 +46,12 @@ export const Event17 = (props: Event17Props) => {
|
||||
...props,
|
||||
};
|
||||
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="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
|
||||
<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>
|
||||
<p className="mt-5 text-base md:mt-6 md:text-md">{description}</p>
|
||||
<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 text-cloud-white whitespace-pre-wrap">{description}</p>
|
||||
</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">
|
||||
{featuredEvents.map((event, index) => (
|
||||
@ -56,7 +59,7 @@ export const Event17 = (props: Event17Props) => {
|
||||
))}
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
@ -64,83 +67,41 @@ export const Event17 = (props: Event17Props) => {
|
||||
};
|
||||
|
||||
const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
||||
url, image, date, category, title, location, description, button,
|
||||
url, image, title
|
||||
}) => {
|
||||
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">
|
||||
<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>
|
||||
<div className="mt-5 flex flex-col items-start md:mt-6">
|
||||
<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>
|
||||
<h2 className="text-xl font-bold text-cloud-white">{title}</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Event17Defaults: Props = {
|
||||
tagline: "Tagline",
|
||||
heading: "Events",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
button: { variant: "secondary", size: "primary", title: "View all" },
|
||||
tagline: "",
|
||||
heading: "Speaker:innen",
|
||||
description: "Überwältigt von unserem Programm?\nLerne unsere diesjährigen Speakerinnen und Speaker kennen.",
|
||||
button: { variant: "primary", size: "primary", title: "Zu den Speakern" },
|
||||
featuredEvents: [
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 1",
|
||||
},
|
||||
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: "/speaker", image: { src: speaker1, alt: "Dr. Elena Rossi" },
|
||||
date: { weekday: "", day: "", month: "", year: "" },
|
||||
category: "", title: "Dr. Elena Rossi", location: "", description: "",
|
||||
button: { title: "", variant: "link", size: "link" },
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 2",
|
||||
},
|
||||
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: "/speaker", image: { src: speaker2, alt: "Jens Riegelberger" },
|
||||
date: { weekday: "", day: "", month: "", year: "" },
|
||||
category: "", title: "Jens Riegelberger", location: "", description: "",
|
||||
button: { title: "", variant: "link", size: "link" },
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 3",
|
||||
},
|
||||
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 /> },
|
||||
url: "/speaker", image: { src: speaker3, alt: "Reto Gwerder" },
|
||||
date: { weekday: "", day: "", month: "", year: "" },
|
||||
category: "", title: "Reto Gwerder", location: "", description: "",
|
||||
button: { title: "", variant: "link", size: "link" },
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -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 type { ButtonProps } from "@relume_io/relume-ui";
|
||||
import { Button } from "@relume_io/relume-ui";
|
||||
@ -43,15 +46,15 @@ export const Event20 = (props: Event20Props) => {
|
||||
...props,
|
||||
};
|
||||
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="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">
|
||||
<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>
|
||||
<p className="md:text-md">{description}</p>
|
||||
<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 text-cloud-white">{description}</p>
|
||||
</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>
|
||||
</div>
|
||||
@ -72,11 +75,11 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
||||
url, image, date, category, title, location, description, button,
|
||||
}) => {
|
||||
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">
|
||||
<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 className="absolute right-4 top-4 bg-electric-violet text-cloud-white px-2 py-1 text-sm font-semibold rounded-lg">
|
||||
{category}
|
||||
</span>
|
||||
</a>
|
||||
<div className="flex flex-col items-start p-6">
|
||||
@ -91,59 +94,44 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p>{description}</p>
|
||||
<Button {...button} className="mt-5 md:mt-6">
|
||||
{button.title}
|
||||
</Button>
|
||||
<a href={url} className="mt-5 md:mt-6 flex items-center gap-2 text-electric-violet font-semibold text-base">
|
||||
{button.title} <RxChevronRight />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Event20Defaults: Props = {
|
||||
tagline: "Tagline",
|
||||
heading: "Events",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
button: { variant: "secondary", size: "primary", title: "View all" },
|
||||
tagline: "",
|
||||
heading: "Workshops",
|
||||
description: "Hands-on, Skills statt Theorie. Lerne Methoden und Workflows direkt von Experten aus der Industrie.",
|
||||
button: { variant: "primary", size: "primary", title: "View all" },
|
||||
featuredEvents: [
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 1",
|
||||
},
|
||||
date: { weekday: "Fri", day: "09", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
url: "/programm",
|
||||
image: { src: workshop1, alt: "Research Repositories" },
|
||||
date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
|
||||
category: "Research", title: "Research Repositories", 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: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 2",
|
||||
},
|
||||
date: { weekday: "Sat", day: "10", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
url: "/programm",
|
||||
image: { src: workshop2, alt: "The future of Tokens" },
|
||||
date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
|
||||
category: "Design / UX", title: "The future of Tokens", 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: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 3",
|
||||
},
|
||||
date: { weekday: "Sun", day: "11", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
url: "/programm",
|
||||
image: { src: workshop3, alt: "Trust in AI" },
|
||||
date: { weekday: "Sun", day: "26", month: "Jun", year: "2026" },
|
||||
category: "AI & Future", title: "Trust in AI", location: "Hall 101",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||
},
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import LogoFooter from "../assets/logo-footer.png";
|
||||
import { FaXTwitter } from "react-icons/fa6";
|
||||
import {
|
||||
BiLogoFacebookCircle,
|
||||
@ -55,7 +56,7 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
...props,
|
||||
};
|
||||
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="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>
|
||||
@ -66,12 +67,12 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
</div>
|
||||
<div className="rb-6 mb-6 md:mb-8">
|
||||
<div>
|
||||
<p className="mb-1 text-sm font-semibold">{address.label}</p>
|
||||
<p className="mb-5 text-sm md:mb-6">{address.value}</p>
|
||||
<p className="mb-1 text-sm font-semibold text-neutral-dark">{address.label}</p>
|
||||
<p className="mb-5 text-sm md:mb-6 text-neutral-dark">{address.value}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-sm font-semibold">{contact.label}</p>
|
||||
<p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6">
|
||||
<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 text-neutral-dark">
|
||||
<a href={`tel:${contact.phone}`}>{contact.phone}</a>
|
||||
<a href={`mailto:${contact.email}`}>{contact.email}</a>
|
||||
</p>
|
||||
@ -89,7 +90,7 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
{columnLinks.map((column, index) => (
|
||||
<ul key={index}>
|
||||
{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>
|
||||
</li>
|
||||
))}
|
||||
@ -97,7 +98,7 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
))}
|
||||
</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">
|
||||
<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">
|
||||
@ -115,50 +116,42 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
|
||||
export const Footer3Defaults: Props = {
|
||||
logo: {
|
||||
url: "#",
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
||||
alt: "Logo image",
|
||||
url: "/",
|
||||
src: LogoFooter,
|
||||
alt: "UXplore Logo",
|
||||
},
|
||||
address: {
|
||||
label: "Address:",
|
||||
value: "Level 1, 12 Sample St, Sydney NSW 2000",
|
||||
value: "Strasse Nr.\nPLZ Ort",
|
||||
},
|
||||
contact: {
|
||||
label: "Contact:",
|
||||
phone: "1800 123 4567",
|
||||
email: "info@relume.io",
|
||||
label: "Kontakt:",
|
||||
phone: "079 123 45 67",
|
||||
email: "kontakt@uxplore.com",
|
||||
},
|
||||
columnLinks: [
|
||||
{
|
||||
links: [
|
||||
{ title: "Link One", url: "#" },
|
||||
{ title: "Link Two", url: "#" },
|
||||
{ title: "Link Three", url: "#" },
|
||||
{ title: "Link Four", url: "#" },
|
||||
{ title: "Link Five", url: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
links: [
|
||||
{ title: "Link Six", url: "#" },
|
||||
{ title: "Link Seven", url: "#" },
|
||||
{ title: "Link Eight", url: "#" },
|
||||
{ title: "Link Nine", url: "#" },
|
||||
{ title: "Link Ten", url: "#" },
|
||||
{ title: "Programm", url: "/programm" },
|
||||
{ title: "Speaker", url: "/speaker" },
|
||||
{ title: "Location", url: "/location" },
|
||||
{ title: "Tickets", url: "#tickets" },
|
||||
{ title: "FAQ", url: "#faq" },
|
||||
],
|
||||
},
|
||||
{ links: [] },
|
||||
],
|
||||
socialMediaLinks: [
|
||||
{ url: "#", icon: <BiLogoFacebookCircle className="size-6" /> },
|
||||
{ url: "#", icon: <BiLogoInstagram className="size-6" /> },
|
||||
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5" /> },
|
||||
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6" /> },
|
||||
{ url: "#", icon: <BiLogoYoutube className="size-6" /> },
|
||||
{ url: "#", icon: <BiLogoFacebookCircle className="size-6 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <BiLogoInstagram className="size-6 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <BiLogoYoutube className="size-6 text-neutral-dark" /> },
|
||||
],
|
||||
footerText: "© 2024 Relume. All rights reserved.",
|
||||
footerText: "© 2026 UXplore",
|
||||
footerLinks: [
|
||||
{ title: "Privacy Policy", url: "#" },
|
||||
{ title: "Terms of Service", url: "#" },
|
||||
{ title: "Cookies Settings", url: "#" },
|
||||
{ title: "AGB", url: "#" },
|
||||
{ title: "Datenschutz", url: "#" },
|
||||
{ title: "Cookie Einstellungen", url: "#" },
|
||||
],
|
||||
};
|
||||
};
|
||||
@ -1,3 +1,4 @@
|
||||
import headerImage from "../assets/Header.png";
|
||||
import { Button } from "@relume_io/relume-ui";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
|
||||
@ -21,12 +22,12 @@ export const Header1 = (props: Header1Props) => {
|
||||
...props,
|
||||
};
|
||||
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="grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center">
|
||||
<div>
|
||||
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1>
|
||||
<p className="md:text-md">{description}</p>
|
||||
<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="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">
|
||||
{buttons.map((button, index) => (
|
||||
<Button key={index} {...button}>
|
||||
@ -45,12 +46,12 @@ export const Header1 = (props: Header1Props) => {
|
||||
};
|
||||
|
||||
export const Header1Defaults: Props = {
|
||||
heading: "Medium length hero heading goes here",
|
||||
heading: "UXplore Konferenz 2026",
|
||||
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.",
|
||||
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary" }],
|
||||
"25-26 Juni Zürich",
|
||||
buttons: [],
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image",
|
||||
src: headerImage,
|
||||
alt: "UXplore Konferenz 2026",
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import logo from "../assets/Logo.png";
|
||||
import { useState } from "react";
|
||||
import { Button, useMediaQuery } from "@relume_io/relume-ui";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
@ -35,7 +36,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
return (
|
||||
<section
|
||||
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
|
||||
className="flex size-12 flex-col justify-center lg:hidden"
|
||||
@ -44,7 +45,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
{Array(3)
|
||||
.fill(null)
|
||||
.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>
|
||||
<AnimatePresence>
|
||||
@ -68,7 +69,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
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">
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
@ -80,7 +81,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
) : (
|
||||
<a
|
||||
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}
|
||||
</a>
|
||||
@ -112,7 +113,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
<div className="flex min-h-16 items-center justify-end gap-x-4">
|
||||
<div>
|
||||
{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>
|
||||
))}
|
||||
@ -186,27 +187,20 @@ const SubMenu = ({ navLink, isMobile }: { navLink: NavLink; isMobile: boolean })
|
||||
|
||||
export const Navbar3Defaults: Props = {
|
||||
logo: {
|
||||
url: "#",
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
||||
alt: "Logo image",
|
||||
url: "/",
|
||||
src: logo,
|
||||
alt: "UXplore Logo",
|
||||
},
|
||||
navLinks: [
|
||||
{ title: "Link One", url: "#" },
|
||||
{ title: "Link Two", url: "#" },
|
||||
{
|
||||
title: "Link Three",
|
||||
url: "#",
|
||||
subMenuLinks: [
|
||||
{ title: "Link Four", url: "#" },
|
||||
{ title: "Link Five", url: "#" },
|
||||
{ title: "Link Six", url: "#" },
|
||||
],
|
||||
},
|
||||
{ title: "Programm", url: "/programm" },
|
||||
{ title: "Speaker", url: "/speaker" },
|
||||
{ title: "Location", url: "/location" },
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
title: "Button",
|
||||
title: "Tickets",
|
||||
size: "sm",
|
||||
variant: "primary",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
5
relume-test/src/declarations.d.ts
vendored
Normal file
5
relume-test/src/declarations.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
declare module "*.png";
|
||||
declare module "*.jpg";
|
||||
declare module "*.jpeg";
|
||||
declare module "*.svg";
|
||||
declare module "*.webp";
|
||||
@ -1,3 +1,23 @@
|
||||
@tailwind base;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,13 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
)
|
||||
@ -1,11 +1,8 @@
|
||||
import { Navbar3 } from "../components/Navbar";
|
||||
import { Header1 } from "../components/Header";
|
||||
import { Event17 } from "../components/Event17";
|
||||
import { Gallery19 } from "../components/Gallery19";
|
||||
import { Cta30 } from "../components/Cta30";
|
||||
import { Event20 } from "../components/Event20";
|
||||
import { Pricing18 } from "../components/Pricing18";
|
||||
import { Faq10 } from "../components/Faq10";
|
||||
import { Cta30 } from "../components/Cta30";
|
||||
import { Footer3 } from "../components/Footer";
|
||||
|
||||
export const Home = () => {
|
||||
@ -14,11 +11,8 @@ export const Home = () => {
|
||||
<Navbar3 />
|
||||
<Header1 />
|
||||
<Event17 />
|
||||
<Gallery19 />
|
||||
<Cta30 />
|
||||
<Event20 />
|
||||
<Pricing18 />
|
||||
<Faq10 />
|
||||
<Cta30 />
|
||||
<Footer3 />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,7 +9,19 @@ export default {
|
||||
],
|
||||
presets: [relumetailwind],
|
||||
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: [],
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user