Restructured nav menus, Used font-sans in store, added some more comi…

…c panels

README.md

@@ -6,11 +6,15 @@ The business website of Promptly Technologies, LLC is designed in the style of a
 
 ## Structure and customization
 
-The entry points of the site, of course, are `index.html`, `main.tsx`, and `App.tsx`, as is traditional in React + Typescript architecture. The site consists of two pages, `Home` and `Legal`. The former hosts the core of the site, while the latter hosts the privacy policy. The Home consists of a `Hero` section (the "cover" of our comic book), a `Story` section (the comic strips), a `Bookings` section for users to book consultations (roughly analogous to the subscription page in an old-timey comic book), and `Credits` section (really our "Team" section but presented in the style of comic book credits).
+The entry points of the site, of course, are `index.html`, `main.tsx`, and `App.tsx`, as is traditional in React + Typescript architecture.
+
+The site consists of three pages, `Home`, `Legal`, and `Store`. The `Home` page hosts the core of the site, `Legal` hosts the terms and conditions and privacy policy, and `Store` hosts products syndicated from Zazzle via an RSS feed which we scrape using a Github Actions script.
+
+The `Home` page consists of a `Hero` section (the "cover" of our comic book), a `ContactForm` section powered by FormSpree, a `Story` section (the comic strips), an `Events` section with a subscription form powered by ConvertKit, and a `Credits` section (really our "Team" section but presented in the style of comic book credits).
 
 Some of the metadata and content of the site is controlled from JSON files in the `src/customizations` folder. You can add new social profiles here, and also change the text that appears in the hero section.
 
-The `Booking` section is a Calendly iframe displayed from offsite and must be controlled from the Calendly dashboard.
+To use the `ContactForm` or `SubscribeForm` components, you will need [FormSpree](https://formspree.io/) and [ConvertKit](https://convertkit.com/) accounts, respectively. There is also a `Bookings` component, not currently implemented, which is powered by [Calendly](https://calendly.com/). Sign up, create a form, and put your form URL or ID(s) in `src/customizations/siteproperties.json`.
 
 ## Contributing
 

src/components/Nav.tsx

@@ -4,16 +4,22 @@ import './Nav.css';
 
 const Nav: React.FC = () => {
     return (
-            <div className="space-x-6 inline-flex flex-wrap justify-center">
-                <HashLink to="#story" className="nav-link font-bangers">
+            <div className="space-x-6 inline-flex flex-wrap justify-center font-bangers">
+                <HashLink to="#contact" className="nav-link">
+                    Contact
+                </HashLink>
+                <HashLink to="#story" className="nav-link">
                     Story
                 </HashLink>
-                <HashLink to="#book" className="nav-link font-bangers">
-                    Bookings
+                <HashLink to="#events" className="nav-link">
+                    Events
                 </HashLink>
-                <HashLink to="#credits" className="nav-link font-bangers">
+                <HashLink to="#credits" className="nav-link">
                     Credits
                 </HashLink>
+                <HashLink to="/Store" className="nav-link">
+                    Store
+                </HashLink>
             </div>
     );
 };

src/components/Products.css

@@ -1,66 +1,44 @@
 .product-grid {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    @apply mt-12;
+    @apply font-sans flex flex-wrap justify-center mt-12;
 }
 
 .product-item {
-    position: relative;
-    max-width: 250px;
-    margin: 0 auto;
+    @apply relative max-w-xs mx-auto transition-opacity duration-300;
 }
 
-/* The rest of your CSS remains unchanged */
 .product-link {
-    text-decoration: none;
-    color: inherit;
+    @apply no-underline;
 }
 
 .product-image-container {
-    position: relative;
-    overflow: hidden;
+    @apply relative overflow-hidden;
 }
 
 .product-image {
-    width: 100%;
-    transition: opacity 0.3s ease;
+    @apply w-full;
 }
 
+/* Convert styles to Tailwind with @apply directives */
 .product-hover-banner {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    padding: 10px;
-    opacity: 0;
-    transition: opacity 0.3s ease;
+    @apply absolute bottom-0 left-0 right-0 bg-black p-2 opacity-0;
 }
 
 .product-title {
-    display: block;
-    font-weight: bold;
-    @apply text-white;
+    @apply block text-white font-bold;
 }
 
 .product-description {
-    display: block;
-    font-size: 0.9em;
-    line-height: 1.2;
-    @apply text-white;
+    @apply block text-white text-sm leading-tight;
 }
 
 .product-price {
-    text-align: center;
-    margin-top: 10px;
-    font-weight: bold;
+    @apply text-center py-2 font-bold;
 }
 
 .product-item:hover .product-image {
-    opacity: 0.7;
+    @apply opacity-70;
 }
 
 .product-item:hover .product-hover-banner {
-    opacity: 1;
-}
+    @apply opacity-100 bg-opacity-60;
+}

src/components/Products.tsx

@@ -6,6 +6,11 @@ import './Products.css';
 const Products: React.FC = () => {
     const productFeed: ProductFeed = productFeedJSON;
 
+    // Replace '"' with '"' in the description
+    const cleanDescription = (description: string) => {
+        return description.replace(/"/g, '"');
+    }
+
     const truncateDescription = (description: string, maxLength: number = 150) => {
         return description.length <= maxLength ? description : description.slice(0, maxLength) + '...';
     };
@@ -22,7 +27,7 @@ const Products: React.FC = () => {
                         <img src={item["media:content"]["@_url"]} alt={item.title} className="product-image"/>
                         <div className="product-hover-banner">
                             <span className="product-title">{item["media:title"]}</span>
-                            <span className="product-description">{truncateDescription(item["media:description"])}</span>
+                            <span className="product-description">{truncateDescription(cleanDescription(item["media:description"]))}</span>
                         </div>
                     </div>
                     <div className="product-price">{item["media:price"]}</div>

src/components/SimpleNav.tsx

@@ -8,9 +8,24 @@ const FullNav: React.FC = () => {
         <div className="mx-auto space-x-6">
             <div className="simplenavlinks">
                 <HashLink to="/#" className="simplenavlink">Home</HashLink>
-                <HashLink to="/Store" className="simplenavlink">Store</HashLink>
-                <Link to="https://knowledgeworkersguide.substack.com/" className="simplenavlink">Newsletter</Link>
-                <HashLink to="/Legal" className="simplenavlink">Privacy Policy</HashLink>
+                <HashLink to="#contact" className="simplenavlink">
+                    Contact
+                </HashLink>
+                <HashLink to="#story" className="simplenavlink">
+                    Story
+                </HashLink>
+                <HashLink to="#events" className="simplenavlink">
+                    Events
+                </HashLink>
+                <HashLink to="#credits" className="simplenavlink">
+                    Credits
+                </HashLink>
+                <HashLink to="/Legal" className="simplenavlink">
+                    Privacy Policy
+                </HashLink>
+                <HashLink to="/Store" className="simplenavlink">
+                    Store
+                </HashLink>
             </div>
         </div>
     );

src/components/Story.tsx

@@ -3,6 +3,7 @@ import ThreePanelBlock from './ThreePanelBlock';
 import ThreePanelRow from './ThreePanelRow';
 import ComicPanel from './ComicPanel';
 import Feature from './Feature';
+import Events from '../components/Events';
 
 const Story: React.FC = () => {
   return (
@@ -32,7 +33,7 @@ const Story: React.FC = () => {
           horizontalPosition="left"
           verticalPosition="bottom"
         />
-      ]} widthClass='xl:w-3/4'/>
+      ]} widthClass='xl:w-3/4' orientation='right' />
       <Feature />
       <ThreePanelRow panels={[
         <ComicPanel 
@@ -56,6 +57,28 @@ const Story: React.FC = () => {
           verticalPosition="top"
         />
       ]} widthClass='xl:w-3/4'/>
+      <Events />
+      <ThreePanelBlock panels={[
+        <ComicPanel 
+          text="At Promptly, we're working toward a future in which AI serves the cause of human thriving."
+          backgroundImage="images/greening.jpg"
+          altText="Robot gazes up through the canopy of a forest"
+          verticalPosition="top"
+        />,
+        <ComicPanel 
+          text="This requires new business and training paradigms that give workers equity ownership of models that train on their work."
+          backgroundImage="images/opensource.jpg"
+          altText="Plucky open-source developers collaborate together in a shared workspace"
+          horizontalPosition="left"
+          verticalPosition="bottom"
+        />,
+        <ComicPanel 
+          text="Contact us today to discuss how you can support this mission. Let's partner to empower small businesses and non-profits through AI!"
+          backgroundImage="images/nonprofit.jpg"
+          altText="A diverse team of nonprofit volunteers"
+          verticalPosition="bottom"
+        />
+      ]} widthClass='xl:w-3/4' orientation='left' />
     </section>
   );
 };

src/components/SubscribeForm.tsx

@@ -21,7 +21,7 @@ const SubscribeForm = () => {
 
   return(
     <div className='convertkit-form' id="subscribe">
-      <p>Subscribe to our newsletter to get notified about new events!</p>
+      <p>Subscribe to get notified about new events!</p>
       <script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
       <form action={`https://app.convertkit.com/forms/${FORM_ID}/subscriptions`} className="seva-form formkit-form" method="post" data-sv-form={FORM_ID} data-uid={DATA_UID} data-format="inline" data-version="5" data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to confirm your subscription.&quot;,&quot;redirect_url&quot;:&quot;&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;fathom&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:true,&quot;url&quot;:&quot;https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:false},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}" min-width="400 500 600 700 800">
         <div data-style="clean">

src/components/ThreePanelBlock.tsx

@@ -1,18 +1,37 @@
-import React from 'react';
 import PanelProps from '../types/panels';
 
-const ThreePanelBlock: React.FC<PanelProps> = ({ panels, widthClass='w-auto', heightClass='h-auto' }) => {
+interface ThreePanelBlockProps extends PanelProps {
+  orientation?: 'left' | 'right';
+}
+
+const ThreePanelBlock: React.FC<ThreePanelBlockProps> = ({ panels, widthClass = 'w-auto', heightClass = 'h-auto', orientation = 'right' }) => {
   return (
     <div className={`${widthClass} ${heightClass} md:max-h-screen mx-auto grid gap-4 px-4 pt-4 grid-cols-1 md:grid-cols-4 md:grid-rows-2`}>
-      <div className="w-full md:col-span-2 md:row-span-1">
-        {panels[0]}
-      </div>
-      <div className="w-full md:col-span-2 md:row-start-2 md:row-end-3">
-        {panels[1]}
-      </div>
-      <div className="w-full md:col-start-3 md:col-end-5 md:row-span-2">
-        {panels[2]}
-      </div>
+      {orientation === 'left' ? (
+        <>
+          <div className="w-full md:col-start-1 md:col-span-2 md:row-span-2">
+            {panels[0]}
+          </div>
+          <div className="w-full md:col-span-2 md:col-start-3">
+            {panels[1]}
+          </div>
+          <div className="w-full md:col-span-2 md:col-start-3">
+            {panels[2]}
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="w-full md:col-span-2 md:row-span-1">
+            {panels[0]}
+          </div>
+          <div className="w-full md:col-span-2 md:row-start-2">
+            {panels[1]}
+          </div>
+          <div className="w-full md:col-start-3 md:col-span-2 md:row-span-2">
+            {panels[2]}
+          </div>
+        </>
+      )}
     </div>
   );
 };

src/pages/Home.tsx

@@ -3,7 +3,6 @@ import './Home.css';
 import Hero from '../components/Hero';
 import ContactForm from '../components/ContactForm';
 import Story from '../components/Story';
-import Events from '../components/Events';
 import Credits from '../components/Credits';
 
 const Home: React.FC = () => {
@@ -12,7 +11,6 @@ const Home: React.FC = () => {
         <Hero />
         <ContactForm />
         <Story />
-        <Events />
         <Credits />
     </main>
   )