Bob AI: Add learn more button to hero section

Merge version_4_1781383069274 into main

src/pages/HomePage.tsx

@@ -20,7 +20,7 @@ export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
         <LoaderReveal
-          imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
+          imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp?_wi=1"
           title="Joseph Alexander"
         />
 

src/pages/HomePage/sections/About.tsx

@@ -12,7 +12,7 @@ export default function AboutSection(): React.JSX.Element {
                 quote="I don't design to decorate — I design to solve. Sharp, intentional work that moves brands forward."
                 author="Joseph Alexander"
                 role="Independent Designer"
-                imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
+                imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp?_wi=2"
                 socialLinks={[
                   { icon: "Twitter", label: "Twitter", href: "#" },
                   { icon: "Linkedin", label: "LinkedIn", href: "#" },

src/pages/HomePage/sections/Faq.tsx

@@ -50,7 +50,7 @@ export default function FaqSection(): React.JSX.Element {
                   },
                 ]}
                 cta={{
-                  imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
+                  imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp?_wi=3",
                   name: "More questions? Reach out anytime.",
                   role: "joseph@alexandercreative.com",
                   buttonText: "Book a call",

src/pages/HomePage/sections/Hero.tsx

@@ -36,6 +36,7 @@ const items = [
     tag: "Interior Design"
   }
 ];
+const learnMoreButton = { text: "Learn more", href: "#services" };
 const secondaryButton = {
   text: "View all my projects",
   href: "#"
@@ -193,34 +194,42 @@ const HeroInline = () => {
                   <span className="text-foreground/50">{"I craft every visual touchpoint your brand needs to capture attention and convert it into revenue."}</span>
                 </p>
 
-                <a
-                  href={primaryButton.href}
-                  onClick={handlePrimaryClick}
-                  className="group flex items-center gap-3 mt-2 text-primary-cta-text rounded-full pl-3 pr-6 py-3 w-fit primary-button transition-all duration-300"
-                >
-                  <div className="flex items-center">
-                    <div className="card p-px rounded-full transition-transform duration-500 ease-out group-hover:-rotate-6">
-                      <img
-                        src={primaryButton.avatarSrc}
-                        className="w-9 h-9 rounded-full object-cover"
-                        alt=""
-                      />
-                    </div>
-                    <div className="grid grid-cols-[0fr] group-hover:grid-cols-[1fr] transition-all duration-500 ease-out">
-                      <div className="overflow-hidden flex items-center">
-                        <span className="text-primary-cta-text text-sm font-medium mx-2 transition-transform duration-500 ease-out -translate-x-3 group-hover:translate-x-0">
-                          +
-                        </span>
-                        <div className="card p-px rounded-full shrink-0 transition-transform duration-500 ease-out -translate-x-5 group-hover:translate-x-0 group-hover:rotate-6">
-                          <span className="w-9 h-9 rounded-full flex items-center justify-center">
-                            <span className="text-foreground text-xs font-bold">{primaryButton.avatarLabel}</span>
+                <div className="flex flex-wrap items-center gap-4 mt-2">
+                  <a
+                    href={primaryButton.href}
+                    onClick={handlePrimaryClick}
+                    className="group flex items-center gap-3 text-primary-cta-text rounded-full pl-3 pr-6 py-3 w-fit primary-button transition-all duration-300"
+                  >
+                    <div className="flex items-center">
+                      <div className="card p-px rounded-full transition-transform duration-500 ease-out group-hover:-rotate-6">
+                        <img
+                          src={primaryButton.avatarSrc}
+                          className="w-9 h-9 rounded-full object-cover"
+                          alt=""
+                        />
+                      </div>
+                      <div className="grid grid-cols-[0fr] group-hover:grid-cols-[1fr] transition-all duration-500 ease-out">
+                        <div className="overflow-hidden flex items-center">
+                          <span className="text-primary-cta-text text-sm font-medium mx-2 transition-transform duration-500 ease-out -translate-x-3 group-hover:translate-x-0">
+                            +
                           </span>
+                          <div className="card p-px rounded-full shrink-0 transition-transform duration-500 ease-out -translate-x-5 group-hover:translate-x-0 group-hover:rotate-6">
+                            <span className="w-9 h-9 rounded-full flex items-center justify-center">
+                              <span className="text-foreground text-xs font-bold">{primaryButton.avatarLabel}</span>
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <span className="text-base font-medium whitespace-nowrap">{primaryButton.text}</span>
-                </a>
+                    <span className="text-base font-medium whitespace-nowrap">{primaryButton.text}</span>
+                  </a>
+                  <a
+                    href="#services"
+                    className="secondary-button flex items-center gap-2 px-6 py-3 rounded-full transition-all duration-300"
+                  >
+                    {learnMoreButton.text}
+                  </a>
+                </div>
               </motion.div>
 
               <div ref={placeholderRef} className="w-full md:w-[54%] relative h-80 md:h-96">