Added Subscribe form

README.md

@@ -15,8 +15,3 @@ The `Booking` section is a Calendly iframe displayed from offsite and must be co
 ## Contributing
 
 If you find a bug or have a feature request, please open an issue on Github. If you would like to contribute code, please open a pull request. We welcome contributions!
-
-## To-do
-
-- [ ] Create a Promptly Github profile page.
-- [ ] Add more socials.

src/App.css

@@ -64,11 +64,16 @@ button {
 }
 
 input, textarea {
-  @apply text-base font-sans w-full border-gray-200 border-2;
+  @apply p-2 text-base font-sans w-full border-gray-200 border-2 placeholder:text-gray-500;
+}
+
+ol, ul {
+  list-style-position: outside;
+  padding-left: 1em;
 }
 
 .button {
-  @apply p-2 m-0 bg-blue-600 hover:bg-blue-800 text-white rounded-md;
+  @apply p-2 m-0 bg-slate-600 hover:bg-slate-800 text-white rounded-md;
 }
 
 .animated {

src/components/ContactForm.css

@@ -1,3 +1,11 @@
+.contact-section {
+  @apply flex flex-col w-full place-items-center;
+}
+
+.contact-container {
+  @apply md:w-1/2 lg:w-1/3 p-4;
+}
+
 form {
   @apply flex flex-col text-center gap-4;
 }

src/components/ContactForm.tsx

@@ -15,11 +15,11 @@ export default function ContactForm() {
 
   // Return component only if we have a formId
   return (
-    <section className="flex flex-col w-full place-items-center" id="contact">
+    <section className="contact-section" id="contact">
       <div className="headercontainer">
         <h1 className="pt-12 pb-8">Contact</h1>
       </div>
-      <div className="md:w-1/2 p-4">
+      <div className="contact-container">
         <p>We'll build your made-to-order AI agent, app, or software automation in Python and Typescript. Contact us now to get a quote!</p>
         {state ? 
           <form onSubmit={handleSubmit}>

src/components/Events.css

@@ -0,0 +1,3 @@
+.events {
+  @apply flex flex-col place-items-center px-4 py-20 font-sans gap-6 lg:w-2/3;
+}

src/components/Events.tsx

@@ -2,14 +2,16 @@ import { useEffect, useRef } from 'react';
 import { Calendar } from '@fullcalendar/core';
 import listPlugin from '@fullcalendar/list';
 import eventsJSON from '../customizations/events.json';
+import SubscribeForm from '../components/SubscribeForm';
+import './Events.css';
 
 // Put location information in the event's title
 // { title: 'Meeting at Jim's Deli',
 // start: '2024-03-16T10:30:00',
 // end: '2024-03-16T12:30:00',
 // url: 'http://zoom.com/roomxyz' }
 
-export const Events = () => {
+export default function Events() {
   const calendarRef = useRef(null);
 
   useEffect(() => {
@@ -18,6 +20,9 @@ export const Events = () => {
         plugins: [listPlugin],
         initialView: 'listMonth',
         events: eventsJSON,
+        headerToolbar: {
+          right: 'prev,next'
+        },
       });
       calendar.render();
 
@@ -27,11 +32,12 @@ export const Events = () => {
   }, []); // Empty dependency array means this effect runs once after the initial render
 
   return (
-    <section className="flex flex-col place-items-center py-20 font-sans lg:w-2/3" id="events">
+    <section className="events" id="events">
       <div className="headercontainer">
         <h1 className="pt-12 pb-8">Events</h1>
       </div>
       <div className="w-full p-0 h-64" ref={calendarRef} id='calendar'></div>
+      <SubscribeForm />
     </section>
   );
 };

src/components/SubscribeForm.tsx

@@ -0,0 +1,55 @@
+import './SubscribeForm.css';
+import siteProperties from '../customizations/siteproperties.json';
+import SiteProperties from '../types/siteproperties';
+import { useEffect, useState } from 'react';
+
+const SubscribeForm = () => {
+  const properties: SiteProperties = siteProperties;
+  const FORM_ID = properties.convertKitFormId;
+  const DATA_UID = properties.convertKitDataUid;
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const status = searchParams.get('status');
+    if (status === 'success') {
+      setMessage('Success! Now check your email to confirm your subscription.');
+    } else if (status === 'failure') {
+      setMessage('There was an issue with your subscription. Please try again.');
+    }
+  }, []);
+
+  return(
+    <div className='convertkit-form' id="subscribe">
+      <p>Subscribe to our newsletter 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">
+          <ul className="formkit-alert formkit-alert-error" data-element="errors" data-group="alert">
+          </ul>
+          <div data-element="fields" data-stacked="false" className="seva-fields formkit-fields">
+            <div className="formkit-field">
+              <input className="formkit-input" name="fields[name]" aria-label="Name" placeholder="Name" type="text" />
+            </div>
+            <div className="formkit-flow-control">
+              <div className="formkit-field">
+                <input className="formkit-input" name="email_address" aria-label="Email Address" placeholder="Email Address" required type="email" />
+              </div>
+              <button data-element="submit" className="button">
+                <div className="formkit-spinner">
+                  <div></div>
+                  <div></div>
+                  <div></div>
+                </div>
+                <span>Subscribe</span>
+              </button>
+            </div>
+            {message && <div>{message}</div>}
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default SubscribeForm;

src/customizations/siteproperties.json

@@ -9,6 +9,8 @@
   "favicon": "/images/favicon.ico",
   "robots": {"index": true, "follow": true},
   "formspreeFormId": "xqkrdalo",
+  "convertKitFormId": "6344299",
+  "convertKitDataUid": "8e2f770298",
   "calendlyUrl": "https://calendly.com/promptly-technologies/10min",
   "zazzleUrl" : "https://feed.zazzle.com/store/promptlytechnologies/rss",
   "callToAction": "Book a free ten-minute meeting today to discuss how Promptly can help your business grapple with disruption by AI",

src/pages/Home.tsx

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

src/types/siteproperties.ts

@@ -17,6 +17,8 @@ interface SiteProperties {
     robots: Robots;
     calendlyUrl?: string;
     formspreeFormId?: string;
+    convertKitFormId?: string;
+    convertKitDataUid?: string;
     substackUrl?: string;
     zazzleUrl?: string;
     callToAction: string;