Merge branch 'main' of github.com:gitranks/gitranks-ui

Author: maslianok

README.md

@@ -1,4 +1,4 @@
-# GitRanks UI
+# GitRanks
 
 [gitranks.com](https://gitranks.com/)
 
@@ -8,14 +8,23 @@ GitRanks turns public GitHub activity into an easy "developer scoreboard". See h
 
 https://www.youtube.com/watch?v=CayzB5VQyPY
 
-<img width="480" alt="1-profile-analytics" src="https://github.com/user-attachments/assets/6a8d1f48-14d0-4f92-a508-e4ece286753e" />
-<img width="480" alt="2-global-rankings" src="https://github.com/user-attachments/assets/496c3c06-aad6-4ea6-b64c-ba43881c3cad" />
-<img width="480" alt="3-country-rankings" src="https://github.com/user-attachments/assets/775cf261-7f4c-485a-8229-acdef202aa9a" />
-<img width="480" alt="4-chat-integrations" src="https://github.com/user-attachments/assets/9bb090b9-c5dc-4c4a-a4e3-b0094e374d73" />
+<img width="410" alt="1-profile-analytics" src="https://github.com/user-attachments/assets/6a8d1f48-14d0-4f92-a508-e4ece286753e" />
 
+<img width="410" alt="2-global-rankings" src="https://github.com/user-attachments/assets/496c3c06-aad6-4ea6-b64c-ba43881c3cad" />
 
+<img width="410" alt="3-country-rankings" src="https://github.com/user-attachments/assets/775cf261-7f4c-485a-8229-acdef202aa9a" />
 
+<img width="410" alt="4-chat-integrations" src="https://github.com/user-attachments/assets/9bb090b9-c5dc-4c4a-a4e3-b0094e374d73" />
 
+## 🥇 Profile Badges
+
+<img src="https://gitranks.com/badges/s__global__position__none__rounded.svg" />
+<img src="https://gitranks.com/badges/c__global__score__none__rounded_vb-1e3a8a.svg" />
+<img src="https://gitranks.com/badges/c__global__percentile__none__rounded_vb-7f5539.svg" />
+<img src="https://gitranks.com/badges/s__global__position__monthly-change__rounded.svg" />
+<img src="https://gitranks.com/badges/f__global__position__percentile__rounded_vb-1e3a8a.svg" />
+
+[View Badge Gallery](https://gitranks.com/badge/gallery) 
 
 ## ✨ Key Features
 

app/components/badge-section.tsx

@@ -13,7 +13,7 @@ export const BadgeSection = () => {
         Show off your coding achievements with a dynamic GitHub badge. Let the world see exactly where you stand among
         millions of developers.
       </div>
-      <div className="flex gap-3">
+      <div className="flex flex-wrap gap-3">
         <BadgeExample label={RANK_NAME.s} />
         <BadgeExample
           label="Contribution Score"

app/components/ph-announcement.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+
+import { cn } from '@/lib/utils';
+
+const CLIP_PATH =
+  'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)';
+
+const BgHelper: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <div aria-hidden="true" className={cn(`absolute top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl`, className)}>
+      <div
+        style={{ clipPath: CLIP_PATH }}
+        className="aspect-577/310 w-144.25 bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-40"
+      />
+    </div>
+  );
+};
+
+export const PhAnnouncement = () => {
+  return (
+    <div className="relative isolate flex items-center justify-center flex-wrap gap-x-4 gap-y-1 overflow-hidden bg-gray-50 dark:bg-gray-800/50 px-2 py-2.5 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
+      <BgHelper className="left-[max(-7rem,calc(50%-52rem))]" />
+      <BgHelper className="left-[max(45rem,calc(50%+8rem))]" />
+      <p className="text-sm/6 text-gray-900 dark:text-gray-100">
+        <strong className="font-semibold">We are live on Product Hunt today - check it out</strong>
+      </p>
+      <a
+        href="https://www.producthunt.com/products/gitranks?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-gitranks"
+        target="_blank"
+      >
+        <img
+          src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=988220&theme=light&t=1755193761436"
+          alt="GitRanks - GitHub&#0032;Profile&#0032;Analytics&#0032;&#0038;&#0032;Rankings | Product Hunt"
+          style={{ height: '36px' }}
+          className="dark:hidden"
+        />
+        <img
+          src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=988220&theme=dark&t=1755193761436"
+          alt="GitRanks - GitHub&#0032;Profile&#0032;Analytics&#0032;&#0038;&#0032;Rankings | Product Hunt"
+          style={{ height: '36px' }}
+          className="hidden dark:block"
+        />
+      </a>
+    </div>
+  );
+};

app/page.tsx

@@ -6,11 +6,13 @@ import { CountryRankingSection } from './components/country-ranking-section';
 import { GlobalRankingSection } from './components/global-ranking-section';
 import InsightsCarousel from './components/insights-carousel';
 import { MessengerIntegrationSection } from './components/messenger-integration-section';
+import { PhAnnouncement } from './components/ph-announcement';
 import { SearchProfile } from './components/search-profiile';
 
 export default function Home() {
   return (
     <>
+      <PhAnnouncement />
       <div className="border-b bg-linear-45 from-background to-80% to-landing-page-gradient-start-color">
         <Header />
         <Page className="p-0">
@@ -31,6 +33,7 @@ export default function Home() {
           </div>
         </Page>
       </div>
+
       <Page className="gap-4">
         <GlobalRankingSection />
         <CountryRankingSection />