Merge pull request #3255 from gluestack/feat/product-hunt

ujjwal2608 · web-flow · commit 7b105369a43a · 2025-11-12T16:56:23.000+05:30
Feat/product hunt
diff --git a/apps/website/components/page-components/header/index.tsx b/apps/website/components/page-components/header/index.tsx
@@ -82,11 +82,11 @@ const Header = ({
     {
       href: 'https://pro.gluestack.io/?utm_source=gluestack.io&utm_medium=header&utm_campaign=site-navigation',
       logo: {
-        light: GluestackProLogo,
-        dark: GluestackProLogo,
+        light: StarterKitLogo,
+        dark: StarterKitLogoDark,
       },
-      title: 'Gluestack Pro (Preview)',
-      description: 'Premium React Native templates that just work.',
+      title: 'gluestack-ui pro',
+      description: 'The only React Native templateyou’ll ever need.',
       badge: {
         text: 'PAID',
         action: 'info',
@@ -452,6 +452,16 @@ const Header = ({
                   )}
                 </Box>
               </Pressable>
+              {!pathname.includes('/docs') && (
+                <Link
+                  href="https://pro.gluestack.io/?utm_source=gluestack.io&utm_medium=banner_docs&utm_campaign=brand-awareness"
+                  className="border border-outline-200 px-4 py-1.5 xl:flex hidden rounded"
+                >
+                  <Text className="text-sm text-typography-900">
+                    gluestack-ui pro
+                  </Text>
+                </Link>
+              )}
               {!pathname.includes('/docs') ? (
                 <Link
                   href="/ui/docs"
@@ -469,7 +479,10 @@ const Header = ({
                       Get Updates
                     </Text>
                   </Link>
-                 <NewsletterModal showModal={showModal} setShowModal={setShowModal}/>
+                  <NewsletterModal
+                    showModal={showModal}
+                    setShowModal={setShowModal}
+                  />
                   <Link
                     href="https://rapidnative.com/?utm_source=gluestack.io&utm_medium=banner_docs&utm_campaign=brand-awareness"
                     className="bg-primary-500 px-4 py-1.5 xl:flex hidden rounded"
diff --git a/apps/website/components/page-components/landing-page/ProductHuntBanner/index.tsx b/apps/website/components/page-components/landing-page/ProductHuntBanner/index.tsx
@@ -18,14 +18,14 @@ const ProductHuntBanner = ({
         <div className="mx-auto w-[85%] max-w-[1440px] px-2 sm:px-2">
           <div className="flex items-center justify-between gap-3 py-2 md:py-2.5">
             <a
-              href="https://www.producthunt.com/products/gluestack?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-gluestack&#0045;v3"
+              href="https://www.producthunt.com/products/gluestack-ui-pro?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-gluestack&#0045;ui&#0045;pro"
               target="_blank"
               rel="noopener noreferrer"
               className="shrink-0 inline-flex"
             >
               <img
-                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1009919&theme=light&t=1756285092927"
-                alt="gluestack&#0032;v3 Product Hunt featured badge"
+                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1036836&theme=light&t=1762942861229"
+                alt="gluestack&#0032;ui&#0032;pro Product Hunt featured badge"
                 width="110"
                 className="h-6 md:h-7 w-auto"
               />
@@ -34,7 +34,7 @@ const ProductHuntBanner = ({
               We're live on Product Hunt!
               <span className="hidden lg:inline">
                 {' '}
-                · If you like gluestack, please support us.
+                · If you like gluestack-ui pro, please support us.
               </span>
             </p>
             <HStack className="gap-2">
diff --git a/apps/website/components/page-components/landing-page/ResponsiveSidebar/sidebar-header-items.tsx b/apps/website/components/page-components/landing-page/ResponsiveSidebar/sidebar-header-items.tsx
@@ -163,22 +163,22 @@ export const headerItems: SidebarSectionProps[] = [
     title: 'Products',
     items: [
       {
-        title: 'AppLaunchKit',
-        link: 'https://applaunchk.it/',
+        title: 'RapidNative',
+        link: 'https://rapidnative.com/?utm_source=gluestack.io&utm_medium=header&utm_campaign=brand-awareness',
         logo: (
           <Image
-            alt="dark mode"
+            alt="RapidNative logo"
             className="w-5 h-5"
             size="md"
-            source={require('@/public/icon/logo/app-launch-kit/dark-mode.svg')}
+            source={require('@/public/icon/logo/rapidnative/logo.png')}
           />
         ),
         logoDark: (
           <Image
-            alt="light mode"
+            alt="RapidNative logo"
             className="w-5 h-5"
             size="md"
-            source={require('@/public/icon/logo/app-launch-kit/light-mode.svg')}
+            source={require('@/public/icon/logo/rapidnative/logo.png')}
           />
         ),
         badge: (
@@ -188,27 +188,27 @@ export const headerItems: SidebarSectionProps[] = [
         ),
       },
       {
-        title: 'Starter Kit',
-        link: 'https://github.com/gluestack/gluestack-ui-starter-kits/',
+        title: 'gluestack-ui pro',
+        link: 'https://pro.gluestack.io/?utm_source=gluestack.io&utm_medium=header&utm_campaign=site-navigation',
         logo: (
           <Image
-            alt="dark mode"
+            alt="gluestack-ui pro logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/gluestack/logo-dark.svg')}
           />
         ),
         logoDark: (
           <Image
-            alt="dark mode"
+            alt="gluestack-ui pro logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/gluestack/logo-light.svg')}
           />
         ),
         badge: (
-          <Badge size="md" variant="solid" action="success">
-            <BadgeText>FREE</BadgeText>
+          <Badge size="md" variant="solid" action="info">
+            <BadgeText>PAID</BadgeText>
           </Badge>
         ),
       },
@@ -217,15 +217,15 @@ export const headerItems: SidebarSectionProps[] = [
         link: 'https://theappmarket.io',
         logo: (
           <Image
-            alt="dark mode"
+            alt="theappmarket logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/theappmarket/appmarket-logo.svg')}
           />
         ),
         logoDark: (
           <Image
-            alt="dark mode"
+            alt="theappmarket logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/theappmarket/appmarket-logo.svg')}
@@ -237,6 +237,56 @@ export const headerItems: SidebarSectionProps[] = [
           </Badge>
         ),
       },
+      {
+        title: 'AppLaunchKit',
+        link: 'https://applaunchk.it/',
+        logo: (
+          <Image
+            alt="AppLaunchKit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/app-launch-kit/dark-mode.svg')}
+          />
+        ),
+        logoDark: (
+          <Image
+            alt="AppLaunchKit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/app-launch-kit/light-mode.svg')}
+          />
+        ),
+        badge: (
+          <Badge size="md" variant="solid" action="info">
+            <BadgeText>PAID</BadgeText>
+          </Badge>
+        ),
+      },
+      {
+        title: 'Starter Kit',
+        link: 'https://github.com/gluestack/gluestack-ui-starter-kits/',
+        logo: (
+          <Image
+            alt="Starter Kit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/gluestack/logo-dark.svg')}
+          />
+        ),
+        logoDark: (
+          <Image
+            alt="Starter Kit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/gluestack/logo-light.svg')}
+          />
+        ),
+        badge: (
+          <Badge size="md" variant="solid" action="success">
+            <BadgeText>FREE</BadgeText>
+          </Badge>
+        ),
+      },
     ],
   },
   {
diff --git a/apps/website/components/page-components/landing-page/WebsiteLayout/index.tsx b/apps/website/components/page-components/landing-page/WebsiteLayout/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Box } from '@/components/ui/box';
 import Header from '@/components/page-components/header';
 import ResponsiveSidebar from '@/components/page-components/landing-page/ResponsiveSidebar';
-// import ProductHuntBanner from '../ProductHuntBanner';
+import ProductHuntBanner from '../ProductHuntBanner';
 
 function WebsiteLayout({
   children,
@@ -11,7 +11,7 @@ function WebsiteLayout({
   children: any;
 }) {
   const [isOpenSidebar, setIsOpenSidebar] = useState(false);
-  // const [showPHBanner, setShowPHBanner] = useState(true);
+  const [showPHBanner, setShowPHBanner] = useState(true);
   useEffect(() => {
     if (isOpenSidebar) {
       document.body.style.overflow = 'hidden';
@@ -46,10 +46,10 @@ function WebsiteLayout({
         isOpenSidebar={isOpenSidebar}
         setIsOpenSidebar={setIsOpenSidebar}
       />
-      {/* <ProductHuntBanner
+      <ProductHuntBanner
         showPHBanner={showPHBanner}
         setShowPHBanner={setShowPHBanner}
-      /> */}
+      />
       {/* Remove this later */}
       <Box className={` ${isOpenSidebar ? 'opacity-0' : 'opacity-100'} `}>
         {children}
