API tools faq
paste
Advertisement
daveweatherall

Untitled

daveweatherall
Jun 11th, 2025
24
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.10 KB | None | 0 0
raw download clone embed print report
  1.  
  2. ## Variation 1
  3.  
  4. <div class="inspo-generated-product-card">
  5. <div class="inspo-generated-product-header">
  6. <h1 class="inspo-generated-product-title">Navrim – Robot That Learns Skills in 30 Minutes</h1>
  7. <p class="inspo-generated-product-brand">Vassar Robotics</p>
  8. </div>
  9.  
  10. <div class="inspo-generated-product-main">
  11. <div class="inspo-generated-product-image">
  12. <div class="inspo-generated-image-placeholder">Product Image: Navrim Robot Arm</div>
  13. </div>
  14.  
  15. <div class="inspo-generated-product-info">
  16. <div class="inspo-generated-price-container">
  17. <div class="inspo-generated-price">
  18. <span class="inspo-generated-price-label">Price:</span>
  19. <span class="inspo-generated-price-value">£150.00 GBP</span>
  20. </div>
  21. <span class="inspo-generated-status">Sold out</span>
  22. </div>
  23.  
  24. <div class="inspo-generated-waitlist-alert">
  25. <svg class="inspo-generated-icon"><svg class="icon icon-error" viewBox="0 0 13 13"><circle cx="6.5" cy="6.5" r="5.5" stroke="#fff" stroke-width="2"></circle><circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width=".7"></circle><path fill="#fff" d="m5.874 3.528.1 4.044h1.053l.1-4.044zm.627 6.133c.38 0 .68-.288.68-.656s-.3-.656-.68-.656-.681.288-.681.656.3.656.68.656"></path><path fill="#fff" stroke="#EB001B" stroke-width=".7" d="M5.874 3.178h-.359l.01.359.1 4.044.008.341h1.736l.008-.341.1-4.044.01-.359H5.873Zm.627 6.833c.56 0 1.03-.432 1.03-1.006s-.47-1.006-1.03-1.006-1.031.432-1.031 1.006.47 1.006 1.03 1.006Z"></path></svg></svg>
  26. <p>The first batch is sold out. Join the waitlist for the next batch at <a href="https://vassarrobotics.com/newsletter" class="inspo-generated-link">vassarrobotics.com/newsletter</a></p>
  27. </div>
  28.  
  29. <div class="inspo-generated-variants">
  30. <h3 class="inspo-generated-section-title">Choose Your Edition:</h3>
  31. <div class="inspo-generated-variant-options">
  32. <label class="inspo-generated-variant-option">
  33. <input type="radio" name="variant" checked>
  34. <span class="inspo-generated-variant-name">Founder's Edition</span>
  35. <span class="inspo-generated-variant-detail">Ships by June 30</span>
  36. </label>
  37. <label class="inspo-generated-variant-option">
  38. <input type="radio" name="variant">
  39. <span class="inspo-generated-variant-name">Unassembled Kit</span>
  40. <span class="inspo-generated-variant-detail">Ships by July 15</span>
  41. </label>
  42. <label class="inspo-generated-variant-option">
  43. <input type="radio" name="variant">
  44. <span class="inspo-generated-variant-name">Assembled Kit</span>
  45. <span class="inspo-generated-variant-detail">Ships by July 21</span>
  46. </label>
  47. </div>
  48. </div>
  49.  
  50. <div class="inspo-generated-quantity">
  51. <label for="quantity" class="inspo-generated-quantity-label">Quantity:</label>
  52. <div class="inspo-generated-quantity-selector">
  53. <button class="inspo-generated-quantity-button inspo-generated-quantity-minus">
  54. <svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-minus" viewBox="0 0 10 2"><path fill="currentColor" fill-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 1 1 0 1H1A.5.5 0 0 1 .5 1" clip-rule="evenodd"></path></svg></svg>
  55. </button>
  56. <input type="number" id="quantity" value="1" min="1" class="inspo-generated-quantity-input">
  57. <button class="inspo-generated-quantity-button inspo-generated-quantity-plus">
  58. <svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-plus" viewBox="0 0 10 10"><path fill="currentColor" fill-rule="evenodd" d="M1 4.51a.5.5 0 0 0 0 1h3.5l.01 3.5a.5.5 0 0 0 1-.01V5.5l3.5-.01a.5.5 0 0 0-.01-1H5.5L5.49.99a.5.5 0 0 0-1 .01v3.5l-3.5.01z" clip-rule="evenodd"></path></svg></svg>
  59. </button>
  60. </div>
  61. </div>
  62.  
  63. <div class="inspo-generated-cta">
  64. <button class="inspo-generated-button inspo-generated-primary-button" disabled>
  65. <span>Sold out</span>
  66. </button>
  67. <button class="inspo-generated-button inspo-generated-secondary-button">
  68. <span>Join waitlist</span>
  69. </button>
  70. </div>
  71. </div>
  72. </div>
  73.  
  74. <div class="inspo-generated-product-features">
  75. <h2 class="inspo-generated-section-title">Meet Navrim: The AI Robot Arm That Learns in Just 30 Minutes</h2>
  76. <p class="inspo-generated-tagline">No coding required! Blends ChatGPT's advanced AI with robotics for effortless task automation.</p>
  77.  
  78. <div class="inspo-generated-features-grid">
  79. <div class="inspo-generated-feature">
  80. <div class="inspo-generated-feature-icon">🤖</div>
  81. <h3>Quick Learning</h3>
  82. <p>Learns and reliably executes tasks on demand in just 30 minutes</p>
  83. </div>
  84. <div class="inspo-generated-feature">
  85. <div class="inspo-generated-feature-icon">🎮</div>
  86. <h3>Easy Control</h3>
  87. <p>Interact seamlessly via voice or text commands</p>
  88. </div>
  89. <div class="inspo-generated-feature">
  90. <div class="inspo-generated-feature-icon">🔧</div>
  91. <h3>Complete Kit</h3>
  92. <p>Includes Follower Arm, Leader Arm, and two 480p cameras</p>
  93. </div>
  94. <div class="inspo-generated-feature">
  95. <div class="inspo-generated-feature-icon">📚</div>
  96. <h3>Educational</h3>
  97. <p>Perfect for beginners, families, and hobbyists</p>
  98. </div>
  99. </div>
  100.  
  101. <div class="inspo-generated-whats-included">
  102. <h3 class="inspo-generated-section-title">What's Included:</h3>
  103. <ul class="inspo-generated-included-list">
  104. <li><strong>One Follower Arm:</strong> Includes 12V servos, Waveshare servo board, and power supply</li>
  105. <li><strong>One Leader Arm:</strong> Includes 7.4V servos, Waveshare servo board, and power supply</li>
  106. <li><strong>Two 480p Cameras:</strong> Includes mounting structures for easy setup</li>
  107. <li><strong>Full Compatibility:</strong> Works with LeRobot software</li>
  108. </ul>
  109. <p class="inspo-generated-note">Note: Chessboard and pieces not included. Chess piece design credit: <a href="https://www.thingiverse.com/thing:4901226" class="inspo-generated-link">TheDuker</a></p>
  110. </div>
  111. </div>
  112.  
  113. <div class="inspo-generated-share-section">
  114. <button class="inspo-generated-share-button">
  115. <svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-share" viewBox="0 0 13 12"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.625 8.125v2.167a1.083 1.083 0 0 0 1.083 1.083h7.584a1.083 1.083 0 0 0 1.083-1.083V8.125"></path><path fill="currentColor" fill-rule="evenodd" d="M6.148 1.271a.5.5 0 0 1 .707 0L9.563 3.98a.5.5 0 0 1-.707.707L6.501 2.332 4.147 4.687a.5.5 0 1 1-.708-.707z" clip-rule="evenodd"></path><path fill="currentColor" fill-rule="evenodd" d="M6.5 1.125a.5.5 0 0 1 .5.5v6.5a.5.5 0 0 1-1 0v-6.5a.5.5 0 0 1 .5-.5" clip-rule="evenodd"></path></svg></svg>
  116. <span>Share</span>
  117. </button>
  118. <a href="/products/navrim-robot-that-learns-skills-in-30-minutes" class="inspo-generated-view-details">
  119. <svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-arrow" viewBox="0 0 14 10"><path fill="currentColor" fill-rule="evenodd" d="M8.537.808a.5.5 0 0 1 .817-.162l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L11.793 5.5H1a.5.5 0 0 1 0-1h10.793L8.646 1.354a.5.5 0 0 1-.109-.546" clip-rule="evenodd"></path></svg></svg>
  120. <span>View full details</span>
  121. </a>
  122. </div>
  123. </div>
  124.  
  125.  
  126.  
  127.  
  128. With the following styles:
  129. .inspo-generated-product-card { max-width: 1200px margin: 0 auto padding: 40px color: #6b4930 font-family: "Space Mono", sans-serif box-sizing: border-box width: 100% } .inspo-generated-product-header { margin-bottom: 30px border-bottom: 1px solid rgba(107, 73, 48, 0.1) padding-bottom: 20px } .inspo-generated-product-title { font-family: "Roboto Mono", sans-serif font-size: 36px font-weight: 500 color: #6b4930 margin: 0 0 10px 0 line-height: 1.2 letter-spacing: -0.5px } .inspo-generated-product-brand { font-size: 18px color: #784826 margin: 0 } .inspo-generated-product-main { display: flex gap: 40px margin-bottom: 40px } .inspo-generated-product-image { flex: 1 min-height: 400px background-color: rgba(107, 73, 48, 0.05) border-radius: 8px display: flex align-items: center justify-content: center } .inspo-generated-image-placeholder { padding: 20px text-align: center color: #6b4930 } .inspo-generated-product-info { flex: 1 display: flex flex-direction: column gap: 20px } .inspo-generated-price-container { display: flex align-items: center justify-content: space-between margin-bottom: 5px } .inspo-generated-price { display: flex align-items: baseline gap: 10px } .inspo-generated-price-label { font-size: 16px font-weight: bold } .inspo-generated-price-value { font-size: 24px font-weight: bold } .inspo-generated-status { background-color: #784826 color: white padding: 8px 16px border-radius: 40px font-size: 14px font-weight: bold } .inspo-generated-waitlist-alert { background-color: rgba(120, 72, 38, 0.1) border-radius: 8px padding: 15px display: flex align-items: center gap: 10px } .inspo-generated-waitlist-alert p { margin: 0 font-size: 14px line-height: 1.4 } .inspo-generated-icon { width: 20px height: 20px } .inspo-generated-variants { margin-top: 10px } .inspo-generated-section-title { font-size: 18px font-weight: bold margin: 0 0 15px 0 color: #6b4930 } .inspo-generated-variant-options { display: flex flex-direction: column gap: 10px } .inspo-generated-variant-option { display: flex align-items: center padding: 12px 15px border: 1px solid #6b4930 border-radius: 6px cursor: pointer position: relative } .inspo-generated-variant-option input { margin-right: 12px } .inspo-generated-variant-name { font-weight: bold margin-right: 8px } .inspo-generated-variant-detail { font-size: 14px color: #784826 } .inspo-generated-quantity { margin-top: 15px } .inspo-generated-quantity-label { display: block margin-bottom: 10px font-weight: bold } .inspo-generated-quantity-selector { display: flex align-items: center max-width: 150px } .inspo-generated-quantity-button { width: 40px height: 40px display: flex align-items: center justify-content: center background: none border: 1px solid #6b4930 cursor: pointer } .inspo-generated-quantity-minus { border-radius: 6px 0 0 6px } .inspo-generated-quantity-plus { border-radius: 0 6px 6px 0 } .inspo-generated-quantity-input { width: 70px height: 40px text-align: center border: 1px solid #6b4930 border-left: none border-right: none font-family: "Space Mono", sans-serif font-size: 16px color: #6b4930 } .inspo-generated-cta { display: flex gap: 15px margin-top: 20px } .inspo-generated-button { height: 50px padding: 0 30px border-radius: 40px font-family: "Space Mono", sans-serif font-size: 16px font-weight: bold cursor: pointer display: flex align-items: center justify-content: center border: none } .inspo-generated-primary-button { background-color: #784826 color: white width: 60% } .inspo-generated-primary-button:disabled { opacity: 0.7 cursor: not-allowed } .inspo-generated-secondary-button { background-color: transparent border: 2px solid #784826 color: #784826 width: 40% } .inspo-generated-product-features { margin-top: 40px padding-top: 40px border-top: 1px solid rgba(107, 73, 48, 0.1) } .inspo-generated-tagline { font-size: 18px line-height: 1.5 margin-bottom: 30px } .inspo-generated-features-grid { display: grid grid-template-columns: repeat(4, 1fr) gap: 20px margin-bottom: 40px } .inspo-generated-feature { padding: 20px background-color: rgba(107, 73, 48, 0.05) border-radius: 8px text-align: center } .inspo-generated-feature-icon { font-size: 32px margin-bottom: 10px } .inspo-generated-feature h3 { font-size: 18px margin: 0 0 10px 0 } .inspo-generated-feature p { font-size: 14px line-height: 1.4 margin: 0 } .inspo-generated-whats-included { background-color: rgba(107, 73, 48, 0.05) padding: 30px border-radius: 8px } .inspo-generated-included-list { padding-left: 20px margin: 15px 0 } .inspo-generated-included-list li { margin-bottom: 10px line-height: 1.5 } .inspo-generated-note { font-size: 14px font-style: italic margin-top: 15px } .inspo-generated-link { color: #784826 text-decoration: underline } .inspo-generated-share-section { display: flex align-items: center gap: 20px margin-top: 30px padding-top: 20px border-top: 1px solid rgba(107, 73, 48, 0.1) } .inspo-generated-share-button, .inspo-generated-view-details { display: flex align-items: center gap: 8px background: none border: none color: #6b4930 font-family: "Space Mono", sans-serif font-size: 14px cursor: pointer text-decoration: none } .inspo-generated-share-button svg, .inspo-generated-view-details svg { width: 16px height: 16px } }
  130.  
  131. And the following mobile styles:
  132. @media (max-width: 768px) { .inspo-generated-product-card { padding: 20px } .inspo-generated-product-title { font-size: 28px } .inspo-generated-product-main { flex-direction: column } .inspo-generated-product-image { min-height: 300px } .inspo-generated-features-grid { grid-template-columns: repeat(2, 1fr) } .inspo-generated-cta { flex-direction: column } .inspo-generated-primary-button, .inspo-generated-secondary-button { width: 100% } }
  133.  
  134.  
  135.  
  136.  
  137.  
  138. ## Variation 2
  139.  
  140.  
  141. <section class="inspo-generated-product-info"><div class="inspo-generated-overlay"></div><div class="inspo-generated-content"><div class="inspo-generated-brand">Vassar Robotics</div><div class="inspo-generated-header"><h1 class="inspo-generated-title">Navrim – Robot That Learns Skills in 30 Minutes</h1></div><div class="inspo-generated-price-section"><div class="inspo-generated-price">£150.00 GBP</div><div class="inspo-generated-badges"><span class="inspo-generated-sale-badge">Sale</span><span class="inspo-generated-sold-out-badge">Sold out</span></div></div><div class="inspo-generated-variants"><fieldset class="inspo-generated-variant-fieldset"><legend class="inspo-generated-variant-legend">Kit</legend><div class="inspo-generated-variant-options"><div class="inspo-generated-variant-option"><input type="radio" id="variant-founders" name="kit-variant" class="inspo-generated-variant-input" checked><label for="variant-founders" class="inspo-generated-variant-label">Founder's Edition (Ship by Jun 30)<div class="inspo-generated-tooltip">Fully assembled and calibrated with exclusive early access. Limited to first 20 users.</div></label></div><div class="inspo-generated-variant-option"><input type="radio" id="variant-unassembled" name="kit-variant" class="inspo-generated-variant-input"><label for="variant-unassembled" class="inspo-generated-variant-label">Unassembled Kit (Ship by Jul 15)<div class="inspo-generated-tooltip">Includes all components. Requires self-assembly and calibration with tutorials provided.</div></label></div><div class="inspo-generated-variant-option"><input type="radio" id="variant-assembled" name="kit-variant" class="inspo-generated-variant-input"><label for="variant-assembled" class="inspo-generated-variant-label">Assembled Kit (Ship by Jul 21)<div class="inspo-generated-tooltip">Fully assembled and calibrated. Electronics identical to SO-101 with two 480p cameras included.</div></label></div></div></fieldset></div><div class="inspo-generated-quantity-section"><label class="inspo-generated-quantity-label">Quantity</label><div class="inspo-generated-quantity-controls"><button class="inspo-generated-quantity-btn inspo-generated-quantity-decrease" type="button">-</button><input type="number" class="inspo-generated-quantity-input" value="1" min="1"><button class="inspo-generated-quantity-btn inspo-generated-quantity-increase" type="button">+</button></div></div><div class="inspo-generated-action-section"><button class="inspo-generated-sold-out-btn" disabled>Sold out</button></div><div class="inspo-generated-description"><p><strong>Meet Navrim: The AI Robot Arm That Learns in Just 30 Minutes—No Coding Required!</strong></p><p>Navrim blends ChatGPT's advanced AI with robotics, empowering anyone to quickly teach and automate tasks effortlessly.</p><p><strong>Key Features:</strong></p><ul><li>Quickly learns and reliably executes tasks on demand.</li><li>Seamless interaction via voice or text commands.</li></ul><p><strong>What's Included:</strong></p><ul><li><strong>One Follower Arm:</strong> Includes 12V servos, Waveshare servo board, and power supply.</li><li><strong>One Leader Arm:</strong> Includes 7.4V servos, Waveshare servo board, and power supply.</li><li><strong>Two 480p Cameras:</strong> Includes mounting structures for easy setup.</li></ul></div></div></section>
  142. With the following styles:
  143. .inspo-generated-product-info { position: relative width: 485px max-width: 100% color: #6b4930 font-family: 'Space Mono', monospace line-height: 1.5 letter-spacing: 0.01em box-sizing: border-box } .inspo-generated-overlay { position: absolute top: 0 left: 0 right: 0 bottom: 0 background: rgba(255, 255, 255, 0.15) backdrop-filter: blur(2px) z-index: 1 } .inspo-generated-content { position: relative z-index: 2 padding: 20px } .inspo-generated-brand { font-size: 13px font-weight: 400 color: #6b4930 margin-bottom: 10px line-height: 1.4 letter-spacing: 0.02em } .inspo-generated-header { margin-bottom: 20px } .inspo-generated-title { font-family: 'Roboto Mono', monospace font-size: 46px font-weight: 400 color: #6b4930 margin: 0 line-height: 1.2 letter-spacing: -0.01em text-shadow: 0 2px 4px rgba(107, 73, 48, 0.1) } .inspo-generated-price-section { display: flex align-items: center justify-content: space-between margin-bottom: 20px } .inspo-generated-price { font-size: 24px font-weight: 400 color: #6b4930 line-height: 1.3 letter-spacing: 0.01em } .inspo-generated-badges { display: flex gap: 10px } .inspo-generated-sale-badge, .inspo-generated-sold-out-badge { padding: 4px 12px border-radius: 20px font-size: 12px font-weight: 400 line-height: 1.2 letter-spacing: 0.02em } .inspo-generated-sale-badge { background: #e8f5e8 color: #2d5016 } .inspo-generated-sold-out-badge { background: #fef3e2 color: #784826 } .inspo-generated-variants { margin-bottom: 20px } .inspo-generated-variant-fieldset { border: none padding: 0 margin: 0 } .inspo-generated-variant-legend { font-size: 13px font-weight: 400 color: #6b4930 margin-bottom: 10px line-height: 1.4 letter-spacing: 0.02em } .inspo-generated-variant-options { display: flex flex-direction: column gap: 8px } .inspo-generated-variant-option { position: relative } .inspo-generated-variant-input { position: absolute opacity: 0 width: 0 height: 0 } .inspo-generated-variant-label { display: block padding: 12px 16px border: 1px solid #6b4930 border-radius: 6px font-size: 14px font-weight: 400 color: #6b4930 cursor: pointer transition: all 0.3s ease position: relative line-height: 1.4 letter-spacing: 0.01em } .inspo-generated-variant-input:checked + .inspo-generated-variant-label { background: #6b4930 color: #ffffff transform: scale(1.02) } .inspo-generated-variant-label:hover { background: rgba(107, 73, 48, 0.1) } .inspo-generated-variant-input:checked + .inspo-generated-variant-label:hover { background: #5a3c26 } .inspo-generated-tooltip { position: absolute bottom: 100% left: 50% transform: translateX(-50%) background: rgba(0, 0, 0, 0.9) color: white padding: 8px 12px border-radius: 4px font-size: 12px white-space: nowrap opacity: 0 visibility: hidden transition: all 0.3s ease z-index: 10 line-height: 1.3 letter-spacing: 0.01em } .inspo-generated-tooltip::after { content: '' position: absolute top: 100% left: 50% transform: translateX(-50%) border: 4px solid transparent border-top-color: rgba(0, 0, 0, 0.9) } .inspo-generated-variant-label:hover .inspo-generated-tooltip { opacity: 1 visibility: visible } .inspo-generated-quantity-section { margin-bottom: 20px } .inspo-generated-quantity-label { display: block font-size: 13px font-weight: 400 color: #6b4930 margin-bottom: 8px line-height: 1.4 letter-spacing: 0.02em } .inspo-generated-quantity-controls { display: flex align-items: center gap: 0 width: fit-content } .inspo-generated-quantity-btn { width: 40px height: 40px border: 1px solid #6b4930 background: #ffffff color: #6b4930 font-size: 18px font-weight: 400 cursor: pointer transition: all 0.2s ease display: flex align-items: center justify-content: center line-height: 1 } .inspo-generated-quantity-decrease { border-radius: 6px 0 0 6px border-right: none } .inspo-generated-quantity-increase { border-radius: 0 6px 6px 0 border-left: none } .inspo-generated-quantity-btn:hover { background: #6b4930 color: #ffffff transform: scale(1.1) } .inspo-generated-quantity-input { width: 60px height: 40px border: 1px solid #6b4930 border-left: none border-right: none text-align: center font-size: 16px font-weight: 400 color: #6b4930 background: #ffffff font-family: 'Space Mono', monospace line-height: 1.4 letter-spacing: 0.01em } .inspo-generated-quantity-input:focus { outline: none background: rgba(107, 73, 48, 0.05) } .inspo-generated-action-section { margin-bottom: 30px } .inspo-generated-sold-out-btn { width: 100% padding: 15px 20px border: none border-radius: 40px font-size: 15px font-weight: 400 color: #ffffff background: linear-gradient(45deg, #d4a574, #e6b885) cursor: not-allowed font-family: 'Space Mono', monospace line-height: 1.4 letter-spacing: 0.02em animation: inspo-generated-pulse 2s infinite } @keyframes inspo-generated-pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.4) } 50% { box-shadow: 0 0 0 8px rgba(212, 165, 116, 0.1) } 100% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0) } } .inspo-generated-description { font-size: 16px font-weight: 400 color: #6b4930 line-height: 1.6 letter-spacing: 0.01em } .inspo-generated-description p { margin-bottom: 15px } .inspo-generated-description ul { margin-bottom: 15px padding-left: 20px } .inspo-generated-description li { margin-bottom: 8px } .inspo-generated-description strong { font-weight: 600 }
  144.  
  145. And the following mobile styles:
  146. @media (max-width: 768px) { .inspo-generated-product-info { width: 100% padding: 0 } .inspo-generated-content { padding: 15px } .inspo-generated-title { font-size: 32px } .inspo-generated-price-section { flex-direction: column align-items: flex-start gap: 10px } .inspo-generated-variant-options { gap: 10px } .inspo-generated-variant-label { padding: 15px font-size: 15px } .inspo-generated-tooltip { position: static transform: none background: rgba(107, 73, 48, 0.1) color: #6b4930 opacity: 1 visibility: visible margin-top: 8px white-space: normal border-radius: 4px } .inspo-generated-tooltip::after { display: none } .inspo-generated-quantity-controls { width: 100% } .inspo-generated-quantity-input { flex: 1 } }
  147.  
  148.  
  149.  
  150.  
  151. ## Variation 3
  152.  
  153. <div class="inspo-generated-product-card"><div class="inspo-generated-header"><h1 class="inspo-generated-title">Navrim – Robot That Learns Skills in 30 Minutes</h1><div class="inspo-generated-brand">Vassar Robotics</div></div><div class="inspo-generated-pricing"><div class="inspo-generated-price">£150.00 GBP</div><div class="inspo-generated-badges"><span class="inspo-generated-sale-badge">Sale</span><span class="inspo-generated-sold-out-badge">Sold out</span></div></div><div class="inspo-generated-waitlist-notice"><div class="inspo-generated-notice-icon">⚠️</div><div class="inspo-generated-notice-text"><strong>First batch sold out!</strong> Join our waitlist for the next batch at <a href="https://vassarrobotics.com/newsletter" class="inspo-generated-link">vassarrobotics.com/newsletter</a></div></div><div class="inspo-generated-variants-section"><h3 class="inspo-generated-section-title">Choose Your Edition</h3><div class="inspo-generated-variant-grid"><div class="inspo-generated-variant-card inspo-generated-variant-featured"><div class="inspo-generated-variant-header"><div class="inspo-generated-variant-name">Founder's Edition</div><div class="inspo-generated-variant-badge">Limited - First 20</div></div><div class="inspo-generated-variant-shipping">Ships by Jun 30</div><div class="inspo-generated-variant-features"><div class="inspo-generated-feature">✓ Fully assembled & calibrated</div><div class="inspo-generated-feature">✓ Exclusive early access</div><div class="inspo-generated-feature">✓ Two 480p cameras included</div></div></div><div class="inspo-generated-variant-card"><div class="inspo-generated-variant-header"><div class="inspo-generated-variant-name">Unassembled Kit</div></div><div class="inspo-generated-variant-shipping">Ships by Jul 15</div><div class="inspo-generated-variant-features"><div class="inspo-generated-feature">✓ All components included</div><div class="inspo-generated-feature">✓ Assembly tutorials provided</div><div class="inspo-generated-feature">✓ Self-calibration required</div></div></div><div class="inspo-generated-variant-card"><div class="inspo-generated-variant-header"><div class="inspo-generated-variant-name">Assembled Kit</div></div><div class="inspo-generated-variant-shipping">Ships by Jul 21</div><div class="inspo-generated-variant-features"><div class="inspo-generated-feature">✓ Fully assembled & calibrated</div><div class="inspo-generated-feature">✓ Ready to use out of box</div><div class="inspo-generated-feature">✓ Two 480p cameras included</div></div></div></div></div><div class="inspo-generated-key-features"><h3 class="inspo-generated-section-title">Why Choose Navrim?</h3><div class="inspo-generated-features-grid"><div class="inspo-generated-feature-item"><div class="inspo-generated-feature-icon">🤖</div><div class="inspo-generated-feature-content"><div class="inspo-generated-feature-title">AI-Powered Learning</div><div class="inspo-generated-feature-desc">Learns tasks in just 30 minutes using ChatGPT AI</div></div></div><div class="inspo-generated-feature-item"><div class="inspo-generated-feature-icon">🗣️</div><div class="inspo-generated-feature-content"><div class="inspo-generated-feature-title">Voice & Text Control</div><div class="inspo-generated-feature-desc">Seamless interaction via voice or text commands</div></div></div><div class="inspo-generated-feature-item"><div class="inspo-generated-feature-icon">👨‍👩‍👧‍👦</div><div class="inspo-generated-feature-content"><div class="inspo-generated-feature-title">Perfect for Families</div><div class="inspo-generated-feature-desc">Educational and entertaining for all skill levels</div></div></div><div class="inspo-generated-feature-item"><div class="inspo-generated-feature-icon">🔧</div><div class="inspo-generated-feature-content"><div class="inspo-generated-feature-title">LeRobot Compatible</div><div class="inspo-generated-feature-desc">Fully compatible with LeRobot software ecosystem</div></div></div></div></div><div class="inspo-generated-whats-included"><h3 class="inspo-generated-section-title">What's Included</h3><div class="inspo-generated-included-grid"><div class="inspo-generated-included-item"><div class="inspo-generated-included-icon">🦾</div><div class="inspo-generated-included-text">One Follower Arm with 12V servos & power supply</div></div><div class="inspo-generated-included-item"><div class="inspo-generated-included-icon">🦾</div><div class="inspo-generated-included-text">One Leader Arm with 7.4V servos & power supply</div></div><div class="inspo-generated-included-item"><div class="inspo-generated-included-icon">📸</div><div class="inspo-generated-included-text">Two 480p cameras with mounting structures</div></div></div></div><div class="inspo-generated-cta-section"><button class="inspo-generated-cta-button inspo-generated-disabled">Sold Out - Join Waitlist</button><div class="inspo-generated-cta-subtext">Be the first to know when the next batch is available</div></div><div class="inspo-generated-lerubot-offer"><div class="inspo-generated-offer-icon">🎉</div><div class="inspo-generated-offer-text"><strong>LeRobot Contributors:</strong> Email <a href="mailto:[email protected]" class="inspo-generated-link">[email protected]</a> for a 20% discount coupon!</div></div></div>
  154. With the following styles:
  155. .inspo-generated-product-card { width: 100% max-width: 600px background: #ffffff border-radius: 12px box-shadow: 0 4px 24px rgba(107, 73, 48, 0.1) padding: 32px box-sizing: border-box color: #6b4930 font-family: 'Space Mono', monospace line-height: 1.5 letter-spacing: 0.02em margin: 0 auto } .inspo-generated-header { margin-bottom: 24px } .inspo-generated-title { font-size: 32px font-weight: 700 line-height: 1.2 letter-spacing: -0.01em margin: 0 0 8px 0 color: #6b4930 font-family: 'Roboto Mono', monospace } .inspo-generated-brand { font-size: 14px color: #784826 font-weight: 600 text-transform: uppercase letter-spacing: 0.1em } .inspo-generated-pricing { display: flex align-items: center justify-content: space-between margin-bottom: 24px padding: 16px background: #f8f6f4 border-radius: 8px } .inspo-generated-price { font-size: 28px font-weight: 700 color: #6b4930 } .inspo-generated-badges { display: flex gap: 8px } .inspo-generated-sale-badge { background: #28a745 color: white padding: 4px 12px border-radius: 20px font-size: 12px font-weight: 600 text-transform: uppercase letter-spacing: 0.05em } .inspo-generated-sold-out-badge { background: #dc3545 color: white padding: 4px 12px border-radius: 20px font-size: 12px font-weight: 600 text-transform: uppercase letter-spacing: 0.05em } .inspo-generated-waitlist-notice { background: #fff3cd border: 1px solid #ffeaa7 border-radius: 8px padding: 16px margin-bottom: 32px display: flex align-items: flex-start gap: 12px } .inspo-generated-notice-icon { font-size: 20px flex-shrink: 0 } .inspo-generated-notice-text { font-size: 14px line-height: 1.4 } .inspo-generated-section-title { font-size: 20px font-weight: 700 color: #6b4930 margin: 0 0 16px 0 padding-bottom: 8px border-bottom: 2px solid #6b4930 } .inspo-generated-variants-section { margin-bottom: 32px } .inspo-generated-variant-grid { display: grid grid-template-columns: 1fr gap: 16px } .inspo-generated-variant-card { border: 2px solid #e0d5c7 border-radius: 12px padding: 20px transition: all 0.3s ease cursor: pointer background: white } .inspo-generated-variant-card:hover { border-color: #6b4930 box-shadow: 0 4px 16px rgba(107, 73, 48, 0.1) } .inspo-generated-variant-featured { border-color: #6b4930 background: #faf9f7 } .inspo-generated-variant-header { display: flex align-items: center justify-content: space-between margin-bottom: 8px } .inspo-generated-variant-name { font-size: 18px font-weight: 700 color: #6b4930 } .inspo-generated-variant-badge { background: #6b4930 color: white padding: 4px 8px border-radius: 12px font-size: 10px font-weight: 600 text-transform: uppercase letter-spacing: 0.05em } .inspo-generated-variant-shipping { font-size: 14px color: #784826 margin-bottom: 12px font-weight: 600 } .inspo-generated-variant-features { display: flex flex-direction: column gap: 6px } .inspo-generated-feature { font-size: 13px color: #6b4930 line-height: 1.3 } .inspo-generated-key-features { margin-bottom: 32px } .inspo-generated-features-grid { display: grid grid-template-columns: 1fr 1fr gap: 20px } .inspo-generated-feature-item { display: flex align-items: flex-start gap: 12px } .inspo-generated-feature-icon { font-size: 24px flex-shrink: 0 } .inspo-generated-feature-content { flex: 1 } .inspo-generated-feature-title { font-size: 14px font-weight: 700 color: #6b4930 margin-bottom: 4px } .inspo-generated-feature-desc { font-size: 12px color: #784826 line-height: 1.3 } .inspo-generated-whats-included { margin-bottom: 32px } .inspo-generated-included-grid { display: flex flex-direction: column gap: 12px } .inspo-generated-included-item { display: flex align-items: center gap: 12px padding: 12px background: #f8f6f4 border-radius: 8px } .inspo-generated-included-icon { font-size: 20px flex-shrink: 0 } .inspo-generated-included-text { font-size: 14px color: #6b4930 } .inspo-generated-cta-section { text-align: center margin-bottom: 24px } .inspo-generated-cta-button { width: 100% background: #6b4930 color: white border: none padding: 16px 32px border-radius: 8px font-size: 16px font-weight: 700 font-family: 'Space Mono', monospace cursor: pointer transition: all 0.3s ease text-transform: uppercase letter-spacing: 0.05em } .inspo-generated-cta-button:hover:not(.inspo-generated-disabled) { background: #5a3d28 transform: translateY(-2px) box-shadow: 0 4px 16px rgba(107, 73, 48, 0.3) } .inspo-generated-disabled { background: #cccccc color: #666666 cursor: not-allowed } .inspo-generated-disabled:hover { transform: none box-shadow: none background: #cccccc } .inspo-generated-cta-subtext { font-size: 12px color: #784826 margin-top: 8px } .inspo-generated-lerubot-offer { background: linear-gradient(135deg, #6b4930, #784826) color: white padding: 16px border-radius: 8px text-align: center } .inspo-generated-offer-icon { font-size: 20px margin-bottom: 8px } .inspo-generated-offer-text { font-size: 14px line-height: 1.4 } .inspo-generated-link { color: #784826 text-decoration: underline font-weight: 600 } .inspo-generated-link:hover { color: #6b4930 } .inspo-generated-lerubot-offer .inspo-generated-link { color: #ffeaa7 } .inspo-generated-lerubot-offer .inspo-generated-link:hover { color: white }
  156.  
  157. And the following mobile styles:
  158. @media (max-width: 768px) { .inspo-generated-product-card { padding: 20px margin: 16px max-width: calc(100% - 32px) } .inspo-generated-title { font-size: 24px } .inspo-generated-price { font-size: 24px } .inspo-generated-pricing { flex-direction: column align-items: flex-start gap: 12px } .inspo-generated-badges { align-self: flex-end } .inspo-generated-variant-grid { grid-template-columns: 1fr } .inspo-generated-features-grid { grid-template-columns: 1fr gap: 16px } .inspo-generated-variant-header { flex-direction: column align-items: flex-start gap: 8px } .inspo-generated-variant-badge { align-self: flex-start } }
  159.  
  160.  
  161.  
  162.  
  163.  
  164. ## Variation 4
  165.  
  166.  
  167. <div class="inspo-generated-product-card">
  168. <div class="inspo-generated-brand">Vassar Robotics</div>
  169. <h1 class="inspo-generated-title">Navrim – Robot That Learns Skills in 30 Minutes</h1>
  170. <div class="inspo-generated-price-section">
  171. <div class="inspo-generated-price">£150.00 GBP</div>
  172. <div class="inspo-generated-status-badges">
  173. <span class="inspo-generated-sale-badge">Sale</span>
  174. <span class="inspo-generated-sold-out-badge">Sold out</span>
  175. </div>
  176. </div>
  177. <div class="inspo-generated-variant-section">
  178. <fieldset class="inspo-generated-fieldset">
  179. <legend class="inspo-generated-legend">Choose Your Kit</legend>
  180. <div class="inspo-generated-variant-options">
  181. <label class="inspo-generated-variant-label">
  182. <input type="radio" name="variant" class="inspo-generated-radio" checked>
  183. <span class="inspo-generated-variant-text">Founder's Edition</span>
  184. <span class="inspo-generated-ship-date">(Ship by Jun 30)</span>
  185. </label>
  186. <label class="inspo-generated-variant-label">
  187. <input type="radio" name="variant" class="inspo-generated-radio">
  188. <span class="inspo-generated-variant-text">Unassembled Kit</span>
  189. <span class="inspo-generated-ship-date">(Ship by Jul 15)</span>
  190. </label>
  191. <label class="inspo-generated-variant-label">
  192. <input type="radio" name="variant" class="inspo-generated-radio">
  193. <span class="inspo-generated-variant-text">Assembled Kit</span>
  194. <span class="inspo-generated-ship-date">(Ship by Jul 21)</span>
  195. </label>
  196. </div>
  197. </fieldset>
  198. </div>
  199. <div class="inspo-generated-quantity-section">
  200. <label class="inspo-generated-quantity-label">Quantity</label>
  201. <div class="inspo-generated-quantity-controls">
  202. <button class="inspo-generated-qty-btn">-</button>
  203. <input type="number" value="1" class="inspo-generated-qty-input" min="1">
  204. <button class="inspo-generated-qty-btn">+</button>
  205. </div>
  206. </div>
  207. <button class="inspo-generated-cta-button" disabled>
  208. <span class="inspo-generated-button-text">Sold Out</span>
  209. </button>
  210. <div class="inspo-generated-description">
  211. <p><strong>Meet Navrim: The AI Robot Arm That Learns in Just 30 Minutes—No Coding Required!</strong></p>
  212. <p>Navrim blends ChatGPT's advanced AI with robotics, empowering anyone to quickly teach and automate tasks effortlessly.</p>
  213. <div class="inspo-generated-features">
  214. <h4>Key Features:</h4>
  215. <ul>
  216. <li>Quickly learns and reliably executes tasks on demand</li>
  217. <li>Seamless interaction via voice or text commands</li>
  218. <li>Educational and entertaining for all skill levels</li>
  219. </ul>
  220. </div>
  221. </div>
  222. </div>
  223.  
  224.  
  225.  
  226. With the following styles:
  227. .inspo-generated-product-card { width: 100% max-width: 500px background: transparent color: #6b4930 font-family: 'Space Mono', monospace line-height: 1.4 letter-spacing: 0.5px box-sizing: border-box padding: 20px } .inspo-generated-brand { font-size: 14px font-weight: 400 color: #784826 margin-bottom: 12px text-transform: uppercase letter-spacing: 1px } .inspo-generated-title { font-family: 'Roboto Mono', monospace font-size: 36px font-weight: 400 color: #6b4930 margin: 0 0 24px 0 line-height: 1.3 letter-spacing: -0.5px } .inspo-generated-price-section { display: flex justify-content: space-between align-items: center margin-bottom: 32px border-bottom: 1px solid #e5e5e5 padding-bottom: 16px } .inspo-generated-price { font-size: 24px font-weight: 600 color: #6b4930 letter-spacing: 0px } .inspo-generated-status-badges { display: flex gap: 8px } .inspo-generated-sale-badge { background: #e8f5e8 color: #2d7a2d padding: 4px 12px border-radius: 20px font-size: 12px font-weight: 500 } .inspo-generated-sold-out-badge { background: #f5e8e8 color: #7a2d2d padding: 4px 12px border-radius: 20px font-size: 12px font-weight: 500 } .inspo-generated-variant-section { margin-bottom: 28px } .inspo-generated-fieldset { border: none margin: 0 padding: 0 } .inspo-generated-legend { font-size: 16px font-weight: 600 color: #6b4930 margin-bottom: 16px display: block } .inspo-generated-variant-options { display: flex flex-direction: column gap: 12px } .inspo-generated-variant-label { display: flex align-items: center padding: 12px 16px border: 1px solid #d5d5d5 border-radius: 8px cursor: pointer transition: all 0.2s ease background: #ffffff } .inspo-generated-variant-label:hover { border-color: #6b4930 background: #fafafa } .inspo-generated-radio { margin-right: 12px accent-color: #6b4930 } .inspo-generated-variant-text { font-size: 14px font-weight: 500 color: #6b4930 margin-right: 8px } .inspo-generated-ship-date { font-size: 12px color: #888 } .inspo-generated-quantity-section { margin-bottom: 24px } .inspo-generated-quantity-label { display: block font-size: 14px font-weight: 500 color: #6b4930 margin-bottom: 8px } .inspo-generated-quantity-controls { display: flex align-items: center gap: 0 border: 1px solid #d5d5d5 border-radius: 6px width: fit-content } .inspo-generated-qty-btn { background: #f8f8f8 border: none width: 40px height: 40px display: flex align-items: center justify-content: center cursor: pointer font-size: 18px color: #6b4930 transition: background 0.2s ease } .inspo-generated-qty-btn:hover { background: #e8e8e8 } .inspo-generated-qty-btn:first-child { border-radius: 5px 0 0 5px } .inspo-generated-qty-btn:last-child { border-radius: 0 5px 5px 0 } .inspo-generated-qty-input { width: 60px height: 40px border: none text-align: center font-size: 16px color: #6b4930 background: white } .inspo-generated-cta-button { width: 100% background: #e8e8e8 color: #888 border: none padding: 16px 24px border-radius: 8px font-size: 16px font-weight: 600 cursor: not-allowed margin-bottom: 32px text-transform: uppercase letter-spacing: 1px } .inspo-generated-description { font-size: 14px line-height: 1.6 color: #6b4930 } .inspo-generated-description p { margin: 0 0 16px 0 } .inspo-generated-description strong { font-weight: 600 } .inspo-generated-features { margin-top: 20px } .inspo-generated-features h4 { font-size: 14px font-weight: 600 margin: 0 0 12px 0 color: #6b4930 } .inspo-generated-features ul { margin: 0 padding-left: 20px } .inspo-generated-features li { margin-bottom: 8px font-size: 13px }
  228.  
  229. And the following mobile styles:
  230. @media (max-width: 768px) { .inspo-generated-product-card { padding: 16px max-width: 100% } .inspo-generated-title { font-size: 28px margin-bottom: 20px } .inspo-generated-price-section { flex-direction: column align-items: flex-start gap: 12px } .inspo-generated-variant-label { padding: 10px 12px } .inspo-generated-variant-text { font-size: 13px } .inspo-generated-ship-date { font-size: 11px } .inspo-generated-qty-btn { width: 36px height: 36px } .inspo-generated-qty-input { width: 50px height: 36px } .inspo-generated-cta-button { padding: 14px 20px font-size: 14px } }
  231.  
  232.  
  233.  
  234.  
  235.  
  236. ## Variation 5
  237.  
  238.  
  239. <div class="inspo-generated-product-card">
  240. <div class="inspo-generated-card-header">
  241. <p class="inspo-generated-brand">Vassar Robotics</p>
  242. <h1 class="inspo-generated-title">Navrim – Robot That Learns Skills in 30 Minutes</h1>
  243. <div class="inspo-generated-price-container">
  244. <span class="inspo-generated-price">£150.00 GBP</span>
  245. <span class="inspo-generated-sale-badge">Sale</span>
  246. </div>
  247. </div>
  248. <div class="inspo-generated-variant-section">
  249. <h3 class="inspo-generated-section-title">Choose Your Edition</h3>
  250. <div class="inspo-generated-variant-cards">
  251. <div class="inspo-generated-variant-card">
  252. <div class="inspo-generated-variant-icon">🚀</div>
  253. <div class="inspo-generated-variant-info">
  254. <h4 class="inspo-generated-variant-name">Founder's Edition</h4>
  255. <p class="inspo-generated-shipping-date">Ships by Jun 30</p>
  256. <p class="inspo-generated-variant-description">Exclusive early access • Limited to first 20 users</p>
  257. </div>
  258. <input type="radio" name="variant" id="founders" class="inspo-generated-variant-input">
  259. </div>
  260. <div class="inspo-generated-variant-card">
  261. <div class="inspo-generated-variant-icon">🔧</div>
  262. <div class="inspo-generated-variant-info">
  263. <h4 class="inspo-generated-variant-name">Unassembled Kit</h4>
  264. <p class="inspo-generated-shipping-date">Ships by Jul 15</p>
  265. <p class="insvo-generated-variant-description">DIY assembly • Tutorials included</p>
  266. </div>
  267. <input type="radio" name="variant" id="unassembled" class="inspo-generated-variant-input">
  268. </div>
  269. <div class="inspo-generated-variant-card">
  270. <div class="inspo-generated-variant-icon">✨</div>
  271. <div class="inspo-generated-variant-info">
  272. <h4 class="inspo-generated-variant-name">Assembled Kit</h4>
  273. <p class="inspo-generated-shipping-date">Ships by Jul 21</p>
  274. <p class="inspo-generated-variant-description">Ready to use • Fully calibrated</p>
  275. </div>
  276. <input type="radio" name="variant" id="assembled" class="inspo-generated-variant-input">
  277. </div>
  278. </div>
  279. </div>
  280. <div class="inspo-generated-quantity-section">
  281. <h3 class="inspo-generated-section-title">Quantity</h3>
  282. <div class="inspo-generated-slider-container">
  283. <input type="range" min="1" max="10" value="1" class="inspo-generated-quantity-slider" id="quantitySlider">
  284. <div class="inspo-generated-slider-info">
  285. <span class="inspo-generated-quantity-display">1 unit</span>
  286. <span class="inspo-generated-total-price">£150.00</span>
  287. </div>
  288. </div>
  289. </div>
  290. <div class="inspo-generated-restock-section">
  291. <div class="inspo-generated-restock-header">
  292. <h3 class="inspo-generated-section-title">Get Notified When Available</h3>
  293. <p class="inspo-generated-restock-subtitle">Join 1,247 others waiting for the next batch</p>
  294. </div>
  295. <div class="inspo-generated-progress-container">
  296. <div class="inspo-generated-progress-bar">
  297. <div class="inspo-generated-progress-fill"></div>
  298. </div>
  299. <p class="inspo-generated-progress-text">Next batch: 78% complete</p>
  300. </div>
  301. <div class="inspo-generated-email-signup">
  302. <input type="email" placeholder="Enter your email address" class="inspo-generated-email-input">
  303. <button class="inspo-generated-notify-button">Notify Me First</button>
  304. </div>
  305. <p class="inspo-generated-restock-note">You'll be the first to know when Navrim is back in stock. No spam, just robots.</p>
  306. </div>
  307. <div class="inspo-generated-features-section">
  308. <h3 class="inspo-generated-section-title">Key Features</h3>
  309. <ul class="inspo-generated-features-list">
  310. <li class="inspo-generated-feature-item">Learns tasks in just 30 minutes</li>
  311. <li class="inspo-generated-feature-item">Voice and text command control</li>
  312. <li class="inspo-generated-feature-item">No coding required</li>
  313. <li class="inspo-generated-feature-item">Compatible with LeRobot software</li>
  314. </ul>
  315. </div>
  316. </div>
  317.  
  318.  
  319. With the following styles:
  320.  
  321. .inspo-generated-product-card { position: relative width: 100% max-width: 500px background: #ffffff border-radius: 24px padding: 32px box-shadow: 0 8px 32px rgba(107, 73, 48, 0.12), 0 2px 8px rgba(107, 73, 48, 0.08) color: #2c2c2c font-family: "Space Mono", monospace line-height: 1.5 letter-spacing: 0.5px box-sizing: border-box }
  322. .inspo-generated-card-header { margin-bottom: 32px }
  323. .inspo-generated-brand { font-size: 14px font-weight: 500 color: #784826 margin: 0 0 12px 0 text-transform: uppercase letter-spacing: 1px line-height: 1.4 }
  324. .inspo-generated-title { font-family: "Roboto Mono", monospace font-size: 32px font-weight: 700 color: #2c2c2c margin: 0 0 20px 0 line-height: 1.3 letter-spacing: -0.5px }
  325. .inspo-generated-price-container { display: flex align-items: center gap: 16px }
  326. .inspo-generated-price { font-size: 24px font-weight: 700 color: #2c2c2c line-height: 1.2 letter-spacing: 0px }
  327. .inspo-generated-sale-badge { background: #ff6b35 color: #ffffff padding: 6px 12px border-radius: 20px font-size: 12px font-weight: 600 text-transform: uppercase letter-spacing: 0.8px line-height: 1 }
  328. .inspo-generated-variant-section { margin-bottom: 32px }
  329. .inspo-generated-section-title { font-size: 18px font-weight: 600 color: #2c2c2c margin: 0 0 20px 0 line-height: 1.3 letter-spacing: 0px }
  330. .inspo-generated-variant-cards { display: flex flex-direction: column gap: 12px }
  331. .inspo-generated-variant-card { position: relative display: flex align-items: center gap: 16px padding: 20px border: 2px solid #e8e8e8 border-radius: 16px cursor: pointer transition: all 0.3s ease background: #ffffff }
  332. .inspo-generated-variant-card:hover { border-color: #784826 box-shadow: 0 4px 16px rgba(120, 72, 38, 0.1) transform: translateY(-2px) }
  333. .inspo-generated-variant-icon { font-size: 24px width: 48px height: 48px display: flex align-items: center justify-content: center background: #f8f8f8 border-radius: 12px }
  334. .inspo-generated-variant-info { flex: 1 }
  335. .inspo-generated-variant-name { font-size: 16px font-weight: 600 color: #2c2c2c margin: 0 0 4px 0 line-height: 1.2 letter-spacing: 0px }
  336. .inspo-generated-shipping-date { font-size: 14px font-weight: 500 color: #784826 margin: 0 0 4px 0 line-height: 1.2 letter-spacing: 0px }
  337. .inspo-generated-variant-description { font-size: 13px color: #666666 margin: 0 line-height: 1.3 letter-spacing: 0px }
  338. .inspo-generated-variant-input { position: absolute right: 20px width: 20px height: 20px accent-color: #784826 }
  339. .inspo-generated-quantity-section { margin-bottom: 32px }
  340. .inspo-generated-slider-container { background: #f8f8f8 padding: 24px border-radius: 16px }
  341. .inspo-generated-quantity-slider { width: 100% height: 8px background: #e0e0e0 border-radius: 4px outline: none appearance: none }
  342. .inspo-generated-quantity-slider::-webkit-slider-thumb { appearance: none width: 24px height: 24px background: #784826 border-radius: 50% cursor: pointer transition: all 0.2s ease }
  343. .inspo-generated-quantity-slider::-webkit-slider-thumb:hover { transform: scale(1.2) }
  344. .inspo-generated-slider-info { display: flex justify-content: space-between align-items: center margin-top: 16px }
  345. .inspo-generated-quantity-display { font-size: 16px font-weight: 600 color: #2c2c2c line-height: 1.2 letter-spacing: 0px }
  346. .inspo-generated-total-price { font-size: 18px font-weight: 700 color: #784826 line-height: 1.2 letter-spacing: 0px }
  347. .inspo-generated-restock-section { margin-bottom: 32px background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) padding: 28px border-radius: 20px border: 1px solid #dee2e6 }
  348. .inspo-generated-restock-header { text-align: center margin-bottom: 24px }
  349. .inspo-generated-restock-subtitle { font-size: 14px color: #666666 margin: 8px 0 0 0 line-height: 1.3 letter-spacing: 0px }
  350. .inspo-generated-progress-container { margin-bottom: 24px }
  351. .inspo-generated-progress-bar { width: 100% height: 8px background: #e0e0e0 border-radius: 4px overflow: hidden }
  352. .inspo-generated-progress-fill { width: 78% height: 100% background: linear-gradient(90deg, #784826 0%, #a66938 100%) border-radius: 4px transition: width 0.5s ease }
  353. .inspo-generated-progress-text { text-align: center font-size: 13px color: #666666 margin: 12px 0 0 0 font-weight: 500 line-height: 1.2 letter-spacing: 0px }
  354. .inspo-generated-email-signup { display: flex gap: 12px margin-bottom: 16px }
  355. .inspo-generated-email-input { flex: 1 padding: 14px 16px border: 2px solid #e0e0e0 border-radius: 12px font-size: 14px font-family: "Space Mono", monospace background: #ffffff transition: border-color 0.3s ease line-height: 1.2 letter-spacing: 0px }
  356. .inspo-generated-email-input:focus { outline: none border-color: #784826 }
  357. .inspo-generated-notify-button { padding: 14px 24px background: #784826 color: #ffffff border: none border-radius: 12px font-size: 14px font-weight: 600 font-family: "Space Mono", monospace cursor: pointer transition: all 0.3s ease white-space: nowrap line-height: 1.2 letter-spacing: 0.5px }
  358. .inspo-generated-notify-button:hover { background: #5d3a1f transform: translateY(-1px) box-shadow: 0 4px 12px rgba(120, 72, 38, 0.3) }
  359. .inspo-generated-restock-note { font-size: 12px color: #666666 text-align: center margin: 0 line-height: 1.4 letter-spacing: 0px }
  360. .inspo-generated-features-section { }
  361. .inspo-generated-features-list { list-style: none padding: 0 margin: 0 }
  362. .inspo-generated-feature-item { display: flex align-items: center padding: 12px 0 font-size: 14px color: #2c2c2c border-bottom: 1px solid #f0f0f0 line-height: 1.4 letter-spacing: 0px }
  363. .inspo-generated-feature-item:before { content: "✓" color: #784826 font-weight: bold margin-right: 12px font-size: 16px }
  364. .inspo-generated-feature-item:last-child { border-bottom: none }
  365.  
  366.  
  367. And the following mobile styles:
  368.  
  369. @media (max-width: 768px) {
  370. .inspo-generated-product-card { padding: 24px margin: 0 16px max-width: calc(100% - 32px) }
  371. .inspo-generated-title { font-size: 24px line-height: 1.3 }
  372. .inspo-generated-variant-card { padding: 16px gap: 12px }
  373. .inspo-generated-variant-icon { width: 40px height: 40px font-size: 20px }
  374. .inspo-generated-variant-name { font-size: 15px }
  375. .inspo-generated-shipping-date { font-size: 13px }
  376. .inspo-generated-variant-description { font-size: 12px }
  377. .inspo-generated-email-signup { flex-direction: column }
  378. .inspo-generated-notify-button { width: 100% }
  379. .inspo-generated-slider-container { padding: 20px }
  380. .inspo-generated-restock-section { padding: 20px }
  381. }
  382.  
  383.  
  384.  
  385.  
  386.  
  387. ## Variation 6
  388.  
  389.  
  390. <div class="inspo-generated-product-card"><div class="inspo-generated-header"><p class="inspo-generated-brand">Vassar Robotics</p><h1 class="inspo-generated-title">Navrim – Robot That Learns Skills in 30 Minutes</h1><div class="inspo-generated-price"><span class="inspo-generated-price-value">£150.00 GBP</span><span class="inspo-generated-status">Sold out</span></div></div><div class="inspo-generated-tab-container"><div class="inspo-generated-tabs"><button class="inspo-generated-tab inspo-generated-tab-active" data-tab="variants">Kit Selection</button><button class="inspo-generated-tab" data-tab="quantity">Quantity</button></div><div class="inspo-generated-tab-content"><div class="inspo-generated-tab-panel inspo-generated-tab-panel-active" id="variants"><div class="inspo-generated-variant-options"><input type="radio" id="founders" name="variant" class="inspo-generated-radio"><label for="founders" class="inspo-generated-variant-label">Founder's Edition<span class="inspo-generated-ship-date">Ship by Jun 30</span></label><input type="radio" id="unassembled" name="variant" class="inspo-generated-radio" checked><label for="unassembled" class="inspo-generated-variant-label inspo-generated-selected">Unassembled Kit<span class="inspo-generated-ship-date">Ship by Jul 15</span></label><input type="radio" id="assembled" name="variant" class="inspo-generated-radio"><label for="assembled" class="inspo-generated-variant-label">Assembled Kit<span class="inspo-generated-ship-date">Ship by Jul 21</span></label></div></div><div class="inspo-generated-tab-panel" id="quantity"><div class="inspo-generated-quantity-selector"><button class="inspo-generated-qty-btn">-</button><input type="number" value="1" min="1" class="inspo-generated-qty-input"><button class="inspo-generated-qty-btn">+</button></div></div></div></div><div class="inspo-generated-notify-section"><button class="inspo-generated-notify-btn"><span class="inspo-generated-notify-icon">🔔</span><span class="inspo-generated-notify-text">Notify Me When Available</span></button></div><div class="inspo-generated-description"><p class="inspo-generated-note"><strong>Note:</strong> The first batch is sold out. A waitlist for the next batch is available.</p><p class="inspo-generated-feature-title"><strong>Meet Navrim: The AI Robot Arm That Learns in Just 30 Minutes—No Coding Required!</strong></p><p class="inspo-generated-feature-text">Navrim blends ChatGPT's advanced AI with robotics, empowering anyone to quickly teach and automate tasks effortlessly.</p><div class="inspo-generated-key-features"><h3 class="inspo-generated-section-title">Key Features:</h3><ul class="inspo-generated-feature-list"><li class="inspo-generated-feature-item">Quickly learns and reliably executes tasks on demand</li><li class="inspo-generated-feature-item">Seamless interaction via voice or text commands</li></ul></div></div></div>
  391. With the following styles:
  392. .inspo-generated-product-card { width: 100% max-width: 485px background: linear-gradient(135deg, rgba(107, 73, 48, 0.05) 0%, rgba(120, 72, 38, 0.1) 100%) border-radius: 20px padding: 32px box-sizing: border-box color: #6b4930 font-family: 'Space Mono', monospace position: relative overflow: hidden } .inspo-generated-product-card::before { content: '' position: absolute top: 0 left: 0 right: 0 height: 4px background: linear-gradient(90deg, #6b4930 0%, #784826 50%, #6b4930 100%) border-radius: 20px 20px 0 0 } .inspo-generated-header { margin-bottom: 32px } .inspo-generated-brand { font-size: 14px line-height: 1.4 letter-spacing: 0.5px color: #784826 margin: 0 0 12px 0 text-transform: uppercase font-weight: 600 transition: color 0.3s ease } .inspo-generated-title { font-size: 32px line-height: 1.3 letter-spacing: -0.5px font-family: 'Roboto Mono', monospace color: #6b4930 margin: 0 0 20px 0 font-weight: 500 transition: color 0.3s ease } .inspo-generated-price { display: flex align-items: center justify-content: space-between flex-wrap: wrap gap: 12px } .inspo-generated-price-value { font-size: 24px line-height: 1.2 letter-spacing: 0.25px font-weight: 600 color: #6b4930 transition: color 0.3s ease } .inspo-generated-status { background: linear-gradient(135deg, #784826 0%, #6b4930 100%) color: #ffffff padding: 8px 16px border-radius: 20px font-size: 12px line-height: 1.2 letter-spacing: 0.5px font-weight: 600 text-transform: uppercase } .inspo-generated-tab-container { margin-bottom: 32px background: rgba(255, 255, 255, 0.7) border-radius: 16px overflow: hidden border: 1px solid rgba(107, 73, 48, 0.2) } .inspo-generated-tabs { display: flex background: linear-gradient(90deg, rgba(107, 73, 48, 0.1) 0%, rgba(120, 72, 38, 0.15) 100%) } .inspo-generated-tab { flex: 1 background: none border: none padding: 16px 20px font-size: 14px line-height: 1.3 letter-spacing: 0.25px font-family: 'Space Mono', monospace color: #6b4930 cursor: pointer transition: all 0.3s ease position: relative } .inspo-generated-tab::after { content: '' position: absolute bottom: 0 left: 0 right: 0 height: 3px background: linear-gradient(90deg, #6b4930 0%, #784826 100%) transform: scaleX(0) transition: transform 0.3s ease } .inspo-generated-tab-active { background: rgba(107, 73, 48, 0.1) color: #784826 font-weight: 600 } .inspo-generated-tab-active::after { transform: scaleX(1) } .inspo-generated-tab:hover { background: rgba(107, 73, 48, 0.05) } .inspo-generated-tab-content { padding: 24px min-height: 120px } .inspo-generated-tab-panel { display: none } .inspo-generated-tab-panel-active { display: block } .inspo-generated-variant-options { display: flex flex-direction: column gap: 12px } .inspo-generated-radio { display: none } .inspo-generated-variant-label { display: flex flex-direction: column padding: 16px 20px border: 2px solid rgba(107, 73, 48, 0.3) border-radius: 12px cursor: pointer transition: all 0.3s ease background: rgba(255, 255, 255, 0.5) position: relative overflow: hidden } .inspo-generated-variant-label::before { content: '' position: absolute top: 0 left: -100% width: 100% height: 100% background: linear-gradient(90deg, transparent 0%, rgba(107, 73, 48, 0.1) 50%, transparent 100%) transition: left 0.6s ease } .inspo-generated-variant-label:hover::before { left: 100% } .inspo-generated-variant-label:hover { border-color: #784826 background: rgba(120, 72, 38, 0.05) } .inspo-generated-selected { border-color: #784826 background: linear-gradient(135deg, rgba(120, 72, 38, 0.1) 0%, rgba(107, 73, 48, 0.05) 100%) color: #784826 font-weight: 600 } .inspo-generated-ship-date { font-size: 12px line-height: 1.3 letter-spacing: 0.25px color: #784826 opacity: 0.8 margin-top: 4px } .inspo-generated-quantity-selector { display: flex align-items: center justify-content: center gap: 16px } .inspo-generated-qty-btn { width: 48px height: 48px border: 2px solid #6b4930 background: linear-gradient(135deg, rgba(107, 73, 48, 0.1) 0%, rgba(120, 72, 38, 0.15) 100%) color: #6b4930 font-size: 20px line-height: 1 font-weight: 600 border-radius: 12px cursor: pointer transition: all 0.3s ease display: flex align-items: center justify-content: center } .inspo-generated-qty-btn:hover { background: linear-gradient(135deg, #6b4930 0%, #784826 100%) color: #ffffff transform: scale(1.05) } .inspo-generated-qty-input { width: 80px text-align: center border: 2px solid #6b4930 border-radius: 12px padding: 12px font-size: 16px line-height: 1.2 letter-spacing: 0.25px font-family: 'Space Mono', monospace background: rgba(255, 255, 255, 0.9) transition: all 0.3s ease } .inspo-generated-qty-input:focus { outline: none border-color: #784826 box-shadow: 0 0 0 3px rgba(120, 72, 38, 0.2) } .inspo-generated-notify-section { margin-bottom: 32px text-align: center } .inspo-generated-notify-btn { background: linear-gradient(135deg, #6b4930 0%, #784826 100%) color: #ffffff border: none padding: 16px 32px border-radius: 50px font-size: 16px line-height: 1.3 letter-spacing: 0.25px font-family: 'Space Mono', monospace font-weight: 600 cursor: pointer transition: all 0.3s ease display: flex align-items: center justify-content: center gap: 12px width: 100% box-sizing: border-box position: relative overflow: hidden } .inspo-generated-notify-btn::before { content: '' position: absolute top: 50% left: 50% width: 0 height: 0 background: rgba(255, 255, 255, 0.2) border-radius: 50% transition: all 0.6s ease transform: translate(-50%, -50%) } .inspo-generated-notify-btn:hover::before { width: 300px height: 300px } .inspo-generated-notify-btn:hover { transform: translateY(-2px) box-shadow: 0 8px 24px rgba(107, 73, 48, 0.3) } .inspo-generated-notify-icon { font-size: 20px transition: transform 0.3s ease } .inspo-generated-notify-btn:hover .inspo-generated-notify-icon { transform: scale(1.2) rotate(15deg) } .inspo-generated-notify-text { position: relative z-index: 1 } .inspo-generated-description { } .inspo-generated-note { font-size: 14px line-height: 1.4 letter-spacing: 0.25px color: #784826 margin: 0 0 20px 0 padding: 16px background: rgba(120, 72, 38, 0.1) border-radius: 12px border-left: 4px solid #784826 transition: all 0.3s ease } .inspo-generated-feature-title { font-size: 18px line-height: 1.4 letter-spacing: 0.25px color: #6b4930 margin: 0 0 16px 0 font-weight: 600 transition: color 0.3s ease } .inspo-generated-feature-text { font-size: 16px line-height: 1.5 letter-spacing: 0.25px color: #6b4930 margin: 0 0 24px 0 transition: color 0.3s ease } .inspo-generated-key-features { } .inspo-generated-section-title { font-size: 16px line-height: 1.3 letter-spacing: 0.25px color: #784826 margin: 0 0 12px 0 font-weight: 600 transition: color 0.3s ease } .inspo-generated-feature-list { margin: 0 padding: 0 list-style: none } .inspo-generated-feature-item { font-size: 14px line-height: 1.4 letter-spacing: 0.25px color: #6b4930 margin: 0 0 8px 0 padding: 8px 0 8px 24px position: relative transition: all 0.3s ease } .inspo-generated-feature-item::before { content: '▶' position: absolute left: 0 color: #784826 font-size: 10px top: 12px transition: all 0.3s ease } .inspo-generated-feature-item:hover::before { transform: translateX(4px) }
  393.  
  394. And the following mobile styles:
  395. @media (max-width: 768px) { .inspo-generated-product-card { max-width: 100% padding: 24px 16px } .inspo-generated-title { font-size: 24px line-height: 1.2 } .inspo-generated-price { flex-direction: column align-items: flex-start gap: 8px } .inspo-generated-price-value { font-size: 20px } .inspo-generated-tabs { flex-direction: column } .inspo-generated-tab { padding: 12px 16px } .inspo-generated-tab-content { padding: 16px min-height: 100px } .inspo-generated-variant-label { padding: 12px 16px } .inspo-generated-quantity-selector { gap: 12px } .inspo-generated-qty-btn { width: 40px height: 40px font-size: 18px } .inspo-generated-qty-input { width: 60px padding: 8px } .inspo-generated-notify-btn { padding: 14px 24px font-size: 14px } .inspo-generated-feature-title { font-size: 16px } .inspo-generated-feature-text { font-size: 14px } }
  396.  
  397.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!