feat: Improve code formatting and import order

Rearranged import orders for better visibility and readability. Also, cleaned up some of the typescript and JSX by adding appropriate line breaks and spaces, and ensuring the use of semicolons for better punctuation.

src/components/ui/hero-parallax.tsx

@@ -1,18 +1,18 @@
 "use client";
-import React from "react";
 import {
+	type MotionValue,
 	motion,
 	useScroll,
-	useTransform,
 	useSpring,
-	MotionValue,
+	useTransform,
 } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
+import React from "react";
 
 interface HeroParallaxProps {
 	products: product[];
-	children?: React.ReactNode
+	children?: React.ReactNode;
 }
 
 interface product {
@@ -21,7 +21,7 @@ interface product {
 	thumbnail: string;
 }
 
-export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
+export const HeroParallax = ({ products, children }: HeroParallaxProps) => {
 	const firstRow = products.slice(0, 5);
 	const secondRow = products.slice(5, 10);
 	const thirdRow = products.slice(10, 15);
@@ -35,27 +35,27 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 
 	const translateX = useSpring(
 		useTransform(scrollYProgress, [0, 1], [0, 1000]),
-		springConfig
+		springConfig,
 	);
 	const translateXReverse = useSpring(
 		useTransform(scrollYProgress, [0, 1], [0, -1000]),
-		springConfig
+		springConfig,
 	);
 	const rotateX = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [15, 0]),
-		springConfig
+		springConfig,
 	);
 	const opacity = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [0.2, 1]),
-		springConfig
+		springConfig,
 	);
 	const rotateZ = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [20, 0]),
-		springConfig
+		springConfig,
 	);
 	const translateY = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [-700, 500]),
-		springConfig
+		springConfig,
 	);
 	return (
 		<div
@@ -74,11 +74,7 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 			>
 				<motion.div className="flex flex-row-reverse space-x-reverse space-x-20 mb-20">
 					{firstRow.map((product) => (
-						<ProductCard
-							product={product}
-							translate={translateX}
-							key={product.title}
-						/>
+						<ProductCard product={product} translate={translateX} key={product.title} />
 					))}
 				</motion.div>
 				<motion.div className="flex flex-row  mb-20 space-x-20 ">
@@ -92,11 +88,7 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 				</motion.div>
 				<motion.div className="flex flex-row-reverse space-x-reverse space-x-20">
 					{thirdRow.map((product) => (
-						<ProductCard
-							product={product}
-							translate={translateX}
-							key={product.title}
-						/>
+						<ProductCard product={product} translate={translateX} key={product.title} />
 					))}
 				</motion.div>
 			</motion.div>
@@ -105,9 +97,9 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 };
 
 export const ProductCard = ({
-															product,
-															translate,
-														}: {
+	product,
+	translate,
+}: {
 	product: {
 		title: string;
 		link: string;
@@ -126,10 +118,7 @@ export const ProductCard = ({
 			key={product.title}
 			className="group/product h-96 w-[30rem] relative flex-shrink-0"
 		>
-			<Link
-				href={product.link}
-				className="block group-hover/product:shadow-2xl "
-			>
+			<Link href={product.link} className="block group-hover/product:shadow-2xl ">
 				<Image
 					src={product.thumbnail}
 					height="600"