diff --git a/relume-test/index.html b/relume-test/index.html index 891a938..38635a7 100644 --- a/relume-test/index.html +++ b/relume-test/index.html @@ -4,7 +4,8 @@ - Vite + React + UXplore +
diff --git a/relume-test/package-lock.json b/relume-test/package-lock.json index 7b19dfd..8536033 100644 --- a/relume-test/package-lock.json +++ b/relume-test/package-lock.json @@ -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", diff --git a/relume-test/package.json b/relume-test/package.json index 7750f5a..c21ee09 100644 --- a/relume-test/package.json +++ b/relume-test/package.json @@ -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", diff --git a/relume-test/src/App.tsx b/relume-test/src/App.tsx index 75666f8..efa7bdf 100644 --- a/relume-test/src/App.tsx +++ b/relume-test/src/App.tsx @@ -1,7 +1,12 @@ +import { Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; function App() { - return ; + return ( + + } /> + + ); } export default App; \ No newline at end of file diff --git a/relume-test/src/assets/Header.png b/relume-test/src/assets/Header.png new file mode 100644 index 0000000..549a495 Binary files /dev/null and b/relume-test/src/assets/Header.png differ diff --git a/relume-test/src/assets/Logo.png b/relume-test/src/assets/Logo.png new file mode 100644 index 0000000..322187b Binary files /dev/null and b/relume-test/src/assets/Logo.png differ diff --git a/relume-test/src/assets/logo-footer.png b/relume-test/src/assets/logo-footer.png new file mode 100644 index 0000000..debe149 Binary files /dev/null and b/relume-test/src/assets/logo-footer.png differ diff --git a/relume-test/src/assets/speaker1.png b/relume-test/src/assets/speaker1.png new file mode 100644 index 0000000..703512c Binary files /dev/null and b/relume-test/src/assets/speaker1.png differ diff --git a/relume-test/src/assets/speaker2.png b/relume-test/src/assets/speaker2.png new file mode 100644 index 0000000..8ef3ee5 Binary files /dev/null and b/relume-test/src/assets/speaker2.png differ diff --git a/relume-test/src/assets/speaker3.png b/relume-test/src/assets/speaker3.png new file mode 100644 index 0000000..7777c0e Binary files /dev/null and b/relume-test/src/assets/speaker3.png differ diff --git a/relume-test/src/assets/workshop1.png b/relume-test/src/assets/workshop1.png new file mode 100644 index 0000000..c04b4f8 Binary files /dev/null and b/relume-test/src/assets/workshop1.png differ diff --git a/relume-test/src/assets/workshop2.png b/relume-test/src/assets/workshop2.png new file mode 100644 index 0000000..cdfc9b7 Binary files /dev/null and b/relume-test/src/assets/workshop2.png differ diff --git a/relume-test/src/assets/workshop3.png b/relume-test/src/assets/workshop3.png new file mode 100644 index 0000000..f5f18ab Binary files /dev/null and b/relume-test/src/assets/workshop3.png differ diff --git a/relume-test/src/components/Cta30.tsx b/relume-test/src/components/Cta30.tsx index 5fdfe5e..17dfa6b 100644 --- a/relume-test/src/components/Cta30.tsx +++ b/relume-test/src/components/Cta30.tsx @@ -28,12 +28,12 @@ export const Cta30 = (props: Cta30Props) => { }; return ( -
+
-

+

{heading}

-

{description}

+

{description}

{ value={emailInput} onChange={(e) => setEmailInput(e.target.value)} /> -
-
- -
-
); }; 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: ` -

+

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

`, - video: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video.mp4", - videoType: "video/mp4", + video: "", + videoType: "", }; \ No newline at end of file diff --git a/relume-test/src/components/Event17.tsx b/relume-test/src/components/Event17.tsx index cf41079..a07513a 100644 --- a/relume-test/src/components/Event17.tsx +++ b/relume-test/src/components/Event17.tsx @@ -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 ( -
+

{tagline}

-

{heading}

-

{description}

+

{heading}

+

{description}

{featuredEvents.map((event, index) => ( @@ -56,7 +59,7 @@ export const Event17 = (props: Event17Props) => { ))}
- +
@@ -64,83 +67,41 @@ export const Event17 = (props: Event17Props) => { }; const FeaturedEvent: React.FC = ({ - url, image, date, category, title, location, description, button, + url, image, title }) => { return ( -
+
{image.alt} - - {category} - -
-
-
- - {date.weekday} {date.day} {date.month} {date.year} -
-
- - {location} -
-
- -

{title}

- -

{description}

- -
+

{title}

); }; 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: }, + 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: }, + 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: }, + 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" }, }, ], }; \ No newline at end of file diff --git a/relume-test/src/components/Event20.tsx b/relume-test/src/components/Event20.tsx index cd69fb0..eac0bf9 100644 --- a/relume-test/src/components/Event20.tsx +++ b/relume-test/src/components/Event20.tsx @@ -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 ( -
+

{tagline}

-

{heading}

-

{description}

+

{heading}

+

{description}

-
@@ -72,11 +75,11 @@ const FeaturedEvent: React.FC = ({ url, image, date, category, title, location, description, button, }) => { return ( -
+
{image.alt} - - {category} + + {category}
@@ -91,59 +94,44 @@ const FeaturedEvent: React.FC = ({
-

{title}

+

{title}

{description}

- + + {button.title} +
); }; 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: }, }, { - 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: }, }, { - 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: }, }, diff --git a/relume-test/src/components/Footer.tsx b/relume-test/src/components/Footer.tsx index 5e3c542..4f47713 100644 --- a/relume-test/src/components/Footer.tsx +++ b/relume-test/src/components/Footer.tsx @@ -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 ( -