Merge version_6_1778355317849 into main

Merge version_6_1778355317849 into main

src/components/sections/hero/HeroOverlay.tsx

@@ -9,7 +9,6 @@ type HeroOverlayProps = {
   title: string;
   description: string;
   primaryButton: { text: string; href: string };
-  secondaryButton: { text: string; href: string };
   avatars?: { src: string }[];
   avatarsLabel?: string;
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
@@ -19,7 +18,6 @@ const HeroOverlay = ({
   title,
   description,
   primaryButton,
-  secondaryButton,
   imageSrc,
   videoSrc,
   avatars,
@@ -62,10 +60,7 @@ const HeroOverlay = ({
             className="text-lg md:text-xl text-primary-cta-text leading-tight text-balance"
           />
 
-          <div className="flex flex-wrap gap-3 mt-3">
-            <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
-            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
-          </div>
+          <Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="w-full mt-3" />
 
           {avatars && avatars.length > 0 && (
             <div className="mt-4">

src/components/sections/hero/HeroSplit.tsx

@@ -45,9 +45,9 @@ const HeroSplit = ({
               className="max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left"
             />
 
-            <div className="flex flex-wrap max-md:justify-center gap-3 mt-3">
-              <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
-              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+            <div className="flex flex-wrap max-md:justify-center mt-3">
+              <Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="rounded-r-none" />
+              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" className="rounded-l-none" animationDelay={0.1} />
             </div>
           </div>
         </div>

src/index.css

@@ -165,22 +165,24 @@ h6 {
 
 .primary-button {
   /* WEBILD_PRIMARY_BUTTON */
-  /* @primaryButtons/depth-layers */
+  /* @primaryButtons/full */
   background: var(--color-primary-cta);
-  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 4px 8px color-mix(in srgb, var(--color-primary-cta) 15%, transparent), 0 8px 16px color-mix(in srgb, var(--color-primary-cta) 10%, transparent), 0 16px 32px color-mix(in srgb, var(--color-primary-cta) 5%, transparent);
+}
+
+.primary-button:hover {
+}
+
+.primary-button:active {
 }
 
 .secondary-button {
   /* WEBILD_SECONDARY_BUTTON */
-  /* @secondaryButtons/layered */
-  background:
-    linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
-    linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
-    linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
-    linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
-    linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)),
-    var(--color-secondary-cta);
-  box-shadow:
-    2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
-  border: 1px solid var(--color-secondary-cta);
+  /* @secondaryButtons/full */
+  background: var(--color-secondary-cta);
+}
+
+.secondary-button:hover {
+}
+
+.secondary-button:active {
 }

src/pages/HomePage.tsx

@@ -18,13 +18,9 @@ export default function HomePage() {
       title="Transforming San Diego Landscapes"
       description="Expert landscaping services for residential and commercial properties in San Diego. From lush gardens to sustainable designs, we bring your vision to life."
       primaryButton={{
-        text: "Get a Free Estimate",
+        text: "Get a Free Estimate or View Our Services",
         href: "#contact",
       }}
-      secondaryButton={{
-        text: "View Our Services",
-        href: "#services",
-      }}
       imageSrc="http://img.b2bpic.net/free-photo/landscape-courtyard-monastery_1268-15252.jpg"
       avatarsLabel="Trusted by 500+ happy clients"
       avatars={[