Merge pull request #2 from La-404-Devinci/mobile-responsive

Mobile responsive

src/app/globals.css

@@ -12,4 +12,5 @@
 
 html, body {
   background-color: #070707;
+  overflow-x: hidden;
 }

src/components/content.tsx

@@ -17,7 +17,7 @@ const BottomFooter = () => {
       <div className="flex flex-col gap-8">
         <h2 className={cn(
           gasoekOne.className,
-          'uppercase text-8xl text-gray-900'
+          'uppercase text-6xl sm:text-8xl text-gray-900'
         )}>
           404 Devinci
         </h2>
@@ -34,7 +34,7 @@ const Nav = () => {
     return (
       <div className="w-full flex justify-between">
         <div className="flex flex-col gap-3 text-gray-900">
-          <h3 className="uppercase text-xl font-semibold">Social media</h3>
+          <h3 className="uppercase text-lg sm:text-xl font-semibold">Social media</h3>
           <div className="flex flex-col">
             <div>
               <a 
@@ -63,8 +63,8 @@ const Nav = () => {
           </div>
         </div>
 
-        <div className="w-56 h-16 rounded-full border border-black flex items-center 
-          justify-center text-gray-900 text-xl relative group overflow-hidden"
+        <div className="w-40 h-14 sm:w-56 sm:h-16 rounded-full border border-black flex items-center 
+          justify-center text-gray-900 text-lg sm:text-xl relative group overflow-hidden"
         >
           <a href="mailto:[email protected]" className="z-10">
             [email protected]

src/components/heading2.tsx

@@ -0,0 +1,22 @@
+import { gasoekOne } from "@/app/font";
+import cn from "@/utils/function";
+import React from "react";
+
+interface H2Props {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const H2 = ({ children, className }: H2Props) => {
+  return ( 
+    <h2 className={cn(
+      gasoekOne.className,
+      "uppercase text-5xl xl:text-7xl text-gray-50 text-balance",
+      className
+    )}>
+      {children}
+    </h2>
+   );
+}
+
+export default H2;

src/components/member-card.tsx

@@ -0,0 +1,41 @@
+import { MemberType } from "@/utils/types";
+import Image from "next/image";
+
+interface MemberCardProps {
+  member: MemberType;
+}
+
+const MemberCard = ({ member }: MemberCardProps) => {
+  return ( 
+    <div 
+      className="flex flex-1 flex-col gap-2 min-w-40"
+    >
+      <div className="relative w-full overflow-hidden aspect-square bg-black">
+        {member.image ? (
+          <Image 
+            src={`/img/${member.image}`} 
+            width={0}
+            height={0}
+            sizes="100%"
+            alt={member.name}
+            className="object-cover w-full h-full" 
+          />
+        ) : (
+          <Image 
+            src="/img/dino-gray.svg" 
+            width={200}
+            height={200}
+            alt={member.name}
+            className="absolute bottom-0 left-1/2 -translate-x-1/2"
+          />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <span className="text-2xl uppercase text-gray-50">{member.name}</span>
+        <span className="text-gray-400">{member.position}</span>
+      </div>
+    </div>
+   );
+}
+
+export default MemberCard;

src/components/project.tsx

@@ -1,16 +1,14 @@
 "use client";
 
+import { useMediaQuery } from "@/hooks/use-media-query";
 import cn from "@/utils/function";
+import { ProjectType } from "@/utils/types";
 import { motion } from "framer-motion";
 import Image from "next/image";
 import { useState } from "react";
 
 interface ProjectProps {
-  project: {
-    name: string;
-    date: string;
-    image: string;
-  };
+  project: ProjectType;
   index: number;
 }
 
@@ -23,6 +21,11 @@ const anim = {
 const Project = ({ project, index }: ProjectProps) => {
 
   const [isActive, setIsActive] = useState(false);
+  const isComputerOrLarger = useMediaQuery('(min-width: 1280px)');  
+
+  if(!isComputerOrLarger) {
+    return <MobileProject project={project} index={index} />
+  }
 
   return ( 
     <div 
@@ -37,7 +40,7 @@ const Project = ({ project, index }: ProjectProps) => {
       onMouseLeave={() => {setIsActive(false)}}
     >
       <div className="flex items-center gap-8 justify-center">
-        <h3 className="text-6xl text-gray-50 font-medium">{project.name}</h3>
+        <h3 className="text-4xl md:text-5xl xl:text-6xl text-gray-50 font-medium">{project.name}</h3>
         <motion.div 
           variants={anim} 
           animate={isActive ? "open" : "closed"}
@@ -55,7 +58,28 @@ const Project = ({ project, index }: ProjectProps) => {
       </div>
       <p className="text-gray-400">{project.date}</p>
     </div>
-   );
+    );
 }
 
-export default Project;
+export default Project;
+
+
+const MobileProject = ({ project, index }: ProjectProps) => {
+
+  return(
+    <div 
+        key={`project:${index}`}
+        className={cn(
+          "h-32 lg:h-40 flex items-center justify-between p-5 lg:p-8",
+          index === 0 
+            ? "border-t border-b border-gray-800" 
+            : "border-b border-gray-800"
+        )}
+      >
+        <div className="flex items-center gap-2 justify-center">
+          <h3 className="text-2xl sm:text-3xl md:text-5xl text-gray-50 font-medium">{project.name}</h3>
+        </div>
+        <p className="text-gray-400 text-sm md:text-base">{project.date}</p>
+      </div>
+  )
+}

src/components/sections/about.tsx

@@ -1,16 +1,13 @@
-import { gasoekOne } from "@/app/font";
-import cn from "@/utils/function";
+import H2 from "../heading2";
 
 const AboutSection = () => {
   return (
     <div className="w-full mt-80 px-5 lg:px-10 flex items-center justify-center relative">
       <div className="flex flex-col gap-12 z-10">
-        <h2
-          className={cn(gasoekOne.className, "uppercase text-7xl text-gray-50")}
-        >
+        <H2>
           Who we are
-        </h2>
-        <div className="max-w-2xl w-full text-xl font-medium leading-8">
+        </H2>
+        <div className="max-w-2xl w-full lg:text-xl font-medium leading-6 lg:leading-8">
           <p>
             404 Devinci is an association focused on web development and UI/UX
             design. We&apos;re also interested in emerging technologies such as AI

src/components/sections/faq.tsx

@@ -1,5 +1,6 @@
-import { gasoekOne } from "@/app/font";
+import { montserrat } from "@/app/font";
 import cn from "@/utils/function";
+import H2 from "../heading2";
 
 const faqData = {
   "fr": [
@@ -53,11 +54,13 @@ const faqData = {
 
 const FaqSection = () => {
   return (
-    <div className="w-full max-w-[1700px] mx-auto my-80 px-5 lg:px-10 flex flex-col lg:flex-row lg: justify-between gap-y-12 gap-x-5 ">
-      <h2 className="uppercase text-7xl text-gray-50 inline-flex flex-col flex-shrink-0">
-        <span>questions &</span>
-        <span className={cn(gasoekOne.className)}>answers</span>
-      </h2>
+    <div className="w-full max-w-[1700px] mx-auto my-80 px-5 lg:px-10 flex flex-col 
+      lg:flex-row lg: justify-between gap-y-12 gap-x-10 "
+    >
+      <H2 className="flex flex-col flex-shrink-0">
+        <span className={cn(montserrat.className)}>questions &</span>
+        <span> answers</span>
+      </H2>
       <div className="flex flex-col w-full max-w-3xl">
         {faqData.en.map(({ question, answer }, index) => (
           <div 

src/components/sections/header.tsx

@@ -6,8 +6,8 @@ const Header = () => {
   return ( 
     <div className="w-full h-screen flex flex-col gap-8 px-5 lg:px-10">
       {/* HEADING */}
-        <div className="w-full flex justify-between items-end pt-14">
-          <h1 className={`${gasoekOne.className} text-[100px] leading-none`}>
+        <div className="w-full flex justify-between items-end flex-wrap pt-14">
+          <h1 className={`${gasoekOne.className} text-5xl md:text-7xl xl:text-[100px] leading-none`}>
             <div className="flex items-center gap-8">
               <span className="uppercase">404</span>
               <div className="h-[1px] bg-gray-50 w-full translate-y-2" />
@@ -18,7 +18,7 @@ const Header = () => {
           </h1>
 
           <div className="font-medium flex flex-col">
-            <span className="uppercase text-gray-400 ml-auto text-sm">Paris</span>
+            <span className="uppercase text-gray-400 ml-auto text-xs md:text-sm">Paris</span>
             <Timer />
           </div>
         </div>

src/components/sections/projects.tsx

@@ -1,4 +1,4 @@
-import { gasoekOne } from "@/app/font";
+import H2 from "../heading2";
 import Project from "../project";
 
 const projects = [
@@ -22,9 +22,9 @@ const projects = [
 const ProjectsSection = () => {
   return ( 
     <div className="w-full max-w-[1700px] mx-auto mt-40 px-5 lg:px-10 flex flex-col items-center gap-12">
-      <h2 className={`${gasoekOne.className} uppercase text-7xl text-gray-50`}>
+      <H2>
         What we made
-      </h2>
+      </H2>
       <div className="flex flex-col w-full">
         {projects.map((project, index) => (
           <Project key={`project:${index}`}  project={project} index={index} />

src/components/sections/team.tsx

@@ -1,7 +1,6 @@
-import { gasoekOne } from "@/app/font";
-import cn from "@/utils/function";
-import Image from "next/image";
 import Arrow from "../arrow";
+import H2 from "../heading2";
+import MemberCard from "../member-card";
 
 const members = [
   {
@@ -21,54 +20,27 @@ const members = [
   },
 ]
 
+
+
 const TeamSection = () => {
   return ( 
     <div className="w-full max-w-[1700px] mx-auto mt-80 px-5 lg:px-10">
-      <div className="flex justify-between items-end">
-        <h2 className={cn(
-          gasoekOne.className,
-          "uppercase text-7xl text-gray-50"
-        )}>
+      <div className="flex justify-between sm:items-end flex-col 
+        sm:flex-row"
+        >
+        <H2>
           Our team
-        </h2>
-        <div className="flex items-center gap-2">
+        </H2>
+        <div className="flex items-center gap-2 max-sm:my-4">
           <Arrow color={50} />
-        <span className="uppercase text-lg">
-          Meet the team
-        </span>
+          <span className="uppercase text-lg ">
+            Meet the team
+          </span>
         </div>
       </div>
-      <div className="flex items-center gap-5 mt-12">
+      <div className="grid grid-cols-1 sm:grid-cols-3 items-center gap-5 sm:mt-12 flex-wrap">
         {members.map((member, index) => (
-          <div 
-            key={`member:${index}`} 
-            className="flex flex-1 flex-col gap-2"
-          >
-            <div className="relative w-full overflow-hidden aspect-square bg-black">
-              {member.image ? (
-                <Image 
-                  src={`/img/${member.image}`} 
-                  width={0}
-                  height={0}
-                  sizes="100%"
-                  alt={member.name}
-                  className="object-cover w-full h-full" 
-                />
-              ) : (
-                <Image 
-                  src="/img/dino-gray.svg" 
-                  width={200}
-                  height={200}
-                  alt={member.name}
-                  className="absolute bottom-0 left-1/2 -translate-x-1/2"
-                />
-              )}
-            </div>
-            <div className="flex flex-col">
-              <span className="text-2xl uppercase text-gray-50">{member.name}</span>
-              <span className="text-gray-400">{member.position}</span>
-            </div>
-          </div>
+          <MemberCard key={index} member={member} />
         ))}
       </div>
     </div>

src/components/timer.tsx

@@ -20,7 +20,7 @@ const Timer = () => {
   if (!mounted) return;
 
   return ( 
-    <span className="uppercase text-xl">{time}</span>
+    <span className="uppercase text-lg md:text-xl">{time}</span>
    );
 }