Merge pull request #75 from Dium-dev/38-aboutusbanner

Add SobreNosotros page

src/app/(landing)/sobre-nosotros/page.tsx

@@ -0,0 +1,30 @@
+import { AboutUsCard } from "@/components/AboutUsBanner/AboutUsCard";
+import Image from "next/image";
+
+const SobreNosotros = () => {
+  return (
+    <>
+      <div className="mb-24 flex flex-col items-center justify-between gap-8 md:flex-row bg-black/90 dark:bg-white px-8 py-20 relative">
+        <h1 className="text-4xl font-bold text-primary-lm mb-12 md:mb-0 md:ml-24">QUIENES SOMOS</h1>
+        <div className="absolute inset-y-0 md:right-20 bottom-0 transform translate-y-1/2 mb-6 md:mb-0">
+          <div className="flex h-full items-center justify-center">
+            <Image
+              src={"/icons/iconLogoATC.png"}
+              alt="Logo ATC"
+              width={200}
+              height={200}
+              className="shadow-2xl rounded-full"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-8 px-8">
+        <AboutUsCard color="red" reverse />
+        <AboutUsCard color="green" />
+        <AboutUsCard color="yellow" reverse />
+        <AboutUsCard color="purple" />
+      </div>
+    </>
+  );
+};
+export default SobreNosotros;

src/app/(nav-bar)/index.tsx

@@ -65,7 +65,7 @@ export function NavBar() {
           <li className="relative group" key={label}>
             <Link href={to} target={target}>
               <Button
-                className="flex items-center gap-2 relative text-lg"
+                className="flex items-center gap-2 relative text-paragraph"
               >
                 {' '}
                 {label}

src/app/not-found.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 const NotFoundPage: FC = () => {
   return (
     <section className="flex flex-col items-center justify-center h-screen w-screen gap-9 p-12">
-      <h1 className="text-center text-2xl">
+      <h1 className="text-center text-header">
         La pagina que estas buscando no parece existir
       </h1>
       <div>

src/components/AboutUsBanner/AboutUsCard.tsx

@@ -0,0 +1,38 @@
+import { LiaHardHatSolid } from "react-icons/lia";
+import { cn } from "@/lib/utils"
+
+interface ConstructionCardProps {
+  color: "red" | "green" | "yellow" | "purple"
+  className?: string
+  reverse?: boolean
+}
+
+export function AboutUsCard({ color, className, reverse = false }: ConstructionCardProps) {
+  const colorClasses = {
+    red: "bg-red-500 dark:bg-red-700",
+    green: "bg-lime-500 dark:bg-lime-700",
+    yellow: "bg-yellow-400 dark:bg-yellow-600",
+    purple: "bg-purple-400 dark:bg-purple-600",
+  }
+
+  return (
+    <div className={cn(
+      "flex flex-col-reverse items-center justify-evenly gap-6 w-full mb-8",
+      reverse ? "md:flex-row-reverse" : "md:flex-row",
+      className
+    )}>
+      <div className="w-full md:w-2/5 space-y-4">
+        <p className="text-paragraph text-gray-300 dark:text-gray-700">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem esse fuga, unde voluptas reprehenderit ut commodi! Officiis, magnam veritatis? Autem quid possimus accusamus sed et fugiat consectetur est officiis molestias.
+        </p>
+        <p className="text-paragraph text-gray-300 dark:text-gray-700">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem esse fuga, unde voluptas reprehenderit ut commodi! Officiis, magnam veritatis? Autem quid possimus accusamus sed et fugiat consectetur est officiis molestias.
+        </p>
+      </div>
+      <div className={cn("flex h-60 w-full md:w-2/5 flex-shrink-0 items-center justify-center rounded-lg", colorClasses[color])}>
+        <LiaHardHatSolid className="h-20 w-20 text-white" />
+      </div>
+    </div>
+  )
+}
+

src/components/AboutUsBanner/index.tsx

@@ -7,7 +7,7 @@ export const AboutUsBanner = () => {
       <div className="md:w-1/4 lg:w-1/3 space-y-2 ms:space-y-6 h-min">
         <div className="flex justify-between items-center gap-x-6">
           <Link href={"about"}>
-            <h2 className="text-2xl xs:text-4xl ms:text-5xl text-primary-lm font-bold hover:underline">
+            <h2 className="text-header xs:text-4xl ms:text-5xl text-primary-lm font-bold hover:underline">
               Quienes somos
             </h2>
           </Link>
@@ -21,7 +21,7 @@ export const AboutUsBanner = () => {
             />
           </Link>
         </div>
-        <p className="text-sm xs:text-lg ms:text-xl md:text-base lg:text-2xl ml-4 ms:ml-10 md:ml-2 lg:ml-5">
+        <p className="text-sm xs:text-paragraph ms:text-xl md:text-base lg:text-header ml-4 ms:ml-10 md:ml-2 lg:ml-5">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aut
           aperiam quasi, id perferendis error nesciunt architecto ipsa magni
           alias eveniet consequatur totam illo fuga ad explicabo, aspernatur

src/components/Categories/CategoryCard.tsx

@@ -12,7 +12,7 @@ const CategoryCard: FC<CategoryCardProps> = ({ image, name }) => {
     <Link href={"https://actualizatucarro.mercadoshops.com.co/"}>
       <div className="flex flex-col items-center justify-center gap-x-4 relative group">
         <Image src={image} width={150} height={150} alt={name} className="group-hover:scale-125 transition-all aspect-square" />
-        <span className="font-bold text-xs ms:text-sm md:text-lg ms:group-hover:text-xl transition-all">{name}</span>
+        <span className="font-bold text-xs ms:text-sm md:text-paragraph ms:group-hover:text-xl transition-all">{name}</span>
         <div className="absolute h-1 bg-primary-lm bottom-[-5px] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-in-out w-full rounded"></div>
       </div>
     </Link>

src/components/HowToBuyItem/index.tsx

@@ -37,9 +37,9 @@ export const HowToBuyItem = ({
               className="drop-shadow-lg"
             />
           </div>
-          <h2 className="text-lg md:text-xl lg:text-2xl font-bold">{title}</h2>
+          <h2 className="text-paragraph md:text-xl lg:text-header font-bold">{title}</h2>
         </div>
-        <p className="lg:text-lg">{description}</p>
+        <p className="lg:text-paragraph">{description}</p>
       </div>
     </div>
   );

src/components/PaymentMethods/InfoCard.tsx

@@ -11,10 +11,10 @@ export const InfoCard = ({ title, description, img }: InfoCardProps) => {
     <article className="w-full flex flex-col items-center gap-y-1">
       <Image src={img} width={85} height={85} alt={description} />
       <div className="flex flex-col items-center gap-y-1 flex-1">
-        <h3 className="text-primary-lm font-bold text-lg ms:text-xl md:text-2xl">
+        <h3 className="text-primary-lm font-bold text-paragraph ms:text-xl md:text-header">
           {title}
         </h3>
-        <p className="text-center w-4/5 text-base md:text-lg text-black/55 dark:text-white">
+        <p className="text-center w-4/5 text-base md:text-paragraph text-black/55 dark:text-white">
           {description}
         </p>
       </div>

src/components/Reviews/ReviewCard.tsx

@@ -21,7 +21,7 @@ export const ReviewCard = ({ review }: ReviewCardProps) => {
       <div className="flex flex-col ms:flex-row items-center gap-x-3">
         <IoPersonCircleSharp size={50} />
         <div className="flex flex-col justify-center items-center ms:items-start">
-          <p className="text-lg">{review.user}</p>
+          <p className="text-paragraph">{review.user}</p>
           <StarRatings
             rating={+review.rating}
             numberOfStars={5}

src/components/ui/alert-dialog.tsx

@@ -79,7 +79,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn("text-paragraph font-semibold", className)}
     {...props}
   />
 ))

src/components/ui/dialog.tsx

@@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-paragraph font-semibold leading-none tracking-tight",
       className
     )}
     {...props}

tailwind.config.ts

@@ -21,6 +21,10 @@ const config = {
       },
     },
     extend: {
+      fontSize: {
+        "paragraph": "18px",
+        "header": "24px"
+      },
       colors: {
         "background-lm": "#f1f1f1",
         "background-dm": "#13131d",