feat(app): Count section added in landing page

src/app/(home)/globals.css

@@ -5,6 +5,7 @@
 :root {
   --bg-dark: #141414;
   --bg-light: #ffffff;
+  --accent: #d7f47e;
 
   --text-dark: #ffffff;
   --text-light: #000000;
@@ -29,3 +30,7 @@
 .clip-bottom {
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
 }
+
+.flex-center {
+  @apply flex items-center justify-center;
+}

src/app/(home)/page.tsx

@@ -2,24 +2,28 @@
 
 import '@app/(home)/styles.css';
 
+import { AnimatedCounter } from '@components/AnimatedCount';
+import { AndroidLogo, LinuxMintLogo } from '@components/svgs';
+
 import Link from 'next/link';
 
 export default function HomePage() {
   return (
     <main>
       <div className='container m-auto px-3 py-6'>
-        <div className='mt-5 sm:mt-16 flex flex-col gap-6 justify-center items-center text-[#d7f47e]'>
+        <div className='mt-5 sm:mt-32 lg:mt-56 flex flex-col gap-6 justify-center items-center text-[--accent]'>
           <>
-            <h1 className='heading-0'>One Design</h1>
-            <h2 className='heading-1'>Endless Persnolization.</h2>
+            <h1 className='heading-0'>One Cursor</h1>
+            <h2 className='heading-1'>Endless Personalization.</h2>
           </>
 
           <p className='sub-heading'>
             Free and open-source, the internet&apos;s premier #1 cursor offers
             fully customizable features and an interactive web studio.
           </p>
         </div>
-        <div className='mt-10 flex flex-col sm:flex-row justify-center gap-5 md:gap-20 items-center text-black font-black'>
+
+        <div className='mt-10 flex-center flex-col sm:flex-row gap-5 md:gap-20 text-black font-black'>
           <Link
             className='heading-button selected-button'
             target='_blank'
@@ -53,6 +57,55 @@ export default function HomePage() {
             Studio
           </Link>
         </div>
+
+        <div className='mt-20 sm:mt-40 lg:mt-52 text-center'>
+          <p className='text-[6px] sm:text-[10px] font-bold text-white/[.9] uppercase'>
+            Default in
+          </p>
+
+          <div className='mt-4 flex-center text-white/[.8] gap-6'>
+            <Link
+              href='https://developer.android.com/about/versions/14/get'
+              target='_blank'
+              className='hover:text-[--accent]'>
+              <AndroidLogo />
+            </Link>
+
+            <Link
+              href='https://linuxmint.com/edition.php?id=299'
+              target='_blank'
+              className='hover:text-[--accent]'>
+              <LinuxMintLogo />
+            </Link>
+          </div>
+        </div>
+
+        <div className='mt-20 sm:mt-28 grid grid-cols-2 lg:grid-cols-4 gap-10 text-center'>
+          <div className='count-card'>
+            <h1 className='count-heading'>#1</h1>
+            <p className='count-subtext'>Most Popular Cursor</p>
+          </div>
+
+          <div className='count-card'>
+            <h1 className='count-heading'>
+              <AnimatedCounter number={'120'} duration={4} />
+              K+
+            </h1>
+            <p className='count-subtext'>Downloads and counting...</p>
+          </div>
+
+          <div className='count-card'>
+            <h1 className='count-heading'>1.4K+</h1>
+            <p className='count-subtext'>Stars on Github</p>
+          </div>
+
+          <div className='count-card'>
+            <h1 className='count-heading'>
+              <AnimatedCounter number={'350'} duration={0.01} />+
+            </h1>
+            <p className='count-subtext'>Handcrafted Cursors</p>
+          </div>
+        </div>
       </div>
     </main>
   );

src/app/(home)/styles.css

@@ -2,15 +2,15 @@
   @apply text-[70px] sm:text-[150px] text-center font-black tracking-tighter leading-none uppercase;
 }
 .heading-1 {
-  @apply text-[18px] sm:text-6xl text-center font-black tracking-tighter uppercase;
+  @apply text-[16px] sm:text-6xl text-center font-black tracking-tighter uppercase;
 }
 
 .sub-heading {
   @apply text-[9px] sm:text-sm uppercase text-center text-white/[.7] font-semibold w-3/4 lg:w-1/2;
 }
 
 .heading-button {
-  @apply flex gap-2 px-14 py-6 rounded-full uppercase;
+  @apply flex gap-2 px-10 sm:px-14 py-4 sm:py-6 rounded-full uppercase;
 }
 
 .selected-button {
@@ -20,3 +20,15 @@
 .outlined-button {
   @apply text-white/[.6] hover:text-[#d7f47e] ring-1 ring-white/[.6] hover:ring-[#d7f47e] font-bold;
 }
+
+.count-card {
+  @apply flex flex-col justify-center items-center;
+}
+
+.count-heading {
+  @apply p-3 text-white/[.8] text-5xl sm:text-8xl font-semibold;
+}
+
+.count-subtext {
+  @apply p-1 text-sm text-white/[.4] uppercase tracking-tighter font-bold;
+}

src/components/AnimatedCount.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+interface Props {
+  number: string;
+  duration: number;
+}
+
+export const AnimatedCounter: React.FC<Props> = (props) => {
+  const { number, duration } = props;
+
+  // number displayed by component
+  const [count, setCount] = useState('0');
+
+  useEffect(() => {
+    let start = 0;
+    // first three numbers from props
+    const end = parseInt(number.substring(0, 3));
+    // if zero, return
+    if (start === end) return;
+
+    // find duration per increment
+    let incrementTime = (duration / end) * 1000;
+
+    // timer increments start counter
+    // then updates count
+    // ends if start reaches end
+    let timer = setInterval(() => {
+      start += 1;
+      setCount(String(start) + number.substring(3));
+      if (start === end) clearInterval(timer);
+    }, incrementTime);
+
+    // dependency array
+  }, [number, duration]);
+
+  return <>{count}</>;
+};

src/components/NavBar/index.tsx

@@ -20,7 +20,7 @@ export const NavBar: React.FC<Props> = (_props) => {
     <header
       className={`sticky py-px top-0 z-20 ${
         pathname === '/'
-          ? ''
+          ? 'bg-[--bg-dark]'
           : 'bg-[#151515] backdrop-filter backdrop-blur-xl border-b border-white/[.1] firefox:bg-opacity-95 bg-opacity-95'
       } `}>
       <nav className='container mx-auto p-3 md:p-4 flex items-center justify-between'>
@@ -30,7 +30,7 @@ export const NavBar: React.FC<Props> = (_props) => {
               <span
                 className={
                   session?.user?.role === 'PRO' || pathname === '/'
-                    ? 'text-[#d7f47e]'
+                    ? 'text-[--accent]'
                     : 'text-white'
                 }>
                 <BibataTypoLogo />

src/components/NavBar/profile.tsx

@@ -34,7 +34,9 @@ export const Profile: React.FC<Props> = (props) => {
               />
             </svg>
           </span>
-          <span className='sm:ml-3 hidden sm:block text-sm'>Connect</span>
+          <span className='sm:ml-3 hidden uppercase sm:block text-sm'>
+            Connect
+          </span>
         </button>
       ) : (
         <>

src/components/svgs/android.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+
+type Props = {};
+
+// eslint-disable-next-line no-unused-vars
+export const AndroidLogo: React.FC<Props> = (_props) => {
+  return (
+    <svg
+      className='fill-current h-8 sm:h-10'
+      viewBox='0 0 331 193'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M329.45 184.2C329.5 184.525 329.55 184.85 329.6 185.2C329.9 187.6 330.2 190 330.2 192.5H-0.299988C1.2219e-05 190 0.300012 187.6 0.700012 185.2C0.750012 184.85 0.800009 184.525 0.850006 184.2C0.900003 183.875 0.95 183.55 1 183.2C1.7 179 2.5 174.9 3.5 170.9C5.2 163.9 7.4 157 10 150.3C12.2 144.6 14.7 139.1 17.5 133.8C21.1 126.9 25.1 120.4 29.6 114.1C35.1 106.4 41.1 99.2001 47.8 92.6001C51.1 89.3 54.6 86.1001 58.2 83.1001C64.3 78.0001 70.7 73.4 77.4 69.2L77.3 69.1001C75.65 66.2001 73.975 63.325 72.3 60.45C70.625 57.575 68.95 54.7 67.3 51.8C66.3188 50.1052 65.3464 48.4191 64.3776 46.7393C62.0882 42.7698 59.8188 38.8349 57.5 34.9C56.35 32.9 55.175 30.875 54 28.85C52.825 26.825 51.65 24.8 50.5 22.8C50 21.8 49.5 20.8 49.2 19.8C48.3 16.9 48.3 14 49 11.2C49.2 10.5 49.4 9.90003 49.7 9.20003C50 8.50003 50.3 7.90004 50.7 7.30004C52 5.20004 53.8 3.40005 56 2.10005C58 0.900055 60.2 0.200049 62.5 4.88311e-05C63.5 -0.0999512 64.4 -0.0999512 65.4 4.88311e-05C65.4862 0.0123626 65.5739 0.0246763 65.663 0.0371767C66.297 0.126191 66.9985 0.22467 67.7 0.400043C70.4 1.10004 73 2.60004 75 4.80004C75.7 5.60004 76.3 6.40004 76.9 7.40004C78.05 9.40004 79.225 11.425 80.4 13.45C81.575 15.475 82.75 17.5 83.9 19.5C84.8816 21.1954 85.8543 22.882 86.8234 24.5623C89.1125 28.5313 91.3815 32.4657 93.7 36.4C95.35 39.3 97.025 42.175 98.7 45.05C100.375 47.925 102.05 50.8 103.7 53.7C103.85 54 104.025 54.3 104.2 54.6C104.375 54.9 104.55 55.2001 104.7 55.5L110.4 53.4C127.1 47.6 144.9 44.4 163.4 44.2H165.1C186 44.2 205.9 48 224.3 55L225.8 55.6001C226 55.3001 226.175 54.9751 226.35 54.65C226.525 54.325 226.7 54 226.9 53.7C228.55 50.8 230.225 47.925 231.9 45.05C233.575 42.175 235.25 39.3 236.9 36.4L246.7 19.5C247.85 17.5 249.025 15.475 250.2 13.45C251.375 11.425 252.55 9.40004 253.7 7.40004C254.2 6.50004 254.9 5.60004 255.6 4.80004C257.6 2.60004 260.1 1.10004 262.9 0.400043C263.6 0.200054 264.4 0.10006 265.2 6.51628e-05C266.2 -0.0999348 267.1 -0.0999512 268.1 4.88311e-05C270.4 0.200049 272.6 0.900055 274.6 2.10005C276.9 3.40005 278.7 5.20004 279.9 7.30004C280.3 7.90004 280.6 8.50003 280.9 9.20003C281.2 9.80003 281.4 10.5 281.6 11.2C282.4 14 282.3 17 281.4 19.8C281.1 20.9 280.7 21.8 280.1 22.8C278.95 24.8 277.775 26.825 276.6 28.85C275.425 30.875 274.25 32.9 273.1 34.9C272.12 36.5937 271.148 38.2785 270.18 39.9571C267.89 43.9279 265.619 47.864 263.3 51.8C261.65 54.7 259.975 57.575 258.3 60.45C256.625 63.325 254.95 66.2001 253.3 69.1001C253.25 69.1501 253.225 69.2001 253.2 69.25C253.175 69.3 253.15 69.35 253.1 69.4C260.4 73.9 267.3 79.0001 273.8 84.6001C276.8 87.1001 279.7 89.8 282.5 92.6001C289.1 99.3 295.2 106.4 300.7 114.1C305.2 120.4 309.2 127 312.8 133.8C315.6 139.1 318.1 144.6 320.3 150.3C322.9 156.9 325.1 163.8 326.8 170.9C327.8 175 328.6 179.1 329.3 183.2C329.35 183.55 329.4 183.875 329.45 184.2ZM253.3 124C258.8 132.1 257.8 142.3 251.2 146.7C244.6 151.1 234.8 148.1 229.4 139.9C223.9 131.8 224.9 121.6 231.5 117.2C238.1 112.8 247.9 115.8 253.3 124ZM99.3 117.3C105.9 121.7 106.8 131.8 101.4 140C95.9 148.1 86.2 151.2 79.6 146.8C73 142.4 72.1 132.3 77.5 124.1C82.9 115.9 92.7 112.9 99.3 117.3Z'
+      />
+    </svg>
+  );
+};

src/components/svgs/index.ts

@@ -1,6 +1,9 @@
 import { BibataLogo } from './bibata';
 import { BibataTypoLogo } from './bibata-typo';
+
 import { GitHubLogo } from './github';
+import { AndroidLogo } from './android';
+import { LinuxMintLogo } from './linuxmint';
 
 import { CheckSVG } from './check';
 import { ErrorSVG } from './error';
@@ -24,6 +27,8 @@ export {
   BibataLogo,
   BibataTypoLogo,
   GitHubLogo,
+  AndroidLogo,
+  LinuxMintLogo,
   CheckSVG,
   ProcessingSVG,
   DownloadSVG,

src/components/svgs/linuxmint.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+
+type Props = {};
+
+// eslint-disable-next-line no-unused-vars
+export const LinuxMintLogo: React.FC<Props> = (_props) => {
+  return (
+    <svg
+      className='fill-current h-8 sm:h-14'
+      viewBox='0 0 256 256'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M256 128C256 198.692 198.692 256 128 256C57.3075 256 0 198.692 0 128C0 57.3075 57.3075 0 128 0C198.692 0 256 57.3075 256 128ZM58 153V63H78V153.3C78.1 164.2 87 173.1 98 173H158.3C169.2 172.9 178.1 164 178 153V103C178 97.5 173.5 93 168 93C162.5 93 158 97.5 158 103V153H138V103C138 97.5 133.5 93 128 93C122.5 93 118 97.5 118 103V153H98V103C98.1 86.5 111.5 73.1 128 73C135.4 73.1 142.5 75.9 148 80.9C153.5 75.8 160.6 73 168 73C184.5 73.1 197.9 86.5 198 103V153C197.9 175.1 180.1 192.9 158 193H98C75.9 192.9 58.1 175.1 58 153Z'
+      />
+    </svg>
+  );
+};