Feat/animate button

src/app/animations.css

@@ -0,0 +1,24 @@
+.underscore-anim {
+    position: relative;
+}
+
+.underscore-anim::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -0.1rem;
+    height: 2px;
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+    border-radius: 100px;
+    @apply bg-black;
+    transition: 200ms transform, 0ms transform-origin ease-in;
+    transform: scaleX(0);
+    transform-origin: bottom right;
+}
+
+.underscore-anim:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+}

src/app/globals.css

@@ -1,3 +1,5 @@
+@import "./animations.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -34,6 +36,9 @@ body {
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+
+    --gradient-green: #58c473;
+    --gradient-blue: #049bad;
   }
   .dark {
     --background: 20 14.3% 4.1%;

src/app/posts-fb/components/share-button.tsx

@@ -3,7 +3,7 @@
 import { ClipboardCheckIcon, Share2Icon } from "lucide-react";
 import { useState } from "react";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/button";
 
 export function ShareButton({ link }: { link: string }) {
   const [clicked, setClicked] = useState(false);

src/components/button.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import { ArrowRight } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "relative overflow-hidden inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full border text-[14px] md:text-[16px] font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground",
+        secondary: "",
+        gradient: "",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        ghost:
+          "border-0 bg-slate-500/0 transition-colors hover:bg-slate-500/10",
+        link: "border-0 !py-1 !px-2",
+      },
+      color: {
+        default: "border-black",
+        black: "border-black",
+        white: "!border-white",
+      },
+      size: {
+        default: "px-6 py-3 md:px-8 md:py-3",
+        sm: "px-5 py-1 !text-[14px]",
+        lg: "px-12 py-5",
+        icon: "h-12 w-12",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      color: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      className,
+      variant = "default",
+      size,
+      color = "black",
+      asChild = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        className={cn(
+          buttonVariants({ variant, size, className, color }),
+          "group before:pointer-events-auto before:absolute before:bg-transparent before:content-['']" +
+            " isolate before:top-full before:z-[-1] before:h-[200%] before:w-[110%] before:rounded-[50%]" +
+            " before:ease-[cubic-bezier(.23,1,.32,1)] before:transition-all before:duration-200 hover:before:-top-1/2" +
+            " hover:before:origin-top hover:before:ease-in",
+          {
+            "before:bg-gradient-green-blue": variant === "gradient",
+            "before:bg-white":
+              ["default", "secondary"].includes(variant) && color === "white",
+            "before:bg-black":
+              ["default", "secondary"].includes(variant) &&
+              ["black"].includes(color),
+          },
+        )}
+        ref={ref}
+        {...props}
+      >
+        <div className="pointer-events-auto relative flex cursor-pointer items-center gap-4 md:gap-8">
+          <span
+            className={cn("lowercase transition-all duration-200", {
+              "text-foreground": color === "black",
+              "text-white": color === "white",
+              "group-hover:text-black":
+                ["default", "secondary"].includes(variant) && color === "white",
+              "group-hover:text-white":
+                ["default", "secondary"].includes(variant) && color === "black",
+              "underscore-anim": variant === "link",
+            })}
+          >
+            {children}
+          </span>
+
+          {(variant === "gradient" || variant === "secondary") && (
+            <div className="relative grid h-6 w-6 place-items-center md:h-8 md:w-8">
+              <div
+                className={cn(
+                  "h-2 w-2 rounded-full transition-transform duration-75 group-hover:scale-0",
+                  {
+                    "bg-gradient-green-blue": variant === "gradient",
+                    "bg-white": variant === "secondary" && color === "white",
+                    "bg-black": variant === "secondary" && color === "black",
+                  },
+                )}
+              />
+              <div className="absolute grid h-full w-full rotate-[30deg] scale-0 place-items-center rounded-full bg-black transition-transform duration-150 ease-out group-hover:animate-reveal-arrow group-hover:ease-in">
+                <ArrowRight className="!size-5 text-white md:!size-6" />
+              </div>
+            </div>
+          )}
+        </div>
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/components/homepage-header.tsx

@@ -1,6 +1,6 @@
 export function HomepageHeader({ children }: { children: React.ReactNode }) {
   return (
-    <h2 className="mb-2 w-fit rounded-r-full bg-gradient-main px-5 py-2 text-base font-extrabold text-background sm:px-7 sm:text-xl md:mb-4 md:px-9 md:text-2xl lg:mb-5 lg:px-10 lg:py-3 lg:text-4xl xl:mb-7 xl:px-12 xl:py-5 xl:text-5xl">
+    <h2 className="bg-gradient-main mb-2 w-fit rounded-r-full px-5 py-2 text-base font-extrabold text-background sm:px-7 sm:text-xl md:mb-4 md:px-9 md:text-2xl lg:mb-5 lg:px-10 lg:py-3 lg:text-4xl xl:mb-7 xl:px-12 xl:py-5 xl:text-5xl">
       {children}
     </h2>
   );

src/components/horizontal-rule.tsx

@@ -1,3 +1,3 @@
 export function HorizontalRule() {
-  return <hr className="w-full border-b-2 border-gray-300" />;
+  return <hr className="w-full border-b-[1.5px] border-gray-300" />;
 }

src/components/latest-news/post-preview.tsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 
 import type { FacebookPost } from "@/lib/types";
 
-import { Button } from "../ui/button";
+import { Button } from "../button";
 
 export function PostPreview({ post }: { post: FacebookPost }) {
   const date = format(post.updated_time, "dd MMMM yyyy", { locale: pl });
@@ -34,8 +34,8 @@ export function PostPreview({ post }: { post: FacebookPost }) {
             <div
               className={`grid transition-all ease-in-out ${
                 showDetails
-                  ? "visible grid-rows-animate-height-open opacity-100"
-                  : "invisible grid-rows-animate-height-closed opacity-0"
+                  ? "grid-rows-animate-height-open visible opacity-100"
+                  : "grid-rows-animate-height-closed invisible opacity-0"
               }`}
             >
               <p className="overflow-hidden whitespace-pre-line">

src/components/no-data-info.tsx

@@ -2,7 +2,7 @@
 
 import type { NoDataInfoProps } from "@/lib/types";
 
-import { Button } from "./ui/button";
+import { Button } from "./button";
 
 const handleReload = () => {
   window.location.reload();
@@ -12,14 +12,8 @@ function NoDataInfo({ errorTitle, errorMessage }: NoDataInfoProps) {
   return (
     <div className="align-center flex flex-col items-center">
       <h3 className="mb-5 text-lg font-bold">{errorTitle}</h3>
-      <p className="mb-5 w-80 text-center sm:w-90">{errorMessage}</p>
-      <Button
-        className="rounded-[100px] border-black font-medium"
-        variant="outline"
-        onClick={handleReload}
-      >
-        odśwież
-      </Button>
+      <p className="sm:w-90 mb-5 w-80 text-center">{errorMessage}</p>
+      <Button onClick={handleReload}>odśwież</Button>
     </div>
   );
 }

src/components/static-map.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-import { Button } from "./ui/button";
+import { Button } from "./button";
 
 export function StaticMap() {
   const [outside, setOutside] = useState(true);

tailwind.config.ts

@@ -11,6 +11,10 @@ export default {
   ],
   theme: {
     extend: {
+      backgroundImage: {
+        "gradient-green-blue":
+          "radial-gradient(94.87% 94.87% at 90% 70%, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%)",
+      },
       fontFamily: {
         sans: ["var(--font-montserrat)", "sans-serif"],
       },
@@ -61,18 +65,15 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
-      backgroundImage: {
-        "gradient-main":
-          "radial-gradient(circle at top left, hsl(var(--primary)), hsl(var(--secondary)))",
-        "gradient-secondary":
-          "radial-gradient(circle at bottom right, hsl(var(--primary)), hsl(var(--secondary)))",
-      },
-      spacing: {
-        "90": "22rem",
+      keyframes: {
+        "bouncy-arrow-reveal": {
+          "0%": { transform: "scale3d(0,0,1) rotate(45deg)" },
+          "100%": { transform: "scaleX(1) rotate(0deg)" },
+        },
       },
-      gridTemplateRows: {
-        "animate-height-open": "1fr",
-        "animate-height-closed": "0fr",
+      animation: {
+        "reveal-arrow":
+          "bouncy-arrow-reveal 0.17s cubic-bezier(.2, 1.2, .3, 1.4) forwards",
       },
     },
   },