style: Back to Home

fezcode · fezcode · commit c7a7330ab5c0 · 2025-11-26T21:32:51.000+03:00
diff --git a/src/pages/AboutPage.js b/src/pages/AboutPage.js
@@ -120,11 +120,8 @@ const AboutPage = () => {
   return (
     <div className="py-8 sm:py-16">
       <div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
-        <Link
-          to="/"
-          className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
-        >
-          <ArrowLeftIcon className="text-xl" /> Back to Home
+        <Link to="/" className="group text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4" >
+          <ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1" /> Back to Home
         </Link>
         <div className="border border-gray-700 p-8 rounded-lg shadow-xl flex">
           <div className="w-1 bg-gray-600 mr-1 hidden sm:block"></div>
diff --git a/src/pages/CommandsPage.js b/src/pages/CommandsPage.js
@@ -36,8 +36,8 @@ function CommandsPage() {
   return (
     <div className="py-16 sm:py-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <Link to="/" className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4">
-          <ArrowLeftIcon size={24} /> Back to Home
+        <Link to="/" className="group text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4" >
+          <ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1" /> Back to Home
         </Link>
         <div className="mx-auto max-w-2xl text-center">
           <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl flex items-center justify-center">
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { ArrowLeft } from '@phosphor-icons/react';
+import {ArrowLeft, ArrowLeftIcon} from '@phosphor-icons/react';
 import { useAnimation } from '../context/AnimationContext';
 import colors from '../config/colors';
 import CustomToggle from '../components/CustomToggle';
@@ -72,11 +72,8 @@ const SettingsPage = () => {
   return (
     <div className="py-16 sm:py-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <Link
-          to="/"
-          className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
-        >
-          <ArrowLeft size={24} /> Back to Home
+        <Link to="/" className="group text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4" >
+          <ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1" /> Back to Home
         </Link>
         <div className="mx-auto max-w-2xl text-center">
           <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
