diff --git a/app/about/components/about/about.jsx b/app/about/components/about/about.jsx
new file mode 100644
index 0000000..b83c315
--- /dev/null
+++ b/app/about/components/about/about.jsx
@@ -0,0 +1,152 @@
+import Image from "next/image";
+import Card from "./spotify/card";
+import { motion } from "framer-motion";
+import Me1 from "@/public/img/me1.jpg";
+import Me2 from "@/public/img/me2.jpg";
+import Me3 from "@/public/img/me3.jpg";
+import Hr from "@/components/Hr";
+
+function Title() {
+	return (
+		<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
+			<div className="flex justify-center items-center flex-col my-5 self-start ">
+				<Hr variant="long"></Hr>
+				<h1 className="text-3xl font-bold mt-3">Who Am I?</h1>
+			</div>
+		</div>
+	);
+}
+
+export default function About() {
+	return (
+		<>
+			<Title />
+			<div className="relative mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
+				<div className="flex justify-center items-start flex-col mb-5 ">
+					<div className="images relative w-full  aspect-square">
+						<div className="absolute top-28 left-10 w-[50%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+							<motion.div
+								initial={{ opacity: 0, scale: 0.5, x: 100 }}
+								whileInView={{
+									opacity: 1,
+									scale: 1,
+									x: 0,
+								}}
+								className="w-full h-full">
+								<Image
+									src={Me1}
+									alt="Alvalens"
+									layout="fill"
+									objectFit="cover"
+									placeholder="blur"
+								/>
+							</motion.div>
+						</div>
+						<div className="absolute top-16 right-28 w-[30%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+							<motion.div
+								initial={{
+									opacity: 0,
+									scale: 0.5,
+									x: -100,
+								}}
+								whileInView={{
+									opacity: 1,
+									scale: 1,
+									x: 0,
+								}}
+								transition={{ delay: 0.3 }}
+								className="w-full h-full">
+								<Image
+									src={Me2}
+									alt="Alvalens"
+									layout="fill"
+									objectFit="cover"
+									placeholder="blur"
+								/>
+							</motion.div>
+						</div>
+						<div className="absolute bottom-16 right-20 w-[40%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+							<motion.div
+								initial={{
+									opacity: 0,
+									scale: 0.5,
+									x: -100,
+								}}
+								whileInView={{
+									opacity: 1,
+									scale: 1,
+									x: 0,
+								}}
+								transition={{
+									delay: 0.5,
+								}}
+								className="w-full h-full">
+								<Image
+									src={Me3}
+									alt="Alvalens"
+									layout="fill"
+									objectFit="cover"
+									placeholder="blur"
+								/>
+							</motion.div>
+						</div>
+					</div>
+				</div>
+				<motion.div
+					className="flex justify-center items-start flex-col mb-5 md:px-10"
+					initial={{
+						opacity: 0,
+						x: 200,
+					}}
+					whileInView={{
+						opacity: 1,
+						x: 0,
+					}}
+					transition={{
+						delay: 0.5,
+
+						type: "spring",
+					}}>
+					<h2 className="text-2xl font-bold tracking-wider mb-3">
+						Alvalen Shafelbilyunazra
+					</h2>
+					<p className="text-gray-600 text-justify title text-lg">
+						Hey there, I&rsquo;m Alvalen Shafelbilyunazra, a
+						<span className="text-black font-medium">
+							{" "}
+							tech enthusiast
+						</span>{" "}
+						and
+						<span className="text-black font-medium">
+							{" "}
+							aspiring Web Developer.
+						</span>{" "}
+						Originating from Pasuruan, East Java, Indonesia,
+						I&rsquo;m currently embarking on a fascinating journey
+						at{" "}
+						<span className="text-black font-medium">
+							Universitas Negeri Malang,
+						</span>{" "}
+						where I&rsquo;m pursuing my degree in{" "}
+						<span className="text-black font-medium">
+							Informatics Engineering.
+						</span>{" "}
+						My passion for technology and coding knows no bounds.
+						Beyond the world of coding, I find myself deeply
+						immersed in the realms of design, Game Development, and
+						the fascinating universe of AI. I believe that in
+						today&rsquo;s fast-paced digital landscape, being a
+						<span className="text-black font-medium">
+							{" "}
+							lifelong learner
+						</span>{" "}
+						is not just a choice, but a necessity. Let&rsquo;s
+						connect and explore this ever-evolving world of tech
+						together!
+					</p>
+					<Card />
+				</motion.div>
+			</div>
+		</>
+	);
+}
diff --git a/app/about/components/spotify/animation.jsx b/app/about/components/about/spotify/animation.jsx
similarity index 100%
rename from app/about/components/spotify/animation.jsx
rename to app/about/components/about/spotify/animation.jsx
diff --git a/app/about/components/spotify/card.jsx b/app/about/components/about/spotify/card.jsx
similarity index 100%
rename from app/about/components/spotify/card.jsx
rename to app/about/components/about/spotify/card.jsx
diff --git a/app/about/components/spotify/fetch.js b/app/about/components/about/spotify/fetch.js
similarity index 100%
rename from app/about/components/spotify/fetch.js
rename to app/about/components/about/spotify/fetch.js
diff --git a/app/about/components/education.jsx b/app/about/components/education.jsx
index f61f956..c506c46 100644
--- a/app/about/components/education.jsx
+++ b/app/about/components/education.jsx
@@ -1,192 +1,200 @@
 import Image from "next/image";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMedal } from "@fortawesome/free-solid-svg-icons";
-
+import { motion } from "framer-motion";
 import Me4 from "@/public/img/me4.jpeg";
 
+function Wrapper({ children }) {
+	return (
+		<div className="mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
+			<motion.div
+				className="flex justify-center items-start flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					delay: 0.5,
+
+					type: "spring",
+				}}>
+				{children}
+			</motion.div>
+		</div>
+	);
+}
+
 export default function Education() {
 	return (
-		<section className="grid gap-8 md:gap-12">
-			<div className="text-center space-y-2">
-				<h1 className="text-3xl md:text-4xl font-bold tracking-tighter">
-					Education
-				</h1>
-				<p className="text-muted-foreground max-w-[800px] mx-auto">
-					Get to know more about my educational background.
-				</p>
-			</div>
-			<div className="grid gap-8 md:gap-12">
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<div className="px-5">
-						<div className="font-medium text-lg">
-							2022 - Present
+		<Wrapper>
+			<section className="grid gap-8 md:gap-12">
+				<div className="text-center space-y-2">
+					<h1 className="text-3xl md:text-4xl font-bold tracking-tighter">
+						Education
+					</h1>
+					<p className="text-muted-foreground max-w-[800px] mx-auto">
+						Get to know more about my educational background.
+					</p>
+				</div>
+				<div className="grid gap-8 md:gap-12">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div className="px-5">
+							<div className="font-medium text-lg">
+								2022 - Present
+							</div>
+							<div>
+								<h2 className="font-semibold text-xl">
+									Universitas Negeri Malang
+								</h2>
+								<h3 className="text-md font-normal mb-3">
+									S1 Teknik Informatika | Computer Science
+								</h3>
+								<div className="gap-4 mb-4 flex items-stretch md:h-[300px] xl:h-[400px]">
+									<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
+										<Image
+											src={Me4}
+											width={400}
+											height={225}
+											alt="University"
+											className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
+										/>
+									</div>
+									<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
+										<Image
+											src={Me4}
+											width={400}
+											height={225}
+											alt="University"
+											className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
+										/>
+									</div>
+									<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
+										<Image
+											src={Me4}
+											width={400}
+											height={225}
+											alt="University"
+											className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
+										/>
+									</div>
+								</div>
+								<div className="flex items-center gap-2">
+									<p className="text-justify">
+										Aspiring to be a software engineer, I am
+										currently pursuing a bachelor&rsquo;s
+										degree in computer science at
+										Universitas Negeri Malang. Fascinated by
+										the world of technology, I am eager to
+										learn and explore new things in the
+										field of computer science.
+									</p>
+								</div>
+								{/* add gpa in a style */}
+								<div className="flex flex-wrap gap-2 mt-4 text-sm">
+									<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+										GPA: 3.9 out of 4
+									</div>
+								</div>
+							</div>
 						</div>
-						<div>
-							<h2 className="font-semibold text-xl">
-								Universitas Negeri Malang
+						<div className="flex flex-col justify-start px-5 md:px-0">
+							<h2 className="font-semibold text-xl mt-7">
+								Achievements
 							</h2>
-							<h3 className="text-md font-normal mb-3">
-								S1 Teknik Informatika | Computer Science
-							</h3>
-							<div className="gap-4 mb-4 flex items-stretch md:h-[300px] xl:h-[400px]">
-								<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-									<Image
-										src={Me4}
-										width={400}
-										height={225}
-										alt="University"
-										className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
+							<p className="text-md font-normal mb-3 md:mb-12">
+								Some of my achievements during my study.
+							</p>
+							<div className="flex items-center gap-4 mb-4">
+								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+									<FontAwesomeIcon
+										icon={faMedal}
+										className="text-white h-5 w-5"
 									/>
 								</div>
-								<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-									<Image
-										src={Me4}
-										width={400}
-										height={225}
-										alt="University"
-										className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
+								<div>
+									<h3 className="font-medium">
+										Special Award | Gold Medal | Incubation
+										Opportunity
+									</h3>
+									<p className="text-sm">
+										Indonesia Inventor Day 2024 (IID) | Aug
+										2024
+									</p>
+								</div>
+							</div>
+							<div className="flex items-center gap-4 mb-4">
+								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+									<FontAwesomeIcon
+										icon={faMedal}
+										className="text-white h-5 w-5"
 									/>
 								</div>
-								<div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group">
-									<Image
-										src={Me4}
-										width={400}
-										height={225}
-										alt="University"
-										className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
+								<div>
+									<h3 className="font-medium">
+										3rd place (Bronze Medal)
+									</h3>
+									<p className="text-sm">
+										Student Digital Innovation Competition
+										(LIDM) | Jun 2024
+									</p>
+								</div>
+							</div>
+							<div className="flex items-center gap-4 mb-4">
+								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+									<FontAwesomeIcon
+										icon={faMedal}
+										className="text-white h-5 w-5"
 									/>
 								</div>
-							</div>
-							<div className="flex items-center gap-2">
-								<p className="text-justify">
-									Aspiring to be a software engineer, I am
-									currently pursuing a bachelor&rsquo;s degree
-									in computer science at Universitas Negeri
-									Malang. Fascinated by the world of
-									technology, I am eager to learn and explore
-									new things in the field of computer science.
-								</p>
-							</div>
-							{/* add gpa in a style */}
-							<div className="flex flex-wrap gap-2 mt-4 text-sm">
-								<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
-									GPA: 3.9 out of 4
+								<div>
+									<h3 className="font-medium">
+										3rd place (Bronze Medal)
+									</h3>
+									<p className="text-sm">
+										Fesmaro UI/UX Design | Jun 2024
+									</p>
 								</div>
 							</div>
-						</div>
-					</div>
-					<div className="flex flex-col justify-start px-5 md:px-0">
-						<h2 className="font-semibold text-xl mt-7">
-							Achievements
-						</h2>
-						<p className="text-md font-normal mb-3 md:mb-12">
-							Some of my achievements during my study.
-						</p>
-						<div className="flex items-center gap-4 mb-4">
-							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
-								<FontAwesomeIcon
-									icon={faMedal}
-									className="text-white h-5 w-5"
-								/>
+							<div className="flex items-center gap-4 mb-5">
+								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+									<FontAwesomeIcon
+										icon={faMedal}
+										className="text-white h-5 w-5"
+									/>
+								</div>
+								<div>
+									<h3 className="font-medium">Finalist</h3>
+									<p className="text-sm">
+										36th National Student Science Week
+										(PIMNAS) | Nov 2023
+									</p>
+								</div>
 							</div>
-							<div>
-								<h3 className="font-medium">
-									Special Award | Gold Medal | Incubation
-									Opportunity
-								</h3>
-								<p className="text-sm">
-									Indonesia Inventor Day 2024 (IID) | Aug 2024
-								</p>
-							</div>
-						</div>
-						<div className="flex items-center gap-4 mb-4">
-							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
-								<FontAwesomeIcon
-									icon={faMedal}
-									className="text-white h-5 w-5"
-								/>
-							</div>
-							<div>
-								<h3 className="font-medium">
-									3rd place (Bronze Medal)
-								</h3>
-								<p className="text-sm">
-									Student Digital Innovation Competition
-									(LIDM) | Jun 2024
-								</p>
-							</div>
-						</div>
-						<div className="flex items-center gap-4 mb-4">
-							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
-								<FontAwesomeIcon
-									icon={faMedal}
-									className="text-white h-5 w-5"
-								/>
-							</div>
-							<div>
-								<h3 className="font-medium">
-									3rd place (Bronze Medal)
-								</h3>
-								<p className="text-sm">
-									Fesmaro UI/UX Design | Jun 2024
-								</p>
-							</div>
-						</div>
-						<div className="flex items-center gap-4 mb-5">
-							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
-								<FontAwesomeIcon
-									icon={faMedal}
-									className="text-white h-5 w-5"
-								/>
-							</div>
-							<div>
-								<h3 className="font-medium">Finalist</h3>
-								<p className="text-sm">
-									36th National Student Science Week (PIMNAS)
-									| Nov 2023
-								</p>
-							</div>
-						</div>
-						<div className="flex items-center gap-4 mb-5">
-							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
-								<FontAwesomeIcon
-									icon={faMedal}
-									className="text-white h-5 w-5"
-								/>
-							</div>
-							<div>
-								<h3 className="font-medium">
-									3rd place (Bronze Medal)
-								</h3>
-								<p className="text-sm">
-									FORKAFEST 3.0 Web Development competition |
-									Jan 2023
-								</p>
+							<div className="flex items-center gap-4 mb-5">
+								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+									<FontAwesomeIcon
+										icon={faMedal}
+										className="text-white h-5 w-5"
+									/>
+								</div>
+								<div>
+									<h3 className="font-medium">
+										3rd place (Bronze Medal)
+									</h3>
+									<p className="text-sm">
+										FORKAFEST 3.0 Web Development
+										competition | Jan 2023
+									</p>
+								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-		</section>
-	);
-}
-
-function GraduationCapIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" />
-			<path d="M22 10v6" />
-			<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
-		</svg>
+			</section>
+		</Wrapper>
 	);
 }
diff --git a/app/about/components/experience.jsx b/app/about/components/experience.jsx
index b66bd3f..be50447 100644
--- a/app/about/components/experience.jsx
+++ b/app/about/components/experience.jsx
@@ -1,7 +1,66 @@
+import Hr from "@/components/Hr";
+import { motion } from "framer-motion";
+
+function Title() {
+	return (
+		<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
+			<div className="flex justify-center items-center flex-col my-5 self-start">
+				<Hr variant="long"></Hr>
+				<motion.h1
+					className="text-3xl font-bold mt-3"
+					initial={{
+						opacity: 0,
+						x: -200,
+					}}
+					whileInView={{
+						opacity: 1,
+						x: 0,
+					}}
+					transition={{
+						delay: 0.7,
+
+						type: "spring",
+					}}>
+					Profesional Experience
+				</motion.h1>
+			</div>
+		</div>
+	);
+}
+
+function Wrapper({ children }) {
+	return (
+		<div className="mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
+			<motion.div
+				className="flex justify-center items-start flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					delay: 0.5,
+
+					type: "spring",
+				}}>
+				<section className="grid gap-8 md:gap-12">
+					<div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8">
+						{children}
+					</div>
+				</section>
+			</motion.div>
+		</div>
+	);
+}
+
 export default function Experience() {
 	return (
-		<section className="grid gap-8 md:gap-12">
-			<div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8">
+		<>
+			<Title/>
+			<Wrapper>
 				<div className="grid gap-4 relative">
 					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
 					<div className="font-medium text-lg">2023 - Present</div>
@@ -99,7 +158,7 @@ export default function Experience() {
 						</div>
 					</div>
 				</div>
-			</div>
-		</section>
+			</Wrapper>
+		</>
 	);
 }
diff --git a/app/about/components/quote/quote.jsx b/app/about/components/quote/quote.jsx
index 8b53c35..4d86610 100644
--- a/app/about/components/quote/quote.jsx
+++ b/app/about/components/quote/quote.jsx
@@ -3,6 +3,30 @@ import "./style.css";
 import { motion } from "framer-motion";
 import { useIntersectionObserver } from "./useIntersectionObserver";
 
+function Wrapper({ children }) {
+	return (
+		<div className="min-h-[80vh] mx-auto container  p-10 grid grid-cols-1 mt-10 ">
+			<motion.div
+				className="flex justify-center items-center flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					scale: 0.9,
+				}}
+				whileInView={{
+					opacity: 1,
+					scale: 1,
+				}}
+				transition={{
+					delay: 0.6,
+					duration: 2,
+					ease: [0.22, 1, 0.36, 1],
+				}}>
+				{children}
+			</motion.div>
+		</div>
+	);
+}
+
 export default function Quote() {
 	const text1 = '"There are no limits to what you can accomplish'.split(" ");
 	const text2 = 'except the limits you place on your own thinking."'.split(
@@ -11,53 +35,59 @@ export default function Quote() {
 	const [ref, isIntersecting] = useIntersectionObserver();
 
 	return (
-		<div ref={ref} className="text-center">
-			<h3 className="text-[2rem]">
-				{text1.map((word, index) => (
-					<motion.span
-						key={index}
-						initial={{
-							opacity: 0,
-							filter: "blur(4px)",
-							scale: 0.92,
-						}}
-						animate={{
-							opacity: isIntersecting ? 1 : 0,
-							filter: isIntersecting ? "blur(0px)" : "blur(4px)",
-							scale: isIntersecting ? 1 : 0.92,
-						}}
-						transition={{
-							delay: isIntersecting ? index * 0.1 : 0,
-							duration: 0.5,
-						}}>
-						{word}{" "}
-					</motion.span>
-				))}
-			</h3>
-			<h3 className="text-xl">
-				{text2.map((word, index) => (
-					<motion.span
-						key={index + text1.length} 
-						initial={{
-							opacity: 0,
-							filter: "blur(4px)",
-							scale: 0.92,
-						}}
-						animate={{
-							opacity: isIntersecting ? 1 : 0,
-							filter: isIntersecting ? "blur(0px)" : "blur(4px)",
-							scale: isIntersecting ? 1 : 0.92,
-						}}
-						transition={{
-							delay: isIntersecting
-								? (text1.length + index) * 0.1
-								: 0,
-							duration: 0.5,
-						}}>
-						{word}{" "}
-					</motion.span>
-				))}
-			</h3>
-		</div>
+		<Wrapper>
+			<div ref={ref} className="text-center">
+				<h3 className="text-[2rem]">
+					{text1.map((word, index) => (
+						<motion.span
+							key={index}
+							initial={{
+								opacity: 0,
+								filter: "blur(4px)",
+								scale: 0.92,
+							}}
+							animate={{
+								opacity: isIntersecting ? 1 : 0,
+								filter: isIntersecting
+									? "blur(0px)"
+									: "blur(4px)",
+								scale: isIntersecting ? 1 : 0.92,
+							}}
+							transition={{
+								delay: isIntersecting ? index * 0.1 : 0,
+								duration: 0.5,
+							}}>
+							{word}{" "}
+						</motion.span>
+					))}
+				</h3>
+				<h3 className="text-xl">
+					{text2.map((word, index) => (
+						<motion.span
+							key={index + text1.length}
+							initial={{
+								opacity: 0,
+								filter: "blur(4px)",
+								scale: 0.92,
+							}}
+							animate={{
+								opacity: isIntersecting ? 1 : 0,
+								filter: isIntersecting
+									? "blur(0px)"
+									: "blur(4px)",
+								scale: isIntersecting ? 1 : 0.92,
+							}}
+							transition={{
+								delay: isIntersecting
+									? (text1.length + index) * 0.1
+									: 0,
+								duration: 0.5,
+							}}>
+							{word}{" "}
+						</motion.span>
+					))}
+				</h3>
+			</div>
+		</Wrapper>
 	);
 }
diff --git a/app/about/components/skills/skills.jsx b/app/about/components/skills/skills.jsx
index ef4a44d..cd1dea2 100644
--- a/app/about/components/skills/skills.jsx
+++ b/app/about/components/skills/skills.jsx
@@ -1,33 +1,64 @@
+import { motion } from "framer-motion";
+import Stack from "./stack";
+import Tools from "./tools";
+
+function Wrapper({ children }) {
+	return (
+		<div className="mx-auto container gap-4 p-10 grid grid-cols-1 mt-10">
+			<motion.div
+				className="flex justify-center items-center flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					delay: 0.5,
+					type: "spring",
+				}}>
+				{children}
+			</motion.div>
+		</div>
+	);
+}
+
 export default function Skills() {
 	return (
-		<section className="grid gap-8 md:gap-12">
-			<div className="text-center space-y-2">
-				<h2 className="text-3xl font-bold mt-3 text-black">
-					Skills and Expertise
-				</h2>
-				<p className="text-muted-foreground max-w-[800px] mx-auto">
-					Explore some skills I&apos;m proficient in to deliver high-quality
-					solutions.
-				</p>
-			</div>
-			<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8">
-				<div className="flex flex-col items-center gap-2">
-					<CodepenIcon className="w-12 h-12" />
-					<div className="font-medium">Web Development</div>
-				</div>
-				<div className="flex flex-col items-center gap-2">
-					<WebhookIcon className="w-12 h-12" />
-					<div className="font-medium">REST API</div>
-				</div>
-				<div className="flex flex-col items-center gap-2">
-					<ActivityIcon className="w-12 h-12" />
-					<div className="font-medium">Machine Learning</div>
-				</div>
-				<div className="flex flex-col items-center gap-2">
-					<MobileIcon className="w-12 h-12" />
-					<div className="font-medium">Mobile Development</div>
-				</div>
-				{/* <div className="flex flex-col items-center gap-2">
+		<>
+			<Wrapper>
+				<section className="grid gap-8 md:gap-12">
+					<div className="text-center space-y-2">
+						<h2 className="text-3xl font-bold mt-3 text-black">
+							Skills and Expertise
+						</h2>
+						<p className="text-muted-foreground max-w-[800px] mx-auto">
+							Explore some skills I&apos;m proficient in to
+							deliver high-quality solutions.
+						</p>
+					</div>
+					<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8">
+						<div className="flex flex-col items-center gap-2">
+							<CodepenIcon className="w-12 h-12" />
+							<div className="font-medium">Web Development</div>
+						</div>
+						<div className="flex flex-col items-center gap-2">
+							<WebhookIcon className="w-12 h-12" />
+							<div className="font-medium">REST API</div>
+						</div>
+						<div className="flex flex-col items-center gap-2">
+							<ActivityIcon className="w-12 h-12" />
+							<div className="font-medium">Machine Learning</div>
+						</div>
+						<div className="flex flex-col items-center gap-2">
+							<MobileIcon className="w-12 h-12" />
+							<div className="font-medium">
+								Mobile Development
+							</div>
+						</div>
+						{/* <div className="flex flex-col items-center gap-2">
 					<CloudIcon className="w-12 h-12" />
 					<div className="font-medium">Cloud Computing</div>
 				</div>
@@ -43,8 +74,14 @@ export default function Skills() {
 					<PackageIcon className="w-12 h-12" />
 					<div className="font-medium">Product Management</div>
 				</div> */}
+					</div>
+				</section>
+			</Wrapper>
+			<div className=" mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24">
+				<Stack />
+				<Tools />
 			</div>
-		</section>
+		</>
 	);
 }
 
@@ -87,130 +124,6 @@ function CodepenIcon(props) {
 	);
 }
 
-
-function BarChartIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<line x1="12" x2="12" y1="20" y2="10" />
-			<line x1="18" x2="18" y1="20" y2="4" />
-			<line x1="6" x2="6" y1="20" y2="16" />
-		</svg>
-	);
-}
-
-function CloudIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
-		</svg>
-	);
-}
-
-function ComputerIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<rect width="14" height="8" x="5" y="2" rx="2" />
-			<rect width="20" height="8" x="2" y="14" rx="2" />
-			<path d="M6 18h2" />
-			<path d="M12 18h6" />
-		</svg>
-	);
-}
-
-function PackageIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="m7.5 4.27 9 5.15" />
-			<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
-			<path d="m3.3 7 8.7 5 8.7-5" />
-			<path d="M12 22V12" />
-		</svg>
-	);
-}
-
-function ProjectorIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M5 7 3 5" />
-			<path d="M9 6V3" />
-			<path d="m13 7 2-2" />
-			<circle cx="9" cy="13" r="3" />
-			<path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17" />
-			<path d="M16 16h2" />
-		</svg>
-	);
-}
-
-function TypeIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<polyline points="4 7 4 4 20 4 20 7" />
-			<line x1="9" x2="15" y1="20" y2="20" />
-			<line x1="12" x2="12" y1="4" y2="20" />
-		</svg>
-	);
-}
-
 function WebhookIcon(props) {
 	return (
 		<svg
diff --git a/app/about/components/skills/stack.jsx b/app/about/components/skills/stack.jsx
index 216a7b8..fb9232c 100644
--- a/app/about/components/skills/stack.jsx
+++ b/app/about/components/skills/stack.jsx
@@ -1,6 +1,22 @@
+import { motion } from "framer-motion";
+
 export default function Stack() {
   return (
-		<>
+		<motion.div
+			className="flex justify-center items-center flex-col mb-5 "
+			initial={{
+				opacity: 0,
+				x: -200,
+			}}
+			whileInView={{
+				opacity: 1,
+				x: 0,
+			}}
+			transition={{
+				delay: 0.5,
+
+				type: "spring",
+			}}>
 			<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase ">
 				Language & Framework
 			</h2>
@@ -23,6 +39,6 @@ export default function Stack() {
 				<span className="text-black font-bold">Laravel</span> |{" "}
 				<span className="text-black font-medium">Python</span>
 			</p>
-		</>
+		</motion.div>
   );
 }
\ No newline at end of file
diff --git a/app/about/components/skills/tools.jsx b/app/about/components/skills/tools.jsx
index 6b6d10a..16121e6 100644
--- a/app/about/components/skills/tools.jsx
+++ b/app/about/components/skills/tools.jsx
@@ -1,6 +1,22 @@
+import { motion } from "framer-motion";
+
 export default function Tools() {
 	return (
-		<>
+		<motion.div
+			className="flex justify-start items-center flex-col mb-5 "
+			initial={{
+				opacity: 0,
+				x: 200,
+			}}
+			whileInView={{
+				opacity: 1,
+				x: 0,
+			}}
+			transition={{
+				delay: 0.6,
+
+				type: "spring",
+			}}>
 			<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase">
 				Tools
 			</h2>
@@ -21,6 +37,6 @@ export default function Tools() {
 				</span>{" "}
 				|{" "}
 			</p>
-		</>
+		</motion.div>
 	);
 }
diff --git a/app/about/page.jsx b/app/about/page.jsx
index de726f6..24ab8f2 100644
--- a/app/about/page.jsx
+++ b/app/about/page.jsx
@@ -3,23 +3,20 @@ import { useEffect } from "react";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
 import Image from "next/legacy/image";
-import FixedButon from "@/components/FixedButton";
+import FixedButton from "@/components/FixedButton";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import Card from "./components/spotify/card.jsx";
 import Quote from "./components/quote/quote.jsx";
 import Skills from "./components/skills/skills.jsx";
-import Tools from "./components/skills/tools.jsx";
-import Stack from "./components/skills/stack.jsx";
 import Experience from "./components/experience.jsx";
 import Education from "./components/education.jsx";
 
 // images
-import Me1 from "@/public/img/me1.jpg";
-import Me2 from "@/public/img/me2.jpg";
-import Me3 from "@/public/img/me3.jpg";
+import Hero from "@/public/img/me2.jpg";
+
 import Hr from "@/components/Hr";
+import About from "./components/about/about.jsx";
 
 export default function Page() {
 	useEffect(() => {
@@ -29,13 +26,14 @@ export default function Page() {
 	return (
 		<>
 			<main className="overflow-hidden">
-				<FixedButon href="/#about">
+				<FixedButton href="/#about">
 					<FontAwesomeIcon
 						icon={faChevronLeft}
 						className="text-black pr-10"
 					/>
-				</FixedButon>
-				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden">
+				</FixedButton>
+				<div className="relative h-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden">
+					{/* hero */}
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div
 							initial={{ scale: 1 }}
@@ -43,8 +41,8 @@ export default function Page() {
 							transition={{ ease: "circOut", duration: 1 }}
 							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
 							<Image
-								src={Me2}
-								alt="Alvalens"
+								src={Hero}
+								alt="Alvalen Shafel"
 								layout="fill"
 								objectFit="cover"
 								placeholder="blur"
@@ -52,7 +50,7 @@ export default function Page() {
 						</motion.div>
 					</div>
 					<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 pt-4 backdrop-filter backdrop-blur-sm md:backdrop-blur-none bg-gray-100 bg-opacity-50 md:bg-transparent md:pt-0">
-						<h1 className="md:bg-white bg-transparent lg:bg-transparent bg-opacity-50 md-px-0 text-black text-5xl md:text-8xl font-bold">
+						<h1 className="md:bg-white bg-transparent lg:bg-transparent bg-opacity-50 md:px-0 text-black text-5xl md:text-8xl font-bold">
 							About Me
 						</h1>
 						<Hr />
@@ -78,312 +76,28 @@ export default function Page() {
 						</motion.div>
 					</div>
 				</div>
-				<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
-					<div className="flex justify-center items-center flex-col my-5 self-start ">
-						<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
-						<div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div>
-						<h1 className="text-3xl font-bold mt-3">Who Am I?</h1>
-					</div>
-				</div>
-				<div className="relative w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
-					<div className="flex justify-center items-start flex-col mb-5 ">
-						<div className="images relative w-full  aspect-square">
-							<div className="absolute top-28 left-10 w-[50%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
-								<motion.div
-									initial={{ opacity: 0, scale: 0.5, x: 100 }}
-									whileInView={{
-										opacity: 1,
-										scale: 1,
-										x: 0,
-									}}
-									className="w-full h-full">
-									<Image
-										src={Me1}
-										alt="Alvalens"
-										layout="fill"
-										objectFit="cover"
-										placeholder="blur"
-									/>
-								</motion.div>
-							</div>
-							<div className="absolute top-16 right-28 w-[30%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
-								<motion.div
-									initial={{
-										opacity: 0,
-										scale: 0.5,
-										x: -100,
-									}}
-									whileInView={{
-										opacity: 1,
-										scale: 1,
-										x: 0,
-									}}
-									transition={{ delay: 0.3 }}
-									className="w-full h-full">
-									<Image
-										src={Me2}
-										alt="Alvalens"
-										layout="fill"
-										objectFit="cover"
-										placeholder="blur"
-									/>
-								</motion.div>
-							</div>
-							<div className="absolute bottom-16 right-20 w-[40%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
-								<motion.div
-									initial={{
-										opacity: 0,
-										scale: 0.5,
-										x: -100,
-									}}
-									whileInView={{
-										opacity: 1,
-										scale: 1,
-										x: 0,
-									}}
-									transition={{
-										delay: 0.5,
-									}}
-									className="w-full h-full">
-									<Image
-										src={Me3}
-										alt="Alvalens"
-										layout="fill"
-										objectFit="cover"
-										placeholder="blur"
-									/>
-								</motion.div>
-							</div>
-						</div>
-					</div>
-					<motion.div
-						className="flex justify-center items-start flex-col mb-5 md:px-10"
-						initial={{
-							opacity: 0,
-							x: 200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
+				{/* end hero */}
 
-							type: "spring",
-						}}>
-						<h2 className="text-2xl font-bold tracking-wider mb-3">
-							Alvalen Shafelbilyunazra
-						</h2>
-						<p className="text-gray-600 text-justify title text-lg">
-							Hey there, I&rsquo;m Alvalen Shafelbilyunazra, a
-							<span className="text-black font-medium">
-								{" "}
-								tech enthusiast
-							</span>{" "}
-							and
-							<span className="text-black font-medium">
-								{" "}
-								aspiring Web Developer.
-							</span>{" "}
-							Originating from Pasuruan, East Java, Indonesia,
-							I&rsquo;m currently embarking on a fascinating
-							journey at{" "}
-							<span className="text-black font-medium">
-								Universitas Negeri Malang,
-							</span>{" "}
-							where I&rsquo;m pursuing my degree in{" "}
-							<span className="text-black font-medium">
-								Informatics Engineering.
-							</span>{" "}
-							My passion for technology and coding knows no
-							bounds. Beyond the world of coding, I find myself
-							deeply immersed in the realms of design, Game
-							Development, and the fascinating universe of AI. I
-							believe that in today&rsquo;s fast-paced digital
-							landscape, being a
-							<span className="text-black font-medium">
-								{" "}
-								lifelong learner
-							</span>{" "}
-							is not just a choice, but a necessity. Let&rsquo;s
-							connect and explore this ever-evolving world of tech
-							together!
-						</p>
-						<Card />
-					</motion.div>
-				</div>
+				{/* about */}
+				<About />
+				{/* end about */}
 
 				{/* skills */}
-				<div className=" w-screen mx-auto container gap-4 p-10 grid grid-cols-1 mt-10">
-					<motion.div
-						className="flex justify-center items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
-
-							type: "spring",
-						}}>
-						<Skills />
-					</motion.div>
-				</div>
-
-				<div className=" w-screen mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24">
-					<motion.div
-						className="flex justify-center items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
-
-							type: "spring",
-						}}>
-						<Stack />
-					</motion.div>
-					<motion.div
-						className="flex justify-start items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: 200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.6,
-
-							type: "spring",
-						}}>
-						<Tools />
-					</motion.div>
-				</div>
+				<Skills />
+				{/* end skills */}
 
 				{/* experience */}
-				<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
-					<div className="flex justify-center items-center flex-col my-5 self-start ">
-						<motion.div
-							className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
-							initial={{
-								opacity: 0,
-								x: -100,
-							}}
-							whileInView={{
-								opacity: 1,
-								x: 0,
-							}}
-							transition={{
-								delay: 0.5,
-
-								type: "spring",
-							}}></motion.div>
-						<motion.div
-							className="bg-gray-700 w-28 h-1 rounded-full"
-							initial={{
-								opacity: 0,
-								x: 200,
-							}}
-							whileInView={{
-								opacity: 1,
-								x: -50,
-							}}
-							transition={{
-								delay: 0.5,
-
-								type: "spring",
-							}}></motion.div>
-						<motion.h1
-							className="text-3xl font-bold mt-3"
-							initial={{
-								opacity: 0,
-								x: -200,
-							}}
-							whileInView={{
-								opacity: 1,
-								x: 0,
-							}}
-							transition={{
-								delay: 0.7,
-
-								type: "spring",
-							}}>
-							Profesional Experience
-						</motion.h1>
-					</div>
-				</div>
-
-				<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
-					<motion.div
-						className="flex justify-center items-start flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
-
-							type: "spring",
-						}}>
-						<Experience />
-					</motion.div>
-				</div>
+				<Experience />
+				{/* end experience */}
 
 				{/* Education */}
-				<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
-					<motion.div
-						className="flex justify-center items-start flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
+				<Education />
+				{/* end Education */}
 
-							type: "spring",
-						}}>
-						<Education />
-					</motion.div>
-				</div>
+				{/* Quote */}
+				<Quote />
+				{/* end Quote */}
 
-				<div className="min-h-[80vh] w-screen mx-auto container  p-10 grid grid-cols-1 mt-10 ">
-					<motion.div
-						className="flex justify-center items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							scale: 0.9,
-						}}
-						whileInView={{
-							opacity: 1,
-							scale: 1,
-						}}
-						transition={{
-							delay: 0.6,
-							duration: 2,
-							ease: [0.22, 1, 0.36, 1],
-						}}>
-						<Quote />
-					</motion.div>
-				</div>
 			</main>
 		</>
 	);
diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index 83b16f7..f51c2c0 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -84,8 +84,7 @@ export default function Page() {
 				</div>
 				<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
 					<div className="flex justify-center items-center flex-col my-5 self-start ">
-						<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
-						<div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div>
+						<Hr variant="long"></Hr>
 						<h1 className="text-3xl font-bold mt-3">Hightlight</h1>
 					</div>
 				</div>
@@ -207,7 +206,7 @@ export default function Page() {
 				</div>
 				<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
 					<div className="flex justify-start items-start flex-col my-5 self-start ">
-						<Hr />
+						<Hr variant="long"></Hr>
 						<motion.h1
 							className="text-3xl font-bold mt-3"
 							initial={{
diff --git a/components/Hr.jsx b/components/Hr.jsx
index f0d301a..d257215 100644
--- a/components/Hr.jsx
+++ b/components/Hr.jsx
@@ -1,38 +1,79 @@
 import { motion } from "framer-motion";
-
-export default function Hr() {
+import PropTypes from "prop-types";
+export default function Hr({ variant }) {
 	return (
-		<div className="flex justify-center items-center flex-col my-5 ">
-			<motion.div
-				className="bg-gray-700 w-20 h-1 rounded-full mb-2"
-				initial={{
-					opacity: 0,
-					x: -45,
-				}}
-				whileInView={{
-					opacity: 1,
-					x: 0,
-				}}
-				transition={{
-					delay: 0.2,
-
-					type: "spring",
-				}}></motion.div>
-			<motion.div
-				className="bg-gray-700 w-20 h-1 rounded-full "
-				initial={{
-					opacity: 0,
-					x: 150,
-				}}
-				whileInView={{
-					opacity: 1,
-					x: 40,
-				}}
-				transition={{
-					delay: 0.3,
-
-					type: "spring",
-				}}></motion.div>
-		</div>
+		<>
+			{variant === "long" ? (
+				<>
+					<motion.div
+						className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
+						initial={{
+							opacity: 0,
+							x: -100,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 0,
+						}}
+						transition={{
+							delay: 0.3,
+							type: "spring",
+						}}></motion.div>
+					<motion.div
+						className="bg-gray-700 w-28 h-1 rounded-full"
+						initial={{
+							opacity: 0,
+							x: 200,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: -50,
+						}}
+						transition={{
+							delay: 0.4,
+							type: "spring",
+						}}></motion.div>
+				</>
+			) : (
+				<div className="flex justify-center items-center flex-col my-5">
+					<motion.div
+						className="bg-gray-700 w-20 h-1 rounded-full mb-2"
+						initial={{
+							opacity: 0,
+							x: -45,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 0,
+						}}
+						transition={{
+							delay: 0.2,
+							type: "spring",
+						}}></motion.div>
+					<motion.div
+						className="bg-gray-700 w-20 h-1 rounded-full"
+						initial={{
+							opacity: 0,
+							x: 150,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 40,
+						}}
+						transition={{
+							delay: 0.3,
+							type: "spring",
+						}}></motion.div>
+				</div>
+			)}
+		</>
 	);
 }
+
+Hr.propTypes = {
+	variant: PropTypes.oneOf(["short", "long"]),
+};
+
+Hr.defaultProps = {
+	variant: "short",
+};