From 362a16b460cc253d89dc93ddc68f7ab53315f161 Mon Sep 17 00:00:00 2001 From: Josh GM Walker <56300765+Josh-Walker-GM@users.noreply.github.com> Date: Tue, 10 Sep 2024 12:48:19 +0100 Subject: [PATCH] landing page: react advanced conference 2024 (#74) --- .../images/react-advanced-logo-white.svg | 1 + web/public/images/react-advanced-logo.svg | 1 + web/src/Routes.tsx | 2 + .../ReactAdvancedPage.stories.tsx | 13 ++ .../ReactAdvancedPage.test.tsx | 14 ++ .../ReactAdvancedPage/ReactAdvancedPage.tsx | 207 ++++++++++++++++++ 6 files changed, 238 insertions(+) create mode 100644 web/public/images/react-advanced-logo-white.svg create mode 100644 web/public/images/react-advanced-logo.svg create mode 100644 web/src/pages/ReactAdvancedPage/ReactAdvancedPage.stories.tsx create mode 100644 web/src/pages/ReactAdvancedPage/ReactAdvancedPage.test.tsx create mode 100644 web/src/pages/ReactAdvancedPage/ReactAdvancedPage.tsx diff --git a/web/public/images/react-advanced-logo-white.svg b/web/public/images/react-advanced-logo-white.svg new file mode 100644 index 0000000..c4f9fba --- /dev/null +++ b/web/public/images/react-advanced-logo-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/images/react-advanced-logo.svg b/web/public/images/react-advanced-logo.svg new file mode 100644 index 0000000..95b3d71 --- /dev/null +++ b/web/public/images/react-advanced-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx index 96b4100..356d531 100644 --- a/web/src/Routes.tsx +++ b/web/src/Routes.tsx @@ -37,6 +37,8 @@ const Routes = () => { + + {/* UPGRADE - INDEX */} diff --git a/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.stories.tsx b/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.stories.tsx new file mode 100644 index 0000000..cc65ce4 --- /dev/null +++ b/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.stories.tsx @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ReactAdvancedPage from './ReactAdvancedPage' + +const meta: Meta = { + component: ReactAdvancedPage, +} + +export default meta + +type Story = StoryObj + +export const Primary: Story = {} diff --git a/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.test.tsx b/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.test.tsx new file mode 100644 index 0000000..46f6e62 --- /dev/null +++ b/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.test.tsx @@ -0,0 +1,14 @@ +import { render } from '@redwoodjs/testing/web' + +import ReactAdvancedPage from './ReactAdvancedPage' + +// Improve this test with help from the Redwood Testing Doc: +// https://redwoodjs.com/docs/testing#testing-pages-layouts + +describe('ReactAdvancedPage', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +}) diff --git a/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.tsx b/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.tsx new file mode 100644 index 0000000..140df84 --- /dev/null +++ b/web/src/pages/ReactAdvancedPage/ReactAdvancedPage.tsx @@ -0,0 +1,207 @@ +import { Link, routes, useLocation } from '@redwoodjs/router' +import { Metadata } from '@redwoodjs/web' + +import Accordion from 'src/components/Accordion/Accordion' +import BlogCard from 'src/components/BlogCard/BlogCard' +import BentoOpenSource from 'src/components/Home/WhatsIncluded/BentoOpenSource/BentoOpenSource' +import BentoTech from 'src/components/Home/WhatsIncluded/BentoTech/BentoTech' +import Icon from 'src/components/Icon/Icon' +import ConnectWithUs from 'src/components/ReactConf/ConnectWithUs/ConnectWithUs' +import GetInvolved from 'src/components/ReactConf/GetInvolved/GetInvolved' +import Newsletter from 'src/components/ReactConf/Newsletter/Newsletter' +import RoadmapDetails from 'src/components/RoadmapDetails/RoadmapDetails' +import { getPostBySlug } from 'src/content/posts' +import { Constants } from 'src/helpers/Constants' + +const ReactAdvancedPage = () => { + const { origin } = useLocation() + return ( + <> + + +
+
+
+ {/* Heading and logo */} +
+

+ Hello from +

+ React Advanced 2024 + React Advanced 2024 +
+ + {/* Newsletter Form */} + +
+
+ React Advanced 2024 +
+
+
+ +
+ +
+
+

+ What are you looking for? +
How can we help? +

+

+ We could dump our latest content,{' '} + upcoming events, and{' '} + roadmap, here. 🤪 But, is that + really what you’re looking for? +

+

+ We invite you to Choose Your Own Adventure. +

+
+
+ +
+ + +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+ + +
+
+ + YouTube Playlist: Building a Full-Stack Application in RedwoodJS + +
+
+

+ + Building a Full-Stack Application in RedwoodJS + +

+

+ This is a multi-part series that core Team Member, Amy Dutton, has + been working on. She builds a Hacker News Clone and covers React, + GraphQL, Apollo, Storybook, Prisma, TypeScript, and Jest. +

+

+ + + Watch the Playlist + {' '} + + +

+
+ +
+ + RedwoodJS Tutorial + +
+
+

+ + RedwoodJS Tutorial + +

+

+ If you prefer reading instead of watching, this is for you! This + tutorial is really a master class in building a full-stack + application. It covers GraphQL, Apollo, Storybook, Prisma, + TypeScript, and Jest. At the end, you should have everything you + need to build full-stack applications within Redwood. +

+

+ + + Read the Tutorial + {' '} + + +

+
+
+ + +
+ + + + +
+ + + + + + + + + + ) +} + +export default ReactAdvancedPage