Update Footer (#1101)

* update footer * update courses * prevent style leak * update courses and links * fix: footer * fix: more --------- Co-authored-by: trigaten <[email protected]>
trigaten · Nov 23, 2023 · 94950d5 · 94950d5
1 parent 9ddbe4d
commit 94950d5
Show file tree

Hide file tree

Showing 10 changed files with 329 additions and 41 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -32,12 +32,13 @@ async function createConfig() {
         "ar",
         "de",
         "uk",
-        "id"
+        "id",
       ],
     },
     scripts: [
       {
-        src: 'https://tag.clearbitscripts.com/v1/pk_5621ff511ea83a6ec015bee0a0b5dd79/tags.js',
+        src:
+          "https://tag.clearbitscripts.com/v1/pk_5621ff511ea83a6ec015bee0a0b5dd79/tags.js",
         async: true,
       },
     ],
@@ -51,12 +52,12 @@ async function createConfig() {
               from: "/docs/basics/standard_prompt",
             },
             {
-              to: '/docs/tooling/IDEs/intro',
-              from: '/docs/IDEs/intro',
+              to: "/docs/tooling/IDEs/intro",
+              from: "/docs/IDEs/intro",
             },
             {
-              to: '/our_services',
-              from: '/consulting',
+              to: "/our_services",
+              from: "/consulting",
             },
           ],
         },
@@ -71,13 +72,11 @@ async function createConfig() {
           },
         };
       },
-      ["posthog-docusaurus",
-        {
-          apiKey: process.env.POSTHOG_API_KEY || "DEV",
-          appUrl: "https://app.posthog.com", // optional
-          enableInDevelopment: false, // optional
-        },
-      ]
+      ["posthog-docusaurus", {
+        apiKey: process.env.POSTHOG_API_KEY || "DEV",
+        appUrl: "https://app.posthog.com", // optional
+        enableInDevelopment: false, // optional
+      }],
     ],
 
     presets: [
@@ -92,8 +91,15 @@ async function createConfig() {
           },
           docs: {
             admonitions: {
-              tag: ':::',
-              keywords: ['note', 'tip', 'info', 'caution', 'danger', 'takeaways'],
+              tag: ":::",
+              keywords: [
+                "note",
+                "tip",
+                "info",
+                "caution",
+                "danger",
+                "takeaways",
+              ],
             },
             sidebarPath: require.resolve("./sidebars.js"),
             editUrl: "https://github.com/trigaten/promptgineering/tree/v1.2.3",
@@ -109,7 +115,7 @@ async function createConfig() {
                 { yamlFile: "glossary.yml" },
               ],
             ],
-            rehypePlugins: [[katex, { strict: false }]]
+            rehypePlugins: [[katex, { strict: false }]],
           },
           theme: {
             customCss: require.resolve("./src/css/custom.css"),
@@ -138,7 +144,8 @@ async function createConfig() {
         async: true,
       },
       {
-        href: "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
+        href:
+          "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
         async: true,
       },
     ],
@@ -176,9 +183,9 @@ async function createConfig() {
           content: "website",
         },
         {
-          to: 'consulting', 
-          label:"Consulting", 
-          position:"left",          
+          to: "consulting",
+          label: "Consulting",
+          position: "left",
         },
         {
           name: "twitter:card",
@@ -224,6 +231,14 @@ async function createConfig() {
           },
         ],
       },
+      announcementBar: {
+        id: "announcement",
+        content:
+          'Now available: <a href="https://learn-prompting.webflow.io/courses/intro-to-prompt-engineering">Intro to Prompt Engineering</a>',
+        backgroundColor: "#53ffd4",
+        textColor: "#000",
+        isCloseable: true,
+      },
       footer: {
         style: "dark",
         copyright: `Copyright © ${new Date().getFullYear()} Learn Prompting.`,

diff --git a/src/subsections/landingpage/Announcement.js b/src/subsections/landingpage/Announcement.js
diff --git a/src/subsections/landingpage/Hero.js b/src/subsections/landingpage/Hero.js
@@ -62,14 +62,16 @@ function Hero() {
           levels!
         </div>
         <div className="flex items-center justify-center pt-6">
-          <a href="https://learnprompting.org/docs/intro">
+          {/* <a href="https://learnprompting.org/docs/intro"> */}
+          <a href="https://learn-prompting.webflow.io">
             <Button
               onClick={() =>
                 React.useEffect(() => {
                   window.location.replace("/docs/intro");
                 }, [])
               }
-              text={"Start Learning"}
+              // text={"Start Learning"}
+              text={"See our Latest Offerings"}
               icon={
                 <RxArrowTopRight
                   className="inline-block text-white"

diff --git a/src/theme/DocItem/Footer/course.js 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, percent, count }) {
+  return (
+      <a className={classes.card} href={url}>
+        <div>
+          <div>
+            <div>
+              <img
+							className={classes.img}
+                src={src}
+                loading="lazy"
+                sizes="(max-width: 479px) 100vw, (max-width: 767px) 90vw, (max-width: 991px) 288.4185485839844px, 29vw"
+                srcset={srcset}
+                alt=""
+              />
+            </div>
+          </div>
+          <div className={classes.card_content}>
+            <div>
+              <PriceBadge isPro={isPro}/>
+            </div>
+            <div>
+              <h3>{name}</h3>
+            </div>
+            <p>
+              {desc}
+            </p>
+             {/* <div style={{height: 50}}>
+						{ special ?<OpenAIBadge/>: null}
+						 </div> */}
+            <Lessons percent={percent} count={count} isPro={false} />
+          </div>
+        </div>
+        <div></div>
+      </a>
+  );
+}
+
+
+export function OpenAISVG(){
+	return <svg className={classes.openAI} viewBox="0 0 1180 320" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="m367.44 153.84c0 52.32 33.6 88.8 80.16 88.8s80.16-36.48 80.16-88.8-33.6-88.8-80.16-88.8-80.16 36.48-80.16 88.8zm129.6 0c0 37.44-20.4 61.68-49.44 61.68s-49.44-24.24-49.44-61.68 20.4-61.68 49.44-61.68 49.44 24.24 49.44 61.68z"></path><path d="m614.27 242.64c35.28 0 55.44-29.76 55.44-65.52s-20.16-65.52-55.44-65.52c-16.32 0-28.32 6.48-36.24 15.84v-13.44h-28.8v169.2h28.8v-56.4c7.92 9.36 19.92 15.84 36.24 15.84zm-36.96-69.12c0-23.76 13.44-36.72 31.2-36.72 20.88 0 32.16 16.32 32.16 40.32s-11.28 40.32-32.16 40.32c-17.76 0-31.2-13.2-31.2-36.48z"></path><path d="m747.65 242.64c25.2 0 45.12-13.2 54-35.28l-24.72-9.36c-3.84 12.96-15.12 20.16-29.28 20.16-18.48 0-31.44-13.2-33.6-34.8h88.32v-9.6c0-34.56-19.44-62.16-55.92-62.16s-60 28.56-60 65.52c0 38.88 25.2 65.52 61.2 65.52zm-1.44-106.8c18.24 0 26.88 12 27.12 25.92h-57.84c4.32-17.04 15.84-25.92 30.72-25.92z"></path><path d="m823.98 240h28.8v-73.92c0-18 13.2-27.6 26.16-27.6 15.84 0 22.08 11.28 22.08 26.88v74.64h28.8v-83.04c0-27.12-15.84-45.36-42.24-45.36-16.32 0-27.6 7.44-34.8 15.84v-13.44h-28.8z"></path><path d="m1014.17 67.68-65.28 172.32h30.48l14.64-39.36h74.4l14.88 39.36h30.96l-65.28-172.32zm16.8 34.08 27.36 72h-54.24z"></path><path d="m1163.69 68.18h-30.72v172.32h30.72z"></path><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z"></path></svg>
+}
+
+export function OpenAIBadge(){
+	return <div className={classes.badge}><b style={{color: 'black', "height":"30px"}}>In Partnership With</b><OpenAISVG/></div>
+}
+
+function PriceBadge({isPro}){
+	const color = isPro ? '#4527fd' : '#00ffbf'
+	return <div style={{
+		fontWeight: 600,
+		fontSize: '0.95rem',
+		marginBottom: 8,
+	}}>
+					<span style={{
+						padding: '4px 8px',
+						background: color,
+						color: isPro ? 'white' :'black',
+						borderRadius: '50px',
+						marginRight: 2
+					}}>{isPro ? 'Paid' : 'Free'}</span> Course
+				</div>
+}
+
+
+function Lessons({isPro, percent, count}){
+	const color = '#ffc081'
+	return <div style={{display: 'flex', gap: 12, marginTop: '20px'}}>
+					<div style={{color}}>{isPro ? 'Advanced' : 'Beginner'}</div>
+					<div style={{
+						width: 140,
+						background: '#444',
+						height: 13,
+						margin: 'auto 0'
+					}}>
+						<div style={{background: color, width: (percent/100)*140, height: '100%'}}><br/></div>
+
+					</div>
+					<div style={{opacity: 0.8}}>{count} Lessons</div>
+				</div>
+}
diff --git a/src/theme/DocItem/Footer/course.module.css b/src/theme/DocItem/Footer/course.module.css
@@ -0,0 +1,49 @@
+.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%;
+  height: 20rem;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.card:hover{
+	text-decoration: none;
+	scale: 1.01;
+}
+
+.card_content {
+	padding: 36px;
+	max-height: 300px;
+}
+
+
+.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
@@ -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: 'ChatGPT for Everyone',
+  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: 30,
+  count: 15,
+  url: 'https://learn-prompting.webflow.io/course-chat-gpt-for-everyone',
+  src: "https://assets-global.website-files.com/655b6730173650f3f66a0f98/655b6c0666126b34d261c42f_ChatGPT%20for%20Everyone%20-%20Course%20Page.png",
+  srcset: "",
+},
+{
+  name: 'Intro to Prompt Engineering',
+  desc: 'Learn about the basics of Prompt Engineering, and how to effectively communicate with AI.',
+  isPro: true,
+  percent: 30,
+  count: 12,
+  url: 'https://learn-prompting.webflow.io/courses/intro-to-prompt-engineering',
+  src: "https://assets-global.website-files.com/655b6730173650f3f66a0f98/655e35962450a3b5e5be1276_A%20blue%20and%20pink%20abstract%20background.jpg",
+  srcset: "",
+},
+]
+
+
 
 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,16 @@ export default function DocItemFooter() {
     <footer
       className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}
     >
+
+      <h2 style={{marginTop: 60, marginBottom: 32, fontSize: 32}}>
+       Want to learn more?</h2>
+      <div className={styles.courses}>
+        {/* for oai */}
+        {courses.filter(c => c).slice(1, 2).map(c => <Course key={c.name} src={c.src} srcset={c.srcset} {...c}/>)}
+      </div>
+
+      <br />
+      <SignUp/>
       {canDisplayTagsRow && <TagsRow tags={tags} />}
       {canDisplayEditMetaRow && (
         <EditMetaRow
@@ -73,22 +114,7 @@ export default function DocItemFooter() {
           formattedLastUpdatedAt={formattedLastUpdatedAt}
         />
       )}
-      <br />
-      <div style={{ textAlign: "center" }}>
-        <p>
-          <strong>Get the Latest Prompts Straight to Your Inbox</strong>
-        </p>
-        <iframe
-          src="https://embeds.beehiiv.com/ae49cad6-1b3a-4ec2-91fa-73b7f3e0188a?slim=true"
-          data-test-id="beehiiv-embed"
-          height="52"
-          width="100%"
-          frameBorder="0"
-          scrolling="no"
-          style={{ margin: 0, borderRadius: 0, backgroundColor: "transparent" }}
-          className="rounded-l-md bg-white text-dark/500 text-sm font-medium tracking-tight ring-0 focus:outline-none w-[250px] md:w-[450px] focus:ring-0"
-        />
-      </div>
+
     </footer>
   );
-}
+}