From 73ba54a5c7258e26b600bb354f9b8044f965d766 Mon Sep 17 00:00:00 2001 From: Maximilian Hollis Date: Mon, 20 Nov 2023 17:49:28 -0500 Subject: [PATCH 1/6] update footer --- src/subsections/landingpage/Announcement.js | 0 src/theme/DocItem/Footer/course.js | 83 +++++++++++++++++++++ src/theme/DocItem/Footer/course.module.css | 48 ++++++++++++ src/theme/DocItem/Footer/index.js | 61 ++++++++++----- src/theme/DocItem/Footer/signup.js | 63 ++++++++++++++++ src/theme/DocItem/Footer/signup.module.css | 35 +++++++++ src/theme/DocItem/Footer/styles.module.css | 14 ++++ src/theme/NavbarItem/ComponentTypes.js | 3 +- 8 files changed, 288 insertions(+), 19 deletions(-) create mode 100644 src/subsections/landingpage/Announcement.js create mode 100644 src/theme/DocItem/Footer/course.js create mode 100644 src/theme/DocItem/Footer/course.module.css create mode 100644 src/theme/DocItem/Footer/signup.js create mode 100644 src/theme/DocItem/Footer/signup.module.css diff --git a/src/subsections/landingpage/Announcement.js b/src/subsections/landingpage/Announcement.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/theme/DocItem/Footer/course.js b/src/theme/DocItem/Footer/course.js new file mode 100644 index 00000000000..065041087a9 --- /dev/null +++ b/src/theme/DocItem/Footer/course.js @@ -0,0 +1,83 @@ +import React from "react"; +import classes from './course.module.css' + +export default function Course({ src, srcset, name, desc, isPro, special, url }) { + return ( + +
+
+
+ +
+
+
+
+ +
+
+

{name}

+
+

+ {desc} +

+
+ { special ?: null} +
+ +
+
+
+
+ ); +} + + +export function OpenAISVG(){ + return +} + +export function OpenAIBadge(){ + return
Created in partnership with
+} + +function PriceBadge({isPro}){ + const color = isPro ? '#ff465c' : '#00ffbf' + return
+ {isPro ? 'Pro' : 'Free'} Course +
+} + + +function Lessons({isPro, percent, count}){ + const color = isPro ? '#ff465c' : '#00ffbf' + return
+
{isPro ? 'Advanced' : 'Beginner'}
+
+

+ +
+
{count} Lessons
+
+} diff --git a/src/theme/DocItem/Footer/course.module.css b/src/theme/DocItem/Footer/course.module.css new file mode 100644 index 00000000000..ad6677bce33 --- /dev/null +++ b/src/theme/DocItem/Footer/course.module.css @@ -0,0 +1,48 @@ +.card { + all: unset; + cursor: pointer; + border: 1px solid #292b36; + border-radius: 10px; + flex-direction: column; + flex: 1; + display: flex; + overflow: hidden; + transition: .1s; +} + +img { + width: 100%; + height: 100%; + max-height: 15rem; + object-fit: cover; + border-radius: 5px; +} + +.card:hover{ + text-decoration: none; + scale: 1.01; +} + +.card_content { + padding: 36px; +} + + +.badge { + background: #00ffbf; + display: flex; + justify-content: flex-start; + gap: 8px; + align-items: center; + text-align: center; + padding: 12px 26px; + border-radius: 80px; + width: fit-content; + min-width: 342px; +} + +.openAI { + height: 22px; + color: black; +} + diff --git a/src/theme/DocItem/Footer/index.js b/src/theme/DocItem/Footer/index.js index fa35dcd823d..d3be18502af 100644 --- a/src/theme/DocItem/Footer/index.js +++ b/src/theme/DocItem/Footer/index.js @@ -6,6 +6,33 @@ import LastUpdated from "@theme/LastUpdated"; import EditThisPage from "@theme/EditThisPage"; import TagsListInline from "@theme/TagsListInline"; import styles from "./styles.module.css"; +import Course from './course'; +import SignUp from './signup'; + +const courses = [{ + name: 'Intro to ChatGPT', + desc: "Learn about ChatGPT, one of the most advanced AI systems available today, and dive into the world of Generative AI.", + special: true, + isPro: false, + percent: 60, + count: 12, + url: 'https://learn-prompting.webflow.io/course-chat-gpt-for-everyone', + src: "https://media.discordapp.net/attachments/1174416571498770492/1175581256768045137/shorter.png?ex=656bc05c&is=65594b5c&hm=25bcce0549bba96c056ad956bbbe4809bf6719269a88af6a5f6fc07e664690ef&=&width=811&height=521", + srcset: "https://assets-global.website-files.com/653e598cdeea6f44f70baa31/654ddcffb248d1b4c1126638_course-p-500.png 500w, https://assets-global.website-files.com/653e598cdeea6f44f70baa31/654ddcffb248d1b4c1126638_course-p-800.png 800w, https://assets-global.website-files.com/653e598cdeea6f44f70baa31/654ddcffb248d1b4c1126638_course-p-1080.png 1080w, https://assets-global.website-files.com/653e598cdeea6f44f70baa31/654ddcffb248d1b4c1126638_course-p-1600.png 1600w, https://assets-global.website-files.com/653e598cdeea6f44f70baa31/654ddcffb248d1b4c1126638_course-p-2000.png 2000w, https://assets-global.website-files.com/653e598cdeea6f44f70baa31/654ddcffb248d1b4c1126638_course.png 2562w", +}, +{ + name: 'Generative AI for artists', + desc: 'Learn about ChatGPT, one of the most advanced AI systems available today, and dive into the world of Generative AI.', + isPro: true, + percent: 100, + count: 12, + url: 'https://learn-prompting.webflow.io/course-chat-gpt-for-everyone', + src: "https://assets-global.website-files.com/653e598cdeea6f44f70baa31/6548dfdd8622f3f86cddbd54_ab.png", + srcset: "https://assets-global.website-files.com/653e598cdeea6f44f70baa31/6548dfdd8622f3f86cddbd54_ab-p-500.png 500w, https://assets-global.website-files.com/653e598cdeea6f44f70baa31/6548dfdd8622f3f86cddbd54_ab.png 788w", +}, +] + + function TagsRow(props) { return ( @@ -45,8 +72,12 @@ function EditMetaRow({ ); } +const securityWords = ['hack', 'security', 'inject', 'safety'] + export default function DocItemFooter() { - const { metadata } = useDoc(); + const { metadata, ...rest } = useDoc(); + console.log( metadata.description, rest.toc.map(t => t.value)) + const isSecurity = [...rest.toc.map(t => t?.value || ''), metadata.description].some(t => securityWords.some(w => t.toLowerCase().includes(w))) const { editUrl, lastUpdatedAt, @@ -64,6 +95,15 @@ export default function DocItemFooter() {