style: update cursor workshop (#1506)

* style: enhance Cursor workshop page styling and Typeform integration

* style: update Cursor workshop page layout and content

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/components/workshop/cursor/Features.tsx

@@ -42,35 +42,34 @@ const features = [
   {
     id: 'advanced-composer-agents',
     title: 'Composer Toolchain Pipelines',
-    description:
-      'Create specialized Composer workflows and agents that automate tasks you’d typically run in the terminal—speeding up your entire dev process.',
+    description: `Create specialized Composer workflows and agents that automate tasks you'd typically run in the terminal—speeding up your entire dev process`,
     icon: Cloud,
   },
 ]
 
 export default function Features() {
   return (
-    <section className="py-24 relative">
-      <div className="container mx-auto px-4 relative z-10">
+    <section className="py-10 relative">
+      <div className="container mx-auto px-6 sm:px-8 relative z-10">
         <motion.h2
           {...fadeInUp}
-          className="mb-16 text-3xl font-bold text-center dark:text-white"
+          className="mb-5 lg:text-3xl sm:text-2xl text-xl font-bold dark:text-white"
         >
-          What You&apos;ll Master
+          Essential Skills You'll Develop
         </motion.h2>
         <motion.div
           variants={staggerContainer}
           initial="hidden"
           animate="show"
-          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+          className="grid md:gap-8 gap-5 md:grid-cols-2 lg:grid-cols-3"
         >
           {features.map((feature) => {
             const Icon = feature.icon
             return (
               <motion.div
                 key={feature.id}
                 variants={staggerItem}
-                className="group relative bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-800 rounded-lg p-6 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors drop-shadow-lg"
+                className="group relative bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-800 rounded-lg p-6 drop-shadow-lg"
               >
                 <div className="relative">
                   <div className="flex items-center mb-4 gap-2">

src/components/workshop/cursor/Hero.tsx

@@ -6,6 +6,8 @@ import {useState, useEffect} from 'react'
 import './styles.css'
 import {ArrowCircleDownIcon} from '@heroicons/react/solid'
 import type {SignUpFormRef} from './SignUpForm'
+import Image from 'next/image'
+import {Button} from '@/ui'
 
 const phrases = [
   'Conquer the Complexity of',
@@ -52,40 +54,54 @@ export default function Hero({formRef}: HeroProps) {
   }, [])
 
   return (
-    <section className="py-12 md:py-20 text-center relative overflow-hidden">
+    <section className="sm:py-12 py-8 bg-white dark:bg-gray-900 md:py-10 text-center  overflow-hidden">
       <div className="absolute inset-0 pattern-dots" />
-      <motion.div {...scaleIn} className="relative max-w-4xl mx-auto px-4">
+      <div
+        aria-hidden="true"
+        className="absolute inset-0 w-full h-full bg-gradient-to-b dark:from-gray-900/90 dark:to-gray-900/70 from-gray-50 to-transparent"
+      />
+      <motion.div {...scaleIn} className="relative max-w-4xl mx-auto px-6">
+        <Image
+          className="mx-auto mb-5 sm:px-0 px-10"
+          quality={100}
+          src="https://res.cloudinary.com/dg3gyk0gu/image/upload/v1739447750/cursor-workshop-perspective_2x_h5fvrr.png"
+          alt="Cursor IDE"
+          width={1027 / 2.5}
+          height={601 / 2.5}
+        />
         <motion.h1
           {...fadeInUp}
-          className="relative mb-6 font-extrabold tracking-tight dark:text-white leading-tight"
-          style={{fontSize: 'clamp(1.5rem, 4vw + 1rem, 3.75rem)'}}
+          className="lg:text-5xl sm:text-4xl text-xl flex flex-col relative mb-6 font-extrabold tracking-tight dark:text-white leading-tight"
         >
-          <span className="relative h-[1.2em] block mb-2">
+          <span className="relative h-[1em] block mb-2">
             <div key={phraseIndex}>
               <AnimatedPhrase text={phrases[phraseIndex]} />
             </div>
           </span>
-          <span className="dark:text-gray-400 text-gray-800 drop-shadow-lg dark:drop-shadow-lg">
-            Cursor
-          </span>{' '}
-          in Just{' '}
-          <span className="dark:text-gray-400 text-gray-800 drop-shadow-lg dark:drop-shadow-lg">
-            5 Days
-          </span>
+          <span className="">Cursor</span>
         </motion.h1>
 
         <motion.p
           {...fadeInUp}
           transition={{delay: 0.1}}
-          className="relative mb-8 text-lg md:text-xl text-gray-500 max-w-3xl mx-auto leading-relaxed"
+          className="relative mb-8 sm:text-lg md:text-xl dark:text-gray-200 text-gray-700 max-w-3xl mx-auto leading-relaxed"
         >
           Join{' '}
-          <span className="text-gray-900 dark:text-white font-medium">
+          <span className="text-gray-900 pl-2 inline-flex items-baseline md:gap-2 gap-1 dark:text-white font-medium">
+            <Image
+              src={
+                'https://egghead.io/_next/image?url=https%3A%2F%2Fd2eip9sf3oo6c2.cloudfront.net%2Finstructors%2Favatars%2F000%2F000%2F005%2Fsquare_64%2Favatar-500x500.jpg&w=96&q=75'
+              }
+              alt="John Lindquist"
+              width={40}
+              height={40}
+              className="rounded-full relative md:translate-y-3 translate-y-2 md:w-10 w-7"
+            />{' '}
             John Lindquist
           </span>
-          , founder of egghead.io, for an immersive 5-day workshop designed to
-          help you conquer the frustration of getting stuck with complex AI
-          tools. You'll learn how to turn failures into successes by mastering{' '}
+          , founder of egghead.io, for an immersive workshop designed to help
+          you conquer the frustration of getting stuck with complex AI tools.
+          You'll learn how to turn failures into successes by mastering{' '}
           <span className="text-gray-900 dark:text-white font-medium">
             Chat, Composer, and Bugfinding
           </span>{' '}
@@ -98,16 +114,16 @@ export default function Hero({formRef}: HeroProps) {
           transition={{delay: 0.3, type: 'spring', stiffness: 200}}
           className="relative"
         >
-          <Link
-            href="#signup"
-            onClick={(e) => scrollToSignup(e, formRef)}
-            className="group flex flex-col items-center justify-center w-fit mx-auto hover:cursor-pointer"
+          <Button
+            asChild
+            size="lg"
+            className=" sm:mt-5 dark:bg-white dark:text-black bg-black text-white font-semibold"
           >
-            <p className="relative inline-flex items-center justify-center rounded-md bg-[var(--accent-9)] px-8 py-3 text-base font-semibold text-black dark:text-white transition-all duration-200 group-hover:bg-[var(--accent-10)] group-hover:scale-105 focus:outline-none focus:ring-2 focus:ring-[var(--accent-9)] focus:ring-offset-2 focus:ring-offset-gray-900">
+            <Link href="#signup" onClick={(e) => scrollToSignup(e, formRef)}>
               Join the Waitlist
-            </p>
-            <ArrowCircleDownIcon className="group-hover:scale-105 w-8 h-8 transition-all duration-200" />
-          </Link>
+              {/* <ArrowCircleDownIcon className="group-hover:scale-105 w-8 h-8 transition-all duration-200" /> */}
+            </Link>
+          </Button>
         </motion.div>
       </motion.div>
     </section>

src/components/workshop/cursor/Instructor.tsx

@@ -6,20 +6,31 @@ import {Tweet} from 'react-tweet'
 
 export default function Instructor() {
   return (
-    <section className="py-24 relative">
-      <div className="container mx-auto px-4 text-center relative z-10">
-        <motion.div {...fadeInUp} className="max-w-3xl mx-auto">
-          <div className="mx-auto flex w-full max-w-3xl flex-col-reverse items-center justify-between gap-10 px-6 sm:gap-20 md:flex-row">
+    <section className="md:py-24 sm:py-16 py-5 relative">
+      <div className="mx-auto px-4 text-center relative z-10">
+        <motion.div {...fadeInUp} className="max-w-screen-lg mx-auto">
+          <div className="mx-auto flex w-full  flex-col md:items-start items-center justify-between gap-10 px-6 sm:gap-16 md:flex-row">
+            <div className="flex flex-shrink-0 flex-col items-center gap-8">
+              <Image
+                src="https://res.cloudinary.com/dg3gyk0gu/image/upload/v1683164538/assets/john.webp"
+                alt="John Lindquist"
+                width={300}
+                height={300}
+                className="rounded-lg sm:max-w-full max-w-32"
+              />
+
+              {/* <Tweet id="1884674424374214692" /> */}
+            </div>
             <div>
-              <h2 className="mb-8 text-3xl font-bold dark:text-white flex flex-col items-center sm:items-start">
-                <span className="font-heading dark:text-primary text-sm uppercase tracking-widest">
+              <h2 className="mb-8 text-3xl font-bold dark:text-white flex flex-col items-center md:items-start">
+                <span className="opacity-80 text-xs uppercase">
                   Your Instructor
                 </span>
                 <span className="font-heading text-3xl font-semibold sm:text-4xl">
                   John Lindquist
                 </span>
               </h2>
-              <p className="mb-8 text-lg text-gray-500 dark:text-gray-400 text-left">
+              <p className="mb-8 text-lg opacity-90 md:text-left text-center">
                 John Lindquist is your guide through the complexities of
                 AI-driven development. As the founder of egghead.io, he has
                 helped thousands of developers navigate new technologies with
@@ -29,17 +40,13 @@ export default function Instructor() {
                 Composer, and Bugfinding modes.
               </p>
             </div>
-            <div className="flex flex-col items-center gap-8">
-              <Image
-                src="https://res.cloudinary.com/dg3gyk0gu/image/upload/v1683164538/assets/john.webp"
-                alt="John Lindquist"
-                width={300}
-                height={300}
-                className="rounded-lg"
-              />
-              <Tweet id="1884674424374214692" />
-            </div>
           </div>
+          <blockquote className="my-16">
+            <p className="text-xl font-semibold tracking-tight italic">
+              "John is the cursor god"
+            </p>
+            <div className="opacity-50">— Sunil Pai</div>
+          </blockquote>
         </motion.div>
       </div>
     </section>

src/components/workshop/cursor/SignUpForm.tsx

@@ -21,29 +21,32 @@ const SignUpForm = forwardRef<SignUpFormRef>((props, ref) => {
   }, [])
 
   return (
-    <section id="signup" className="py-32 relative">
+    <section id="signup" className="py-16 relative">
       <div className="container mx-auto px-4 relative z-10">
         <motion.div
           initial={fadeInUp.initial}
           animate={fadeInUp.animate}
           transition={fadeInUp.transition}
           className="max-w-2xl mx-auto"
         >
-          <h2 className="mb-4 text-3xl font-bold text-center dark:text-white text-gray-900">
+          <h2 className="mb-4 lg:text-4xl sm:text-3xl text-2xl font-bold text-center dark:text-white text-gray-900">
             Ready to Master Cursor?
           </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
+          <p className="mb-8 text-center text-lg opacity-80 mx-auto">
+            Request a seat in this 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">
+          <div className=" w-full">
             <div
               data-tf-widget="Qe8W3N2B"
               data-tf-inline-on-mobile
-              className="w-full h-52"
+              data-tf-hide-headers
+              data-tf-hide-footer="true"
+              data-tf-auto-resize="true"
+              className="w-full overflow-hidden"
             />
           </div>
         </motion.div>

src/components/workshop/cursor/WorkshopStructure.tsx

@@ -43,7 +43,7 @@ const days = [
 export default function WorkshopStructure() {
   return (
     <section className="py-24 relative">
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="max-w-xl mx-auto px-4 relative z-10">
         <motion.h2
           {...fadeInUp}
           className="mb-16 text-3xl font-bold text-center dark:text-white"
@@ -53,7 +53,7 @@ export default function WorkshopStructure() {
         <motion.div
           initial={staggerContainer.hidden}
           animate={staggerContainer.show}
-          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+          className="flex flex-col gap-8"
         >
           {days.map((day) => (
             <motion.div

src/components/workshop/cursor/styles.css

@@ -1,93 +1,18 @@
-.bootcamp {
-  /* Base colors from Tailwind dark mode */
-  --accent-1: rgb(17, 24, 39); /* gray-900 */
-  --accent-2: rgb(31, 41, 55); /* gray-800 */
-  --accent-9: #61DAFB;
-  --accent-10: #82E6FF;
-
-  /* Gradient backgrounds */
-  --gradient-subtle: linear-gradient(
-    180deg,
-    rgb(17, 24, 39, 0.05),
-    rgb(31, 41, 55, 0.01)
-  );
-}
-
 .pattern-dots {
   @apply bg-white dark:bg-gray-900;
-  background-image: 
-    linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent),
+  background-image: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.9),
+      transparent
+    ),
     radial-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 2px);
   background-size: 100% 100%, 30px 30px;
   background-position: 0 0, 15px 15px;
 }
 
 .dark .pattern-dots {
-  background-image: 
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent),
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent),
     radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
   background-size: 100% 100%, 30px 30px;
   background-position: 0 0, 15px 15px;
 }
-
-.pattern-dots-light {
-  background-image: 
-    linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent),
-    radial-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 2px);
-  background-size: 100% 100%, 30px 30px;
-  background-position: 0 0, 15px 15px;
-}
-
-.pattern-dots-dense {
-  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
-  background-size: 16px 16px;
-  background-position: 8px 8px;
-}
-
-.pattern-dots-dense-light {
-  background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px);
-  background-size: 16px 16px;
-  background-position: 8px 8px;
-}
-
-.gradient-text {
-  /* Temporarily remove gradient for testing */
-  color: #61DAFB;
-  font-weight: bold;
-  /* Add spacing for visibility */
-  padding: 0 4px;
-  /* Debug */
-  outline: 1px solid red;
-  background: none;
-  -webkit-text-fill-color: initial;
-}
-
-.emphasis-box {
-  background: var(--gradient-subtle);
-  border: 1px solid rgb(31, 41, 55, 0.1); /* gray-800 with opacity */
-  border-radius: 8px;
-  backdrop-filter: blur(8px);
-}
-
-.emphasis-text {
-  @apply text-gray-900 dark:text-white;
-  font-weight: bold;
-}
-
-/* Add a debug class to test basic visibility */
-.debug-text {
-  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;
-}