Merge pull request #24 from Tarikul-Islam-Anik/dev

Update 1.0.4

web/components/hero.tsx

@@ -1,4 +1,5 @@
 import { DocumentTextIcon, PhotoIcon } from "@heroicons/react/24/outline";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import TeleEmoji from "./telegram-emoji";
 import { buttonVariants } from "./ui/button";
 export const Hero = () => {
@@ -20,11 +21,18 @@ export const Hero = () => {
               </span>
               Fluent Emojis
             </h1>
-            <p className="mx-auto mt-8 max-w-xl text-base leading-relaxed text-slate-500 sm:mb-8">
+            <p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-slate-500">
               All the Microsoft animated fluent emojis are available in one
               place and ready to use in your next project or README file.
             </p>
-            <div className="mx-auto mt-6 flex w-full max-w-2xl flex-col justify-center gap-2 sm:flex-row">
+            <Alert className="my-4">
+              <span className="h-4 w-4">🇵🇸 </span>
+              <AlertTitle>Free Palestine: A Call for Justice!</AlertTitle>
+              <AlertDescription>
+                Demanding Palestine&apos;s Freedom & Global Support
+              </AlertDescription>
+            </Alert>
+            <div className="mx-auto flex w-full max-w-2xl flex-col justify-center gap-2 sm:flex-row">
               <div className="mt-3 rounded-lg sm:mt-0">
                 <a
                   href="https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis"

web/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };