Refactor About, Footer, Projects, and Company components

JuanPabloDiaz · Jan 3, 2024 · 2f7588f · 2f7588f
1 parent b239ee1
commit 2f7588f
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 76 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -2,14 +2,14 @@ import aboutImg from "../assets/img/2-aboutUs582.png";
 
 const About = () => {
   return (
-    <section name="about" className="pt-24 pb-6 md:pt-32 sm:pb-6">
-      <div className="max-w-screen-xl mx-auto px-4 text-gray-600 gap-16 justify-between md:px-8 lg:flex">
+    <section name="about" className="pb-6 pt-24 sm:pb-6 md:pt-32">
+      <div className="mx-auto max-w-screen-xl justify-between gap-16 px-4 text-gray-600 md:px-8 lg:flex">
         <div>
-          <div className="max-w-6xl md:max-w-8xl space-y-3">
-            <h3 className="text-[#132577] font-semibold text-xl">
+          <div className="md:max-w-8xl max-w-6xl space-y-3">
+            <h3 className="text-xl font-semibold text-[#132577]">
               FEW WORDS ABOUT US
             </h3>
-            <p className="text-gray-800 text-3xl font-bold sm:text-2xl">
+            <p className="text-3xl font-bold text-gray-800 sm:text-2xl">
               We Are Leaders in It Solutions
             </p>
             <p className="text-justify">
@@ -23,7 +23,7 @@ const About = () => {
             </p>
           </div>
           <div className="mt-6 max-w-lg md:max-w-4xl lg:max-w-none">
-            <ul className="text-black font-semibold list-disc list-inside grid gap-4 grid-cols-2 grid-rows-2 md:grid-cols-4">
+            <ul className="grid list-inside list-disc grid-cols-2 grid-rows-2 gap-4 font-semibold text-black md:grid-cols-4">
               <li className="hover:list-decimal">Vision and Commitment</li>
               <li className="hover:list-decimal">Expertise and Innovation</li>
               <li className="hover:list-decimal">Customer-Centric Approach</li>
@@ -35,7 +35,7 @@ const About = () => {
           <img
             src={aboutImg}
             alt="about us"
-            className="max-w-xl w-[400px] lg:w-[600px] hidden md:flex"
+            className="hidden w-[400px] max-w-xl md:flex lg:w-[600px]"
           />
         </div>
       </div>

diff --git a/src/components/Company.jsx b/src/components/Company.jsx
@@ -31,20 +31,20 @@ const OpenCards = () => {
     "Our customers are ambitious businesses and entrepreneurs, and we're here to empower their success with innovative software solutions.",
   ];
   return (
-    <section name="company" className="pt-24 pb-6 md:pt-32 sm:pb-6">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <section name="company" className="pb-6 pt-24 sm:pb-6 md:pt-32">
+      <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
         <h2 className="text-4xl tracking-tight text-[#132577] sm:text-2xl">
           WE LOVE OUR WORK
         </h2>
-        <p className="mt-2 text-3xl font-bold leading-8 text-black-600">
+        <p className="text-black-600 mt-2 text-3xl font-bold leading-8">
           FIND OUT MORE
         </p>
       </div>
-      <div className="mt-12 flex flex-col md:flex-row justify-center items-center gap-5">
+      <div className="mt-12 flex flex-col items-center justify-center gap-5 md:flex-row">
         {[0, 1, 2, 3].map((index) => (
           <motion.div
             key={index}
-            className={`card cursor-pointer h-[300px] md:h-[500px] bg-cover bg-center rounded-[20px] ${
+            className={`card h-[300px] cursor-pointer rounded-[20px] bg-cover bg-center md:h-[500px] ${
               index === expandedIndex ? "expanded" : ""
             }`}
             variants={cardVariants}
@@ -56,13 +56,13 @@ const OpenCards = () => {
               backgroundImage: `url(${cardImages[index]})`,
             }}
           >
-            <div className="card-content h-full flex flex-col justify-end">
-              <div className="card-footer rounded-b-[20px] bg-[#132577] bg-opacity-75 min-h-[100px] flex flex-col items-center justify-center">
+            <div className="card-content flex h-full flex-col justify-end">
+              <div className="card-footer flex min-h-[100px] flex-col items-center justify-center rounded-b-[20px] bg-[#132577] bg-opacity-75">
                 <h2 className="text-xl font-bold text-white">
                   {cardTitle[index]}
                 </h2>
                 {index === expandedIndex && (
-                  <p className="text-white text-center">
+                  <p className="text-center text-white">
                     {cardDescriptions[index]}
                   </p>
                 )}

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -62,27 +62,27 @@ const Footer = () => {
   return (
     <footer
       name="footer"
-      className="text-white bg-[#132577] px-4 py-5 max-w-full mx-auto md:px-12 lg:px-20"
+      className="mx-auto max-w-full bg-[#132577] px-4 py-5 text-white md:px-12 lg:px-20"
     >
-      <div className="gap-6 md:flex justify-between">
+      <div className="justify-between gap-6 md:flex">
         <div className="flex-none md:flex-1">
           <div className="md:max-w-xs">
-            <p className="mt-2 text-md md:text-lg md:pt-20">
+            <p className="text-md mt-2 md:pt-20 md:text-lg">
               Digital experience is always embedded in a physical experience.
             </p>
           </div>
         </div>
-        <div className="flex md:flex-1 justify-between">
+        <div className="flex justify-between md:flex-1">
           {footerNavs.map((item, idx) => (
-            <ul className="md:space-y-4 space-y-2" key={idx}>
-              <h4 className="text-[#92989F] font-bold text-lg md:text-xl">
+            <ul className="space-y-2 md:space-y-4" key={idx}>
+              <h4 className="text-lg font-bold text-[#92989F] md:text-xl">
                 {item.label}
               </h4>
               {item.items.map((footerElement, idx) => (
                 <li key={idx}>
                   <a
                     href={footerElement.href}
-                    className="hover:underline hover:text-[#ffc107]"
+                    className="hover:text-[#ffc107] hover:underline"
                   >
                     {footerElement.name}
                   </a>
@@ -92,7 +92,7 @@ const Footer = () => {
           ))}
         </div>
       </div>
-      <div className="mt-4 py-2 flex justify-between items-center text-gray-500 text-xs">
+      <div className="mt-4 flex items-center justify-between py-2 text-xs text-gray-500">
         <div className="mt-4 sm:mt-0">
           &copy; Design with love © Juan Diaz 2023. All right reserved
         </div>

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -40,9 +40,9 @@ export default function Hero() {
       <header
         className={classNamesNavBarScroll(
           scrollPosition > 0
-            ? "md:shadow md:bg-[#132577] md:-translate-y-6 md:h-auto"
-            : "md:shadow-none md:bg-none md:translate-y-0 md:h-none",
-          "absolute md:fixed top-0 inset-x-0 z-40 md:transition-shadow-xl md:shadow-black md:transition-color duration-500 md:-translate-y-6 md:h-20 lg:h-24"
+            ? "md:h-auto md:-translate-y-6 md:bg-[#132577] md:shadow"
+            : "md:h-none md:translate-y-0 md:bg-none md:shadow-none",
+          "md:transition-shadow-xl md:transition-color absolute inset-x-0 top-0 z-40 duration-500 md:fixed md:h-20 md:-translate-y-6 md:shadow-black lg:h-24",
         )}
       >
         <nav
@@ -54,7 +54,7 @@ export default function Hero() {
           <div
             className={classNamesNavBarScroll(
               scrollPosition > 0 ? "bg-[#132577]" : "bg-none",
-              "hidden lg:hidden fixed p-2 rounded-full transition-color duration-1000"
+              "transition-color fixed hidden rounded-full p-2 duration-1000 lg:hidden",
             )}
           >
             <button
@@ -67,14 +67,14 @@ export default function Hero() {
             </button>
           </div>
           {/* Table & Desktop Navigation: */}
-          <div className="hidden md:flex md:gap-x-8 lg:gap-x-12 md:justify-end">
+          <div className="hidden md:flex md:justify-end md:gap-x-8 lg:gap-x-12">
             {navigation.map((item) => (
               <Link
                 to={item.section}
                 smooth={true}
                 key={item.name}
                 duration={500}
-                className="text-sm font-semibold leading-6 text-white hover:underline hover:text-gray-400 cursor-pointer"
+                className="cursor-pointer text-sm font-semibold leading-6 text-white hover:text-gray-400 hover:underline"
               >
                 {item.name}
               </Link>
@@ -109,7 +109,7 @@ export default function Hero() {
                       smooth={true}
                       key={item.name}
                       duration={500}
-                      className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-50 hover:text-zinc-900 cursor-pointer"
+                      className="-mx-3 block cursor-pointer rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-50 hover:text-zinc-900"
                     >
                       {item.name}
                     </Link>
@@ -122,10 +122,10 @@ export default function Hero() {
       </header>
 
       <div className="relative isolate px-6 pt-14 lg:px-8">
-        <div className="mx-auto max-w-8xl py-32 sm:py-48 lg:py-56">
+        <div className="max-w-8xl mx-auto py-32 sm:py-48 lg:py-56">
           <div>
             <div className="flex justify-around ">
-              <div className="text-left max-w-3xl">
+              <div className="max-w-3xl text-left">
                 <h1 className="text-3xl font-bold tracking-tight text-slate-100 sm:text-5xl">
                   Software solution providers that help brands thrive and stand
                   out
@@ -136,17 +136,17 @@ export default function Hero() {
                   recommendations, and seamless purchasing. Our experts will
                   elevate your customer interactions.
                 </p>
-                <div className="mt-10 flex items-center justify-left gap-x-6">
+                <div className="justify-left mt-10 flex items-center gap-x-6">
                   <a
                     href="https://litslink.com/technologies"
-                    className="mt-32 rounded-md bg-white hover:bg-[#92989f] px-3.5 py-2.5 text-sm font-semibold text-black hover:text-[#132577] shadow-sm hover:bg-white-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    className="hover:bg-white-500 mt-32 rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-[#92989f] hover:text-[#132577] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                   >
                     EXPLORE MORE
                   </a>
                 </div>
               </div>
               <img
-                className="h-auto w-auto max-w-lg object-cover hidden md:flex md:w-96 md:h-96"
+                className="hidden h-auto w-auto max-w-lg object-cover md:flex md:h-96 md:w-96"
                 src={heroImage}
                 alt="Graphic"
               />

diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
@@ -34,14 +34,14 @@ const Projects = () => {
   ];
 
   return (
-    <section name="projects" className="pt-24 pb-6 md:pt-32 sm:pb-6">
-      <div className="max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 items-start justify-between lg:flex md:px-8">
+    <section name="projects" className="pb-6 pt-24 sm:pb-6 md:pt-32">
+      <div className="mx-auto max-w-screen-xl items-start justify-between gap-x-12 px-4 text-gray-600 md:px-8 lg:flex">
         <div className="hidden lg:block lg:max-w-xl">
-          <div className="flex-none mt-6 md:mt-0 lg:mt-16">
-            <ul className="inline-grid gap-y-8 gap-x-14 grid-cols-2">
+          <div className="mt-6 flex-none md:mt-0 lg:mt-16">
+            <ul className="inline-grid grid-cols-2 gap-x-14 gap-y-8">
               {features.map((item, idx) => (
                 <li key={idx} className="flex gap-x-4">
-                  <div className="flex-none w-64 h-40 rounded-lg flex items-center justify-center hover:shadow-lg hover:border-gray-400 hover:scale-110 hover:duration-150">
+                  <div className="flex h-40 w-64 flex-none items-center justify-center rounded-lg hover:scale-110 hover:border-gray-400 hover:shadow-lg hover:duration-150">
                     {item.image}
                   </div>
                 </li>
@@ -52,7 +52,7 @@ const Projects = () => {
         <div className="mt-6 gap-12 sm:mt-0 md:flex lg:block">
           <div className="max-w-2xl">
             <h1>PROJECTS</h1>
-            <h3 className="text-gray-800 text-3xl font-semibold sm:text-4xl">
+            <h3 className="text-3xl font-semibold text-gray-800 sm:text-4xl">
               Our amazing project that has been completed
             </h3>
             <p className="mt-3 max-w-xl text-justify">
@@ -68,7 +68,7 @@ const Projects = () => {
             </p>
           </div>
           <div>
-            <button className="px-7 py-4 text-white duration-150 bg-[#132577] rounded-lg hover:bg-[#13257798] active:shadow-lg mt-12 md:mt-20">
+            <button className="mt-12 rounded-lg bg-[#132577] px-7 py-4 text-white duration-150 hover:bg-[#13257798] active:shadow-lg md:mt-20">
               Recent Projects
             </button>
           </div>

diff --git a/src/components/Services.jsx b/src/components/Services.jsx
@@ -42,24 +42,24 @@ const posts = [
 
 export default function Example() {
   return (
-    <div name="services" className="pt-24 pb-6 md:pt-32 sm:pb-6">
+    <div name="services" className="pb-6 pt-24 sm:pb-6 md:pt-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8 ">
-        <div className="mx-auto lg:mx-0 text-center">
+        <div className="mx-auto text-center lg:mx-0">
           <h2 className="text-4xl tracking-tight text-[#132577] sm:text-2xl">
             SERVICES
           </h2>
-          <p className="mt-2 text-3xl font-bold leading-8 text-black-600">
+          <p className="text-black-600 mt-2 text-3xl font-bold leading-8">
             We Provide All-In-One Solution
           </p>
-          <p className="text-3xl font-bold leading-8 text-black-600">
+          <p className="text-black-600 text-3xl font-bold leading-8">
             For Every IT Job
           </p>
         </div>
-        <div className="mx-auto mt-4 grid max-w-8xl grid-cols-1 gap-4 lg:gap-8 pt-5 border-gray-200 md:pt-10 lg:mx-0 lg:max-w-none lg:grid-cols-4">
+        <div className="max-w-8xl mx-auto mt-4 grid grid-cols-1 gap-4 border-gray-200 pt-5 md:pt-10 lg:mx-0 lg:max-w-none lg:grid-cols-4 lg:gap-8">
           {posts.map((post) => (
             <article
               key={post.id}
-              className="flex max-w-4xl flex-col items-start justify-between border-spacing-x-28 rounded-lg shadow-xl hover:shadow-2xl box-border p-4 md:p-6 lg:p-8 bg-[#ffc107] hover:bg-[#ffbd07]"
+              className="box-border flex max-w-4xl border-spacing-x-28 flex-col items-start justify-between rounded-lg bg-[#ffc107] p-4 shadow-xl hover:bg-[#ffbd07] hover:shadow-2xl md:p-6 lg:p-8"
             >
               <div className="group relative p-2">
                 <h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
@@ -68,14 +68,14 @@ export default function Example() {
                     {post.title}
                   </a>
                 </h3>
-                <p className="mt-5 mb-5 line-clamp-3 text-sm leading-6">
+                <p className="mb-5 mt-5 line-clamp-3 text-sm leading-6">
                   {post.description}
                 </p>
               </div>
               <div className="flex items-center gap-x-4 text-xs">
                 <a
                   href={post.buttonLM.href}
-                  className="relative z-10 rounded-full px-3 py-1.5 font-medium text-gray-600 hover:text-gray-500 active:text-[#132577] underline underline-offset-2 "
+                  className="relative z-10 rounded-full px-3 py-1.5 font-medium text-gray-600 underline underline-offset-2 hover:text-gray-500 active:text-[#132577] "
                 >
                   {post.buttonLM.title}
                 </a>

diff --git a/src/components/Team.jsx b/src/components/Team.jsx
@@ -37,54 +37,54 @@ const Team = () => {
   ];
 
   return (
-    <section name="team" className="pt-24 pb-6 md:pt-32 sm:pb-6">
-      <div className="max-w-screen-xl mx-auto px-4 md:px-8">
-        <div className="max-auto lg:mx-0 text-center">
+    <section name="team" className="pb-6 pt-24 sm:pb-6 md:pt-32">
+      <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+        <div className="max-auto text-center lg:mx-0">
           <h2 className="text-4xl tracking-tight text-[#132577] sm:text-2xl">
             TEAM
           </h2>
-          <p className="mt-2 text-3xl font-bold leading-8 text-black-600">
+          <p className="text-black-600 mt-2 text-3xl font-bold leading-8">
             Our certified experts
           </p>
         </div>
-        <div className="mt-12 p-1 rounded-xl ">
-          <ul className="grid gap-8 sm:grid-cols-2 md:grid-cols-3 h-4/5">
+        <div className="mt-12 rounded-xl p-1 ">
+          <ul className="grid h-4/5 gap-8 sm:grid-cols-2 md:grid-cols-3">
             {team.map((item, idx) => (
               <li
                 key={idx}
-                className="shadow-md w-full p-2 rounded-xl bg-[#ffc107]/80  hover:shadow-lg hover:shadow-[#132577]"
+                className="w-full rounded-xl bg-[#ffc107]/80 p-2 shadow-md  hover:shadow-lg hover:shadow-[#132577]"
               >
-                <div className="w-full h-60 sm:h-52 md:h-56">
+                <div className="h-60 w-full sm:h-52 md:h-56">
                   <img
                     src={item.avatar}
-                    className="w-full h-full object-cover object-center shadow-md rounded-xl"
+                    className="h-full w-full rounded-xl object-cover object-center shadow-md"
                     alt=""
                   />
                 </div>
                 <div className="mt-4 text-center">
-                  <h4 className="text-lg text-gray-700 font-semibold">
+                  <h4 className="text-lg font-semibold text-gray-700">
                     {item.name}
                   </h4>
                   <p className="">{item.title}</p>
-                  <div className="mt-3 flex gap-4 text-[#132577] justify-center pt-10 pb-5 border-10">
+                  <div className="border-10 mt-3 flex justify-center gap-4 pb-5 pt-10 text-[#132577]">
                     <a href={item.twitter} className="">
                       <img
                         src={twitterIcon}
-                        className="w-50 h-50 hover:opacity-30 duration-150"
+                        className="w-50 h-50 duration-150 hover:opacity-30"
                         alt=""
                       />
                     </a>
                     <a href={item.facebook} className="">
                       <img
                         src={facebookIcon}
-                        className="w-50 h-50 hover:opacity-30 duration-150"
+                        className="w-50 h-50 duration-150 hover:opacity-30"
                         alt=""
                       />
                     </a>
                     <a href={item.linkedin} className="">
                       <img
                         src={linkedinIcon}
-                        className="w-50 h-50 hover:opacity-30 duration-150"
+                        className="w-50 h-50 duration-150 hover:opacity-30"
                         alt=""
                       />
                     </a>