@stackshift-ui/header 6.0.12 → 6.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/header",
   "description": "",
-  "version": "6.0.12",
+  "version": "6.0.13",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,27 +29,27 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.7",
-    "@stackshift-ui/eslint-config": "6.0.7"
+    "@stackshift-ui/typescript-config": "6.0.8",
+    "@stackshift-ui/eslint-config": "6.0.8"
   },
   "dependencies": {
-    "@stackshift-ui/scripts": "6.0.7",
-    "@stackshift-ui/system": "6.0.8",
-    "@stackshift-ui/text": "6.0.8",
-    "@stackshift-ui/button": "6.0.8",
-    "@stackshift-ui/heading": "6.0.8",
-    "@stackshift-ui/image": "6.0.8",
-    "@stackshift-ui/container": "6.0.8",
-    "@stackshift-ui/flex": "6.0.8",
-    "@stackshift-ui/section": "6.0.8",
-    "@stackshift-ui/signin-signup": "6.0.11"
+    "@stackshift-ui/scripts": "6.0.8",
+    "@stackshift-ui/system": "6.0.9",
+    "@stackshift-ui/button": "6.0.9",
+    "@stackshift-ui/text": "6.0.9",
+    "@stackshift-ui/image": "6.0.9",
+    "@stackshift-ui/heading": "6.0.9",
+    "@stackshift-ui/container": "6.0.9",
+    "@stackshift-ui/flex": "6.0.9",
+    "@stackshift-ui/section": "6.0.9",
+    "@stackshift-ui/signin-signup": "6.0.12"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.8"
+    "@stackshift-ui/system": ">=6.0.9"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/header_a.tsx

@@ -18,9 +18,9 @@ export default function Header_A({
   return (
     <Section className="py-20 bg-background">
       <Container maxWidth={1280}>
-        <Flex align="center" gap={4} className="flex-col lg:flex-row">
+        <Flex align="center" className="flex-col lg:flex-row lg:gap-10">
           <Flex align="center" direction="col" className="w-full basis-1/2">
-            <div className="max-w-md mx-auto text-center lg:text-left">
+            <div className="max-w-md text-center lg:text-left">
               <TitleAndDescription title={title} description={description} />
               <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
             </div>
@@ -72,7 +72,7 @@ function Buttons({
         <Button
           as="link"
           link={secondaryButton}
-          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4"
+          className="bg-secondary hover:bg-secondary/50 inline-block font-default text-default transition duration-200 py-3 px-6 rounded-global"
           ariaLabel={secondaryButton?.label}>
           {secondaryButton?.label}
         </Button>
@@ -92,7 +92,7 @@ function MainImage({ mainImage }: MainImageProps) {
   if (!mainImage?.image) return null;
 
   return (
-    <div className="relative w-full max-w-md">
+    <div className="relative w-full max-w-md mt-10 lg:mt-0">
       <Image
         className="overflow-hidden rounded-md object-cover md:rounded-br-none lg:h-[448px] relative z-10"
         src={`${mainImage.image}`}

package/src/header_b.tsx

@@ -84,7 +84,7 @@ function ImageGallery({ images }: { images: Images[] }) {
   if (!images) return null;
 
   return (
-    <div className="w-full px-4 lg:w-1/2">
+    <div className="w-full px-4 lg:w-1/2 mt-10 lg:mt-0">
       <div className="mb-3 sm:flex lg:mb-4 lg:ml-6">
         {images?.[0]?.image && (
           <Image

package/src/header_c.tsx

@@ -76,7 +76,7 @@ function Buttons({
           as="link"
           ariaLabel={secondaryButton?.label}
           link={secondaryButton}
-          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4">
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3">
           {secondaryButton?.label}
         </Button>
       )}

package/src/header_d.tsx

@@ -96,7 +96,7 @@ function MainImage({ mainImage }: MainImageProps) {
   if (!mainImage?.image) return null;
 
   return (
-    <div className="w-full h-full">
+    <div className="w-full md:w-2/3 h-full mt-10 lg:mt-0">
       <Image
         alt={mainImage.alt ?? "header-main-image"}
         className="rounded-md"

package/src/header_e.tsx

@@ -26,7 +26,7 @@ export default function Header_E({
               <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
             </div>
           </Flex>
-          <div className="w-full lg:w-1/2">
+          <div className="w-full lg:w-1/2 mt-10 lg:mt-0">
             <div className="max-w-sm mx-auto text-center">
               <SigninSignup_A form={form} formLinks={formLinks} />
             </div>