escape html prolly added

app/api/contact/route.ts

@@ -19,9 +19,10 @@ const generateEmailContent = (data: Record<string, string>) => {
 	const stringData = Object.entries(data).reduce(
 		(str, [key, val]) =>
 			str +
-			`${CONTACT_MESSAGE_FIELDS[key] || escapeHtml(key)}: \n${escapeHtml(
-				val
-			)} \n\n`,
+			`${CONTACT_MESSAGE_FIELDS[key] || key}: ${val.replace(
+				/\n/g,
+				"<br/>"
+			)} <br/><br/>`,
 		""
 	);
 

components/shared/Statistics.tsx

@@ -1,22 +1,21 @@
 import { stats } from "@/constants";
-import NumTicker from "../widgets/num-tick";
+import NumberTicker from "../widgets/num-tick";
 
 const Statistics = () => {
-  return (
-    <section>
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
-        {stats.map(({ title, count }) => (
-          <div key={title} className="space-y-2 text-center">
-            <h2 className="text-3xl sm:text-4xl font-bold">
-              {count}
-              {/* <NumTicker value={count} /> */}
-            </h2>
-            <p className="text-xl text-muted-foreground">{title}</p>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
+	return (
+		<section>
+			<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+				{stats.map(({ title, count }) => (
+					<div key={title} className="space-y-2 text-center">
+						<h2 className="text-3xl sm:text-4xl font-bold">
+							<NumberTicker value={count} />
+						</h2>
+						<p className="text-xl text-muted-foreground">{title}</p>
+					</div>
+				))}
+			</div>
+		</section>
+	);
 };
 
 export default Statistics;

components/widgets/num-tick.tsx

@@ -1,51 +1,55 @@
 "use client";
 
-import { useInView, useMotionValue, useSpring } from "framer-motion";
 import { useEffect, useRef } from "react";
+import { useInView, useMotionValue, useSpring } from "framer-motion";
 
-export default function NumTicker({
-  value,
-  direction = "up",
-  delay = 0,
-  className,
+import { cn } from "@/lib/utils";
+
+export default function NumberTicker({
+	value,
+	direction = "up",
+	delay = 0,
+	className,
 }: {
-  value: number;
-  direction?: "up" | "down";
-  className?: string;
-  delay?: number;
+	value: number;
+	direction?: "up" | "down";
+	className?: string;
+	delay?: number; // delay in s
 }) {
-  const ref = useRef<HTMLSpanElement>(null);
-  const motionValue = useMotionValue(direction === "down" ? value : 0);
-  const springValue = useSpring(motionValue, {
-    damping: 60,
-    stiffness: 100,
-  });
+	const ref = useRef<HTMLSpanElement>(null);
+	const motionValue = useMotionValue(direction === "down" ? value : 0);
+	const springValue = useSpring(motionValue, {
+		damping: 60,
+		stiffness: 100,
+	});
+	const isInView = useInView(ref, { once: true, margin: "0px" });
 
-  const isInView = useInView(ref, { once: true, margin: "0px" });
+	useEffect(() => {
+		isInView &&
+			setTimeout(() => {
+				motionValue.set(direction === "down" ? 0 : value);
+			}, delay * 1000);
+	}, [motionValue, isInView, delay, value, direction]);
 
-  useEffect(() => {
-    isInView &&
-      setTimeout(() => {
-        motionValue.set(direction === "down" ? value : 0);
-      }, delay * 1000);
-  }, [motionValue, isInView, delay, value, direction]);
+	useEffect(
+		() =>
+			springValue.on("change", (latest) => {
+				if (ref.current) {
+					ref.current.textContent = Intl.NumberFormat("en-US").format(
+						latest.toFixed(0)
+					);
+				}
+			}),
+		[springValue]
+	);
 
-  useEffect(
-    () =>
-      springValue.on("change", (latest) => {
-        if (ref.current) {
-          ref.current.textContent = Intl.NumberFormat("en-US").format(
-            latest.toFixed(0)
-          );
-        }
-      }),
-    [springValue]
-  );
-
-  return (
-    <span
-      className={`inline-block tabular-nums text-black dark:text-white ${className}`}
-      ref={ref}
-    />
-  );
+	return (
+		<span
+			className={cn(
+				"inline-block tabular-nums text-black dark:text-white tracking-wider",
+				className
+			)}
+			ref={ref}
+		/>
+	);
 }