chore: bunch of UI fixes

KrustyC · Jul 17, 2024 · 971a797 · 971a797
1 parent 5557115
commit 971a797
Show file tree

Hide file tree

Showing 20 changed files with 479 additions and 218 deletions.
diff --git a/src/app/_components/Contact/index.tsx b/src/app/_components/Contact/index.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+
+import { LetsWorkTogether } from "@/components/LetsWorkTogether";
+
+const variants: Variants = {
+  offscreen: {
+    y: 10,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: "spring",
+      duration: 1,
+    },
+  },
+};
+
+export const Contact = () => {
+  return (
+    <motion.div
+      className="bg-black w-full flex flex-col lg:flex-row container-x-padding pt-28 lg:pt-24 pb-12 lg:pb-24 mx-auto gap-12 lg:gap-64 text-left"
+      initial="offscreen"
+      whileInView="onscreen"
+      viewport={{ once: true, amount: 0.7 }}
+      transition={{ staggerChildren: 0.6 }}
+    >
+      <motion.div
+        variants={variants}
+        className="w-full lg:w-1/2 text-2xl lg:text-4xl lg:leading-[2.9rem] font-light text-primary"
+      >
+        Art Direction, Branding, Campaign Strategy, Digital, Identity, Label
+        design, Packaging, Print, Social Media, Online Strategy, Web Design,
+        Interior Branding and Visualisation, Book Design.
+      </motion.div>
+
+      <motion.div variants={variants} className="flex-1">
+        <LetsWorkTogether />
+      </motion.div>
+    </motion.div>
+  );
+};
diff --git a/src/app/_components/Hero.tsx b/src/app/_components/Hero.tsx
@@ -27,7 +27,7 @@ const variants: Variants = {
 
 export const Hero: React.FC<HeroProps> = ({ homepageCopy }) => (
   <div className="bg-primary flex flex-col">
-    <div className="w-full flex px-8 md:px-16 lg:px-32 xl:px-60 pt-28 lg:pt-36 pb-12 lg:pb-24 mx-auto">
+    <div className="w-full flex container-x-padding pt-28 lg:pt-40 pb-12 lg:pb-24 mx-auto">
       <motion.div
         className="flex flex-col mx-auto text-left text-black"
         initial="offscreen"
@@ -36,7 +36,7 @@ export const Hero: React.FC<HeroProps> = ({ homepageCopy }) => (
         transition={{ staggerChildren: 0.3 }}
       >
         {homepageCopy.quote && (
-          <motion.div className="mb-4 text-sm" variants={variants}>
+          <motion.div className="mb-3 text-sm" variants={variants}>
             <RichText richtext={homepageCopy.quote.json} />
           </motion.div>
         )}

diff --git a/src/app/_components/Projects/ProjectsList.tsx b/src/app/_components/Projects/ProjectsList.tsx
@@ -32,7 +32,7 @@ export const ProjectsList: React.FC<ProjectsListProps> = ({ projects }) => {
 
   return (
     <div id="projects-container" className="bg-white">
-      <div className="min-h-[90vh] px-8 md:px-16 lg:px-32 xl:px-60 py-12 lg:py-24 gap-x-20 flex flex-col md:flex-row md:justify-between">
+      <div className="min-h-[90vh] container-x-padding py-12 lg:py-24 gap-x-20 flex flex-col md:flex-row md:justify-between">
         <div className="flex-1 flex flex-col mt-0">
           {leftColumnProjects.map((project) => (
             <Project key={project.slug} project={project} />

diff --git a/src/app/about/_components/Hero.tsx b/src/app/about/_components/Hero.tsx
@@ -29,24 +29,24 @@ interface AboutHeroProps {
 export const AboutHero: React.FC<AboutHeroProps> = ({ headerText, links }) => {
   return (
     <motion.div
-      className="bg-[#272727] w-full flex flex-col lg:flex-row container-x-padding pt-28 lg:pt-36 pb-12 lg:pb-24 mx-auto gap-12 lg:gap-24 text-left"
+      className="bg-black w-full flex flex-col lg:flex-row container-x-padding pt-28 lg:pt-36 pb-12 lg:pb-24 mx-auto gap-12 lg:gap-64 text-left"
       initial="offscreen"
       whileInView="onscreen"
       viewport={{ once: true, amount: 0.7 }}
       transition={{ staggerChildren: 0.6 }}
     >
       <motion.div
         variants={variants}
-        className="w-full lg:w-1/2 text-2xl lg:text-4xl font-bodoni font-light text-primary"
+        className="w-full lg:w-1/2 text-2xl lg:text-4xl lg:leading-[2.9rem] font-light text-primary"
       >
-        Art Direction, Branding, Campaign Strategy, Digital, Identity,
-        Packaging, Photography, Print, Social Media, Strategy, Web Design,
-        Interior Visualisation.
+        Art Direction, Branding, Campaign Strategy, Digital, Identity, Label
+        design, Packaging, Print, Social Media, Online Strategy, Web Design,
+        Interior Branding and Visualisation, Book Design.
       </motion.div>
 
       <motion.div
         variants={variants}
-        className="w-full lg:w-1/2 text-lg text-white"
+        className="w-full lg:w-1/2 text-lg text-white lg:pt-3"
       >
         <RichText richtext={headerText} links={links} />
       </motion.div>

diff --git a/src/app/about/_components/ThingsToCare.tsx b/src/app/about/_components/ThingsToCare.tsx
@@ -1,49 +1,49 @@
 import { TitleAndCopy } from "@/components/TitleAndCopy";
 
+const items = [
+  {
+    title: "Design Impact",
+    description:
+      "Design has a lot to answer for. Which means as a designer I have the responsibility to do what I can to keep things organic, help smaller realities and keep my attention on sustainable outcomes.",
+  },
+  {
+    title: "Community",
+    description: (
+      <>
+        I{"'"}m an active community member for <b>Humanitarian Designers</b> and{" "}
+        <b>Let{"'"}s Talk Palestine</b>. I{"'"}ve also volunteered for the{" "}
+        <b>Migration museum in London</b> and{" "}
+        <b>Bandstand Beds, a community garden</b>
+      </>
+    ),
+  },
+  {
+    title: "Different Mediums",
+    description:
+      "Should I say integrated? Multi-disciplined? Versatile? I love architecture, sculpture, photography, digital art and all forms of design, which make any chance to use as many variations of art in my work the more exciting.",
+  },
+  {
+    title: "Collaborations",
+    description:
+      "I love working with other professionals and creatives, if you're looking for people to join you on a project or even just get a second opinion, please contact me - I would love to help any way I can.",
+  },
+];
+
 export const ThingsToCare: React.FC = () => {
   return (
     <div className="text-white container-x-padding flex flex-col py-20">
       <div className="flex items-center justify-between mb-8">
-        <h3 className="tracking-widest uppercase font-manrope font-semibold">
+        <h3 className="tracking-titles uppercase font-manrope font-semibold">
           Things I care about
         </h3>
       </div>
 
-      <div className="w-full flex flex-col lg:flex-row text-black gap-10">
-        <TitleAndCopy title="Design Impact" variant="dark">
-          <p className="text-regular">
-            Design has a lot to answer for. Which means as a designer I have the
-            responsibility to do what I can to keep things organic, help smaller
-            realities and keep my attention on sustainable outcomes.
-          </p>
-        </TitleAndCopy>
-
-        <TitleAndCopy title="Community" variant="dark">
-          <p className="text-regular">
-            I{"'"}m an active community member for <b>Humanitarian Designers</b>{" "}
-            and <b>Let{"'"}s Talk Palestine</b>. I{"'"}ve also volunteered for
-            the <b>Migration museum in London</b> and{" "}
-            <b>Bandstand Beds, a community garden</b>.
-          </p>
-        </TitleAndCopy>
-
-        <TitleAndCopy title="Different Mediums" variant="dark">
-          <p className="text-regular">
-            Should I say integrated? Multi-disciplined? Versatile? I love
-            architecture, sculpture, photography, digital art and all forms of
-            design, which make any chance to use as many variations of art in my
-            work the more exciting.
-          </p>
-        </TitleAndCopy>
-
-        <TitleAndCopy title="Collaborations" variant="dark">
-          <p className="text-regular">
-            I love working with other professionals and creatives, if you’re
-            looking for people to join you on a project or even just get a
-            second opinion, please contact me - I would love to help any way I
-            can.
-          </p>
-        </TitleAndCopy>
+      <div className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 text-black gap-12 xl:gap-24 3xl:gap-36">
+        {items.map((item, index) => (
+          <TitleAndCopy key={index} title={item.title} variant="dark">
+            <p className="text-regular">{item.description}</p>
+          </TitleAndCopy>
+        ))}
       </div>
     </div>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,17 +1,15 @@
 import { Suspense } from "react";
 import { draftMode } from "next/headers";
 
-import { Footer } from "@/components/Footer";
+import { WorthyClients } from "@/components/WorthyClients";
 import { ProjectsFilterContextProvider } from "@/contexts/ProjectsFilterContext";
 import { getHomepageCopy } from "@/graphql/queries/get-homepage-copy";
 
-import { Blog } from "./_components/Blog";
-import { GetInTouch } from "./_components/GetInTouch";
+import { Contact } from "./_components/Contact";
 import { Hero } from "./_components/Hero";
 import ProjectsListSection from "./_components/Projects";
 import { Filterbar } from "./_components/Projects/Filterbar";
 import { ProjectsListLoading } from "./_components/Projects/ProjectsListLoading";
-import { Skills } from "./_components/Skills";
 
 export default async function Home() {
   const { isEnabled: isPreviewEnabled } = draftMode();
@@ -31,11 +29,9 @@ export default async function Home() {
         </div>
       </ProjectsFilterContextProvider>
 
-      <Skills />
+      <Contact />
 
-      <Blog />
-
-      <GetInTouch />
+      <WorthyClients />
     </div>
   );
 }
diff --git a/src/app/services/_components/DesignProcess.tsx b/src/app/services/_components/DesignProcess.tsx
@@ -3,45 +3,57 @@ import classNames from "classnames";
 import { TitleAndCopy } from "@/components/TitleAndCopy";
 import { ChevronRightIcon } from "@/icons/ChevronRight";
 
+const items = [
+  {
+    number: "01",
+    title: "Discovery",
+    description:
+      "It's about understanding your goals and needs, by analysing your current brand, market position, target customer experience and, above all, the message you want to convey.",
+  },
+  {
+    number: "02",
+    title: "Concept Dev",
+    description:
+      "Based on our discussion, we create a solid base by defining the key conceptual elements to use for our brand strategy.",
+  },
+  {
+    number: "03",
+    title: "Design & Revision",
+    description:
+      "Now for the really fun bit! Starting with initial rough concepts we then collaborate with you through additional rounds of feedback to close in on a final result. Once you are happy with the outcome we can begin final production.",
+  },
+  {
+    number: "04",
+    title: "Delivery",
+    description:
+      "When you're happy and everything is tested we will package and deliver the finished product. This means putting websites live, sending designs to the printers, and handing over new brand guides.",
+  },
+  {
+    number: "05",
+    title: "Support",
+    description:
+      "Once we've opened the door to your new brand your journey has just begun! If needed we can continue to support you to ensure your brand is applied correctly and is continuously developed.",
+  },
+];
+
 export const DesignProcess: React.FC = () => {
   return (
     <div className="bg-primary flex flex-col py-20">
-      <h3 className="mb-8 tracking-widest uppercase font-manrope font-semibold ml-8 md:ml-16 lg:ml-32 xl:ml-48">
+      <h3 className="mb-8 tracking-titles uppercase font-manrope font-semibold ml-8 lg:ml-24 3xl:ml-48 4xl:ml-64">
         Design Process
       </h3>
 
       <div className="w-screen flex text-black gap-24 max-w-screen overflow-y-scroll">
-        <Item
-          first
-          number="01"
-          title="Discovery"
-          description="It's about understanding your goals and needs, by analysing your current brand, market position, target customer experience and, above all, the message you want to convey."
-        />
-
-        <Item
-          number="02"
-          title="Concept Dev"
-          description="Based on our discussion, we create a solid base by defining the key conceptual elements to use for our brand strategy."
-        />
-
-        <Item
-          number="03"
-          title="Design & Revision"
-          description="Now for the really fun bit! Starting with initial rough concepts we then collaborate with you through additional rounds of feedback to close in on a final result. Once you are happy with the outcome we can begin final production."
-        />
-
-        <Item
-          number="04"
-          title="Delivery"
-          description="When you're happy and everything is tested we will package and deliver the finished product. This means putting websites live, sending designs to the printers, and handing over new brand guides."
-        />
-
-        <Item
-          last
-          number="05"
-          title="Support"
-          description="Once we've opened the door to your new brand your journey has just begun! If needed we can continue to support you to ensure your brand is applied correctly and is continuously developed."
-        />
+        {items.map((item, index) => (
+          <Item
+            key={index}
+            number={item.number}
+            title={item.title}
+            description={item.description}
+            first={index === 0}
+            last={index === items.length - 1}
+          />
+        ))}
       </div>
     </div>
   );
@@ -65,13 +77,13 @@ const Item: React.FC<ItemProps> = ({
   return (
     <div
       className={classNames("flex justify-between", {
-        "ml-8 md:ml-16 lg:ml-32 xl:ml-48": first,
-        "mr-8 md:mr-16 lg:mr-32 xl:mr-48": last,
+        "ml-8 lg:ml-24 3xl:ml-48 4xl:ml-64": first,
+        "mr-8 lg:mr-24 3xl:mr-48 4xl:mr-64": last,
       })}
     >
       <div className="text-black flex flex-col">
         <span className="text-5xl font-bodoni mb-6">{number}</span>
-        <h4 className="tracking-widest uppercase font-manrope font-semibold mb-1">
+        <h4 className="tracking-titles uppercase font-manrope font-medium mb-1">
           {title}
         </h4>
         <p className="w-[330px]">{description}</p>

diff --git a/src/app/services/_components/Expertise.tsx b/src/app/services/_components/Expertise.tsx
@@ -1,32 +1,35 @@
 import { TitleAndCopy } from "@/components/TitleAndCopy";
 
+const items = [
+  {
+    title: "Brand Strategy",
+    variant: "light" as "dark" | "light",
+    description:
+      "Working with businesses to create or improve their identities, creating harmonious and consistent brands on multiple levels by habilitating people to tell their unique story.",
+  },
+  {
+    title: "Packaging",
+    variant: "light" as "dark" | "light",
+    description:
+      "Moulding your brand to coherent packaging and label design, from studying the design to preparing technical artwork, I create bespoke solutions for primary, secondary and tertiary packaging.",
+  },
+  {
+    title: "UX/UI & Digital",
+    variant: "light" as "dark" | "light",
+    description:
+      "Whether it's a one-page marketing website, an e-commerce or a launch on social, I have helped clients get all three and know how to take your idea from prototype to the final product.",
+  },
+];
+
 export const Expertise: React.FC = () => {
   return (
-    <div className="bg-black container-x-padding flex flex-col py-20">
-      <div className="w-full flex flex-col lg:flex-row text-white gap-16">
-        <TitleAndCopy title="Brand Strategy" variant="light">
-          <p className="text-regular">
-            Working with businesses{"'"} to create or improve their identities,
-            creating harmonious and consistent brands on multiple levels by
-            habilitating people to tell their unique story.
-          </p>
-        </TitleAndCopy>
-
-        <TitleAndCopy title="Packaging" variant="light">
-          <p className="text-regular">
-            Moulding your brand to coherent packaging and label design, from
-            studying the design to preparing technical artwork, I create bespoke
-            solutions for primary, secondary and tertiary packaging.
-          </p>
-        </TitleAndCopy>
-
-        <TitleAndCopy title="UX/UI & Digital" variant="light">
-          <p className="text-regular">
-            Whether it{"'"}s a one-page marketing website, an e-commerce or a
-            launch on social, I have helped clients get all three and know how
-            to take your idea from prototype to the final product.
-          </p>
-        </TitleAndCopy>
+    <div className="bg-black container-x-padding flex flex-col py-20 lg:pb-20">
+      <div className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12 xl:gap-24 3xl:gap-36">
+        {items.map((item, index) => (
+          <TitleAndCopy key={index} title={item.title} variant={item.variant}>
+            <p className="text-regular text-white">{item.description}</p>
+          </TitleAndCopy>
+        ))}
       </div>
     </div>
   );