Bug fixes

hqasmei · Jul 22, 2024 · 084ab2e · 084ab2e
1 parent 85e7aeb
commit 084ab2e
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 14 deletions.
diff --git a/src/app/(unauthenticated)/(landing)/_components/hero.tsx b/src/app/(unauthenticated)/(landing)/_components/hero.tsx
@@ -1,16 +1,87 @@
+'use client';
+
 import React from 'react';
 
+import Link from 'next/link';
+
+import { api } from '@/convex/_generated/api';
+import { useQuery } from 'convex/react';
+
 export default function Hero() {
+  const portfolios = useQuery(api.portfolios.getAllPortfolios);
+  const numberOfPortfolios = portfolios?.length;
+
   return (
     <>
-      <div className="flex flex-col items-center sm:pt-8 gap-y-6 sm:gap-y-7">
+      <div className="flex w-full items-center justify-center sm:mt-8">
+        <div className="relative group">
+          <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-emerald-600 rounded-full blur-sm group-hover:blur transition-all duration-300"></div>
+          <Link
+            href="/templates"
+            className="relative px-4 py-1 bg-white dark:bg-black border border-emerald-500 rounded-full inline-flex items-center space-x-2 text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300 transition-all duration-200"
+          >
+            <span className="text-sm font-medium">
+              Introducing Portfolio Templates
+            </span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </Link>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-y-6 sm:gap-y-7">
         <h1 className="text-pretty text-neutral-900 dark:text-white lg:text-6xl lg:-tracking-4 lg:leading-[4rem] lg:font-extrabold text-4xl md:text-5xl -tracking-3 font-bold max-w-3xl text-center">
-          Discover portfolios to inspire your creativity
+          Discover{' '}
+          <span className="relative inline-block">
+            portfolios
+            <svg
+              className="absolute -bottom-1 w-full h-3 left-0"
+              viewBox="0 0 200 9"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1 7.5C31 3.5 61 3.5 91 3.5C121 3.5 151 3.5 181 7.5"
+                stroke="url(#paint0_linear)"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+              <defs>
+                <linearGradient
+                  id="paint0_linear"
+                  x1="1"
+                  y1="5"
+                  x2="181"
+                  y2="5"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#34d399" />
+                  <stop offset="1" stopColor="#059669" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </span>{' '}
+          to inspire your creativity
         </h1>
       </div>
       <p className="text-neutral-700 dark:text-neutral-300 mx-auto block text-balance max-w-sm text-center text-base md:max-w-3xl md:text-lg xl:text-xl">
-        Browse our curated collection of exceptional designs to help you create
-        your best portfolio yet.
+        Browse our curated collection of{' '}
+        {numberOfPortfolios && (
+          <span className="text-foreground font-semibold">
+            {numberOfPortfolios}+
+          </span>
+        )}{' '}
+        exceptional designs to help you create your best portfolio yet.
       </p>
     </>
   );

diff --git a/src/app/(unauthenticated)/portfolio/[id]/page.tsx b/src/app/(unauthenticated)/portfolio/[id]/page.tsx
@@ -16,7 +16,7 @@ import { getImageUrl } from '@/lib/get-image-url';
 import { cn } from '@/lib/utils';
 import { SignInButton } from '@clerk/nextjs';
 import { useMutation, useQuery } from 'convex/react';
-import { ChevronLeft, ExternalLink, Heart } from 'lucide-react';
+import { ExternalLink, Heart } from 'lucide-react';
 
 export default function PortfolioPage({ params }: { params: { id: string } }) {
   const { id } = params;
@@ -92,11 +92,15 @@ export default function PortfolioPage({ params }: { params: { id: string } }) {
               )}
             </div>
 
-            {portfolio.favoritesCount && (
-              <div className="text-muted-foreground text-sm mt-4">
-                {portfolio.favoritesCount ?? '0'} likes
-              </div>
-            )}
+            {portfolio.favoritesCount !== undefined &&
+              portfolio.favoritesCount !== null && (
+                <div className="text-muted-foreground text-sm mt-4">
+                  {portfolio.favoritesCount === 0 && '0 likes'}
+                  {portfolio.favoritesCount === 1 && '1 like'}
+                  {portfolio.favoritesCount > 1 &&
+                    `${portfolio.favoritesCount} likes`}
+                </div>
+              )}
 
             <div className="flex flex-row justify-between items-center mt-4">
               {/* Socials */}
@@ -157,14 +161,14 @@ export default function PortfolioPage({ params }: { params: { id: string } }) {
                 </div>
 
                 <Button
+                  asChild
                   size="icon"
                   variant="ghost"
                   className="hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 h-8 w-8"
                 >
-                  <ExternalLink
-                    size={18}
-                    className="text-emerald-600 dark:text-emerald-400"
-                  />
+                  <Link href={portfolio.link} target="_blank">
+                    <ExternalLink size={18} />
+                  </Link>
                 </Button>
               </div>
             </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -65,11 +65,16 @@ module.exports = {
             backgroundPosition: 'var(--bg-size) 0',
           },
         },
+        gradientBorder: {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
         gradient: 'gradient 8s linear infinite',
+        'gradient-border': 'gradientBorder 3s ease infinite',
       },
     },
   },