Add NavBar, ButtonPill, and RMLogoDrawOn components to intro pages

next.config.ts

@@ -15,6 +15,12 @@ const nextConfig: NextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'framerusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
   reactCompiler: true,

package.json

@@ -22,8 +22,9 @@
     "@gsap/react": "^2.1.2",
     "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "^5.2.2",
+    "@hugeicons-pro/core-duotone-rounded": "^3.1.0",
+    "@hugeicons-pro/core-solid-standard": "^3.1.0",
     "@hugeicons-pro/core-stroke-standard": "^2.0.0",
-    "@hugeicons-pro/core-twotone-rounded": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.11",

src/components/intro/LandingPageA.tsx

@@ -3,15 +3,13 @@
 import { useGSAP } from '@gsap/react'
 import {
   AlarmClockIcon,
-  ArrowDownRight01Icon,
-  ArrowRight02Icon,
 } from '@hugeicons-pro/core-stroke-standard'
 import {
   ArtificialIntelligence04Icon,
   Calendar03Icon,
   DocumentAttachmentIcon,
   Message02Icon,
-} from '@hugeicons-pro/core-twotone-rounded'
+} from '@hugeicons-pro/core-duotone-rounded'
 import { HugeiconsIcon } from '@hugeicons/react'
 import gsap from 'gsap'
 import { SplitText } from 'gsap/SplitText'
@@ -20,11 +18,11 @@ import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
 
 import { HalftoneSwirl } from '@/components/effects/HalftoneSwirl'
 import AnimatedPath from '@/components/intro/AnimatedPath'
-import Logo from '@/components/intro/Logo'
 import SectionBand from '@/components/intro/SectionBand'
+import NavBar from '@/components/layout/NavBar'
 import { LeadsPageWithProvider } from '@/components/leads-page/LeadsPageWithProvider'
 import { PrivacyTermsLinks } from '@/components/ui/PrivacyTermsLinks'
-import ButtonPill from '@/components/ui/button-animated'
+import { ButtonPill } from '@/components/ui/ButtonPill'
 import { Card } from '@/components/ui/card'
 
 import { trackConversion, trackEngagement, trackView } from '@/lib/ab-testing/tracking'
@@ -266,14 +264,20 @@ export function LandingPageA({ chatbotId }: LandingPageAProps) {
   return (
     <div className="intro-page">
       <div className="intro-page__content">
+        {/* NavBar */}
+          <NavBar
+            homeLink="https://rolemodelsoftware.com"
+            link3="https://consult.rolemodelsoftware.com"
+            link4="https://rolemodelsoftware.com/contact"
+            bgColor="var(--blue-green-900)"
+            textColor="#FFFFFF"
+            spotlightImageUrl="https://framerusercontent.com/images/8nGc7fE31a5LiyhesQXL0kAAh48.webp?width=2400&height=1792"
+            logoImage="https://framerusercontent.com/images/fq0QpZJihXpp1TCLYctWjKapX8.svg?width=189&height=88"
+            spotlightContent="Branded Mobile PWA and Desktop Web application for business forum and executive coaching firm"
+          />
+
         {/* Hero Section */}
         <section className={styles.hero}>
-          <div className={styles.logo}>
-            <Logo
-              variant="white"
-              style={{ width: 'calc(var(--op-size-unit) * 30)', height: 'auto' }}
-            />
-          </div>
           <div className={`container ${styles['hero-container']}`}>
             <div ref={heroContainerRef}>
               <h1 id="heading" className={styles['hero-title']}>
@@ -309,17 +313,12 @@ export function LandingPageA({ chatbotId }: LandingPageAProps) {
 
                 <motion.div className={styles['hero-actions']} variants={actionsVariant}>
                   <ButtonPill
-                    iconRight={
-                      <HugeiconsIcon
-                        icon={ArrowDownRight01Icon}
-                        strokeWidth={2}
-                        size={20}
-                      />
-                    }
                     label="How it works"
                     variant="brightblue"
                     onClick={handleScrollToHowItWorks}
-                  ></ButtonPill>
+                    endIconName="arrow-down-right-01"
+                    showEndIcon
+                  />
                   <div className={styles['time-estimate']}>
                     <HugeiconsIcon icon={AlarmClockIcon} size={20} />
                     <span>Takes 3-5 minutes</span>
@@ -378,11 +377,10 @@ export function LandingPageA({ chatbotId }: LandingPageAProps) {
             <div className={styles['how-it-works-cta']}>
               <ButtonPill
                 label="Get started"
-                iconRight={
-                  <HugeiconsIcon strokeWidth={2} icon={ArrowDownRight01Icon} size={20} />
-                }
                 variant="brightblue"
                 onClick={handleScrollToGetStarted}
+                endIconName="arrow-down-right-01"
+                showEndIcon
               />
             </div>
           </div>
@@ -436,9 +434,10 @@ export function LandingPageA({ chatbotId }: LandingPageAProps) {
                 <div className={styles['form-card']}>
                   <ButtonPill
                     label="Continue Conversation"
-                    iconRight={<HugeiconsIcon icon={ArrowRight02Icon} size={20} />}
                     variant="brightblue"
                     onClick={() => setShowChat(true)}
+                    endIconName="arrow-right-02"
+                    showEndIcon
                   />
                 </div>
               </div>
@@ -486,16 +485,11 @@ export function LandingPageA({ chatbotId }: LandingPageAProps) {
                     <ButtonPill
                       className={styles['form-button']}
                       label={isLoading ? 'Starting...' : 'Start'}
-                      iconRight={
-                        <HugeiconsIcon
-                          icon={ArrowRight02Icon}
-                          strokeWidth={2}
-                          size={20}
-                        />
-                      }
                       variant="brightblue"
                       type="submit"
                       disabled={isLoading}
+                      endIconName="arrow-right-02"
+                      showEndIcon={!isLoading}
                     />
                   </div>
                 </div>

src/components/intro/LandingPageB.tsx

@@ -51,14 +51,15 @@ import {
 } from '@/components/ai-elements/prompt-input'
 import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion'
 import Favicon from '@/components/intro/Favicon'
-import Logo from '@/components/intro/Logo'
+import NavBar from '@/components/layout/NavBar'
 import {
   type Citation,
   MessageWithCitations,
 } from '@/components/leads-page/MessageWithCitations'
 import { CaseStudyCard } from '@/components/ui/case-study-card'
 import { PrivacyTermsLinks } from '@/components/ui/PrivacyTermsLinks'
 import ScrollIndicator from '@/components/ui/ScrollIndicator'
+import { ButtonPill } from '@/components/ui/ButtonPill'
 import { Card, CardAction, CardContent, CardHeader } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 
@@ -453,13 +454,15 @@ export function HeroChat(props: HeroChatProps) {
               />
             </div>
             <CardAction>
-              <button
+              <ButtonPill
                 type="submit"
-                className="btn btn--primary btn--large"
+                label={isSubmitting ? 'Starting...' : 'Start Conversation'}
+                variant="brightblue"
                 disabled={!formData.name || !formData.email || isSubmitting}
-              >
-                {isSubmitting ? 'Starting...' : 'Start Conversation'}
-              </button>
+                endIconName="arrow-right-02"
+                showEndIcon={!isSubmitting}
+                style={{ width: '100%' }}
+              />
             </CardAction>
           </form>
         </CardContent>
@@ -1034,14 +1037,19 @@ function LandingBInner({
 
   return (
     <div className="intro-b-page">
+      {/* NavBar */}
+        <NavBar
+          homeLink="https://rolemodelsoftware.com"
+          link3="https://consult.rolemodelsoftware.com"
+          link4="https://rolemodelsoftware.com/contact"
+          bgColor="var(--blue-green-900)"
+          textColor="#FFFFFF"
+          spotlightImageUrl="https://framerusercontent.com/images/8nGc7fE31a5LiyhesQXL0kAAh48.webp?width=2400&height=1792"
+          logoImage="https://framerusercontent.com/images/fq0QpZJihXpp1TCLYctWjKapX8.svg?width=189&height=88"
+          spotlightContent="Branded Mobile PWA and Desktop Web application for business forum and executive coaching firm"
+        />
       <div ref={containerRef} className={`${styles.root} ${className || ''}`}>
         {showGlow && <div ref={glowRef} className={styles['hero-glow']} />}
-        <div className={styles.logo}>
-          <Logo
-            variant="auto"
-            style={{ width: 'calc(var(--op-size-unit) * 30)', height: 'auto' }}
-          />
-        </div>
         <div className={styles['grid-background']} />
         <div ref={gridOpacityRef} className={styles.grid} />
         <div ref={wrapperRef} className={styles['smooth-wrapper']}>