Merge pull request #1502 from skillrecordings/jl/feat/workshop-tweaks

Jl/feat/workshop tweaks
skillrecordings · Jan 30, 2025 · da2628b · da2628b
2 parents 370b870 + 6f0a837
commit da2628b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 126 deletions.
diff --git a/src/components/workshop/cursor/Instructor.tsx b/src/components/workshop/cursor/Instructor.tsx
@@ -37,19 +37,6 @@ export default function Instructor() {
                 height={300}
                 className="rounded-lg"
               />
-              <style jsx global>{`
-                .tweet-actions_actions__9KOQD,
-                .tweet-replies_replies__Ig_qi,
-                [data-tweet-actions],
-                [data-testid='tweet-actions'],
-                .tweet-actions,
-                .tweet-replies {
-                  display: none !important;
-                }
-                .tweet-info_info__OeQ4g {
-                  padding-top: 0.75rem !important;
-                }
-              `}</style>
               <Tweet id="1884674424374214692" />
             </div>
           </div>

diff --git a/src/components/workshop/cursor/SignUpForm.tsx b/src/components/workshop/cursor/SignUpForm.tsx
@@ -1,71 +1,15 @@
 'use client'
 
-import {useState, useRef, forwardRef, useImperativeHandle} from 'react'
-import {Button} from './ui/button'
-import {Input} from './ui/input'
+import {forwardRef} from 'react'
 import {motion} from 'framer-motion'
-import useCio from '@/hooks/use-cio'
-import {trpc} from '@/app/_trpc/client'
+import {Widget} from '@typeform/embed-react'
 import {fadeInUp} from './animations'
 
 export interface SignUpFormRef {
   focus: () => void
 }
 
 const SignUpForm = forwardRef<SignUpFormRef>((props, ref) => {
-  const [email, setEmail] = useState('')
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [isSuccess, setIsSuccess] = useState(false)
-  const {subscriber} = useCio()
-  const emailInputRef = useRef<HTMLInputElement>(null)
-  const identify = trpc.customerIO.identify.useMutation({
-    onSuccess: (data) => {
-      setIsSuccess(true)
-    },
-    onError: (error) => {
-      console.log('ERROR', error)
-    },
-  })
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (isSubmitting) return
-
-    setIsSubmitting(true)
-    let subscriberId = subscriber?.id
-
-    try {
-      console.log('Submitting email:', email)
-      const currentDateTime = Math.floor(Date.now() * 0.001)
-
-      if (!subscriberId) {
-        identify.mutateAsync({
-          email,
-          selectedInterests: {cursor_5day_workshop_waitlist: currentDateTime},
-        })
-      } else {
-        identify.mutateAsync({
-          id: subscriberId,
-          selectedInterests: {cursor_5day_workshop_waitlist: currentDateTime},
-        })
-      }
-
-      setEmail('')
-      console.log('Successfully submitted email')
-    } catch (error) {
-      console.error('Failed to submit:', error)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      emailInputRef.current?.focus()
-    },
-  }))
-
   return (
     <section id="signup" className="py-32 relative">
       <div className="container mx-auto px-4 relative z-10">
@@ -75,60 +19,19 @@ const SignUpForm = forwardRef<SignUpFormRef>((props, ref) => {
           transition={fadeInUp.transition}
           className="max-w-2xl mx-auto"
         >
-          {isSuccess ? (
-            <motion.div
-              initial={{opacity: 0, y: 20}}
-              animate={{opacity: 1, y: 0}}
-              transition={{duration: 0.5}}
-              className="flex flex-col justify-center items-center p-6 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900 min-h-[333px]"
-            >
-              <h2 className="text-2xl font-bold text-green-800 dark:text-green-200 mb-2">
-                Thanks for Joining!
-              </h2>
-              <p className="text-green-700 dark:text-green-400 text-balance text-center">
-                We'll keep you updated about the workshop. Check your inbox for
-                a confirmation email.
-              </p>
-            </motion.div>
-          ) : (
-            <>
-              <h2 className="mb-4 text-3xl font-bold text-center dark:text-white text-gray-900">
-                Ready to Transform Your Cursor Workflow?
-              </h2>
-              <p className="mb-8 text-center text-gray-500 dark:text-gray-400 mx-auto">
-                Secure your seat in this 5-day, hands-on workshop designed to
-                level up your development process. Overcome the frustration of
-                complex integrations, learn to handle failures gracefully, and
-                discover powerful planning strategies to keep you shipping code
-                with confidence.
-              </p>
-              <form onSubmit={handleSubmit} className="max-w-md mx-auto">
-                <div className="flex space-x-2">
-                  <Input
-                    ref={emailInputRef}
-                    type="email"
-                    placeholder="Enter your email to join the waitlist"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    disabled={isSubmitting}
-                    className="flex-grow bg-gray-50 dark:bg-gray-800/50 dark:border-gray-800 border-gray-200 text-gray-900 dark:text-white placeholder:text-gray-500"
-                  />
-                  <Button
-                    type="submit"
-                    disabled={isSubmitting}
-                    className="bg-blue-500 text-white font-semibold transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {isSubmitting ? 'Joining...' : 'Join Waitlist'}
-                  </Button>
-                </div>
-              </form>
-              <p className="mt-4 text-center text-sm text-gray-500">
-                We&apos;ll only send you essential info about the course—no
-                spam.
-              </p>
-            </>
-          )}
+          <h2 className="mb-4 text-3xl font-bold text-center dark:text-white text-gray-900">
+            Ready to Transform Your Cursor Workflow?
+          </h2>
+          <p className="mb-8 text-center text-gray-500 dark:text-gray-400 mx-auto">
+            Request a seat in this 5-day, hands-on workshop designed to level up
+            your development process. Overcome the frustration of complex
+            integrations, learn to handle failures gracefully, and discover
+            powerful planning strategies to keep you shipping code with
+            confidence.
+          </p>
+          <div className="aspect-[16/9] w-full">
+            <Widget id="Qe8W3N2B" className="w-full h-52" />
+          </div>
         </motion.div>
       </div>
     </section>

diff --git a/src/components/workshop/cursor/styles.css b/src/components/workshop/cursor/styles.css
@@ -79,4 +79,15 @@
   color: red !important;
   background: none !important;
   -webkit-text-fill-color: red !important;
-} 
+} 
+
+div[class^='tweet-actions'],
+div[class^='tweet-replies'] {
+  display: none !important;
+}
+
+div[class^='tweet-info'] {
+  margin-top: 0.75rem !important;
+  justify-content: center !important;
+  align-items: center !important;
+}