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,5 +1,5 @@
 import { stats } from "@/constants";
-import NumTicker from "../widgets/num-tick";
+import NumberTicker from "../widgets/num-tick";
 
 const Statistics = () => {
 	return (
@@ -8,8 +8,7 @@ const Statistics = () => {
 				{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} /> */}
+							<NumberTicker value={count} />
 						</h2>
 						<p className="text-xl text-muted-foreground">{title}</p>
 					</div>

components/widgets/num-tick.tsx

@@ -1,9 +1,11 @@
 "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({
+import { cn } from "@/lib/utils";
+
+export default function NumberTicker({
 	value,
 	direction = "up",
 	delay = 0,
@@ -12,7 +14,7 @@ export default function NumTicker({
 	value: number;
 	direction?: "up" | "down";
 	className?: string;
-  delay?: number;
+	delay?: number; // delay in s
 }) {
 	const ref = useRef<HTMLSpanElement>(null);
 	const motionValue = useMotionValue(direction === "down" ? value : 0);
@@ -20,13 +22,12 @@ export default function NumTicker({
 		damping: 60,
 		stiffness: 100,
 	});
-
 	const isInView = useInView(ref, { once: true, margin: "0px" });
 
 	useEffect(() => {
 		isInView &&
 			setTimeout(() => {
-        motionValue.set(direction === "down" ? value : 0);
+				motionValue.set(direction === "down" ? 0 : value);
 			}, delay * 1000);
 	}, [motionValue, isInView, delay, value, direction]);
 
@@ -44,7 +45,10 @@ export default function NumTicker({
 
 	return (
 		<span
-      className={`inline-block tabular-nums text-black dark:text-white ${className}`}
+			className={cn(
+				"inline-block tabular-nums text-black dark:text-white tracking-wider",
+				className
+			)}
 			ref={ref}
 		/>
 	);