Merge pull request #15 from armenmerzaian/mods

modifications

package.json

@@ -14,7 +14,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "gatsby": "^4.24.1",
+    "gatsby": "^4.25.6",
     "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-image": "^2.16.1",
     "gatsby-plugin-manifest": "^4.15.0",

src/components/ActionCard.js

@@ -16,18 +16,18 @@ export default function ActionCard({image, title, text}) {
         id="action-card-text"
         className="p-6 flex flex-col justify-between laptop:self-stretch laptop:h-full"
       >
-        <h3 className="text-primary-55 text-lg laptop:text-xl !font-light text-left tablet:text-left">
+        <h3 className="text-primary-55 text-lg laptop:text-xl !font-semibold text-left tablet:text-left">
           {title}
         </h3>
-        <p className="text-tertiary-light/87 font-light !text-sm laptop:text-lg text-left mt-1 mb-4">
+        <p className="text-tertiary-light/87 font-light !text-sm laptop:!text-lg text-left mt-1 mb-4">
           {text}
         </p>
         <div className="hidden tablet:block !text-sm">
           <ActionButton
             label="Learn more"
             trailingIcon={true}
             to="/services"
-            fontSize="text-sm"
+            fontSize="text-lg"
             padding="py-[6px] px-[12px]"
           />
         </div>

src/components/BreadCrumb.js

@@ -5,7 +5,7 @@ export default function BreadCrumb({crumbs}) {
 
   return (
     <div className="hidden laptop:block fixed z-10 top-[98px] left-0 right-0 h-12 py-3 border-b-2 border-neutral-20 bg-secondary-dark">
-      <div className="text-tertiary-light/87 font-light text-sm leading-6 space-x-2 max-w-[1200px] mx-auto">
+      <div className="text-tertiary-light/87 font-light text-base leading-6 space-x-2 max-w-[1088px] desktop:max-w-[1204px] mx-auto">
         {crumbs.map((crumb, key) => {
           return (
             <>

src/components/Hero.js

@@ -5,17 +5,17 @@ import HeroImage from "../components/HeroImage";
 
 export default function Hero({subtitle, img, jumpLink, dblBtn, children, mobileSubtitle}) {
   return (
-    <div className="max-w-[1204px] mt-10 mx-auto">
-      <div className="laptop:flex flex-row-reverse laptop:justify-between gap-[127px] space-y-12 tablet:space-y-14">
+    <div className="max-w-[1088px] desktop:max-w-[1204px] mt-10 mx-auto">
+      <div className="laptop:flex flex-row-reverse laptop:justify-between gap-[70px] space-y-12 tablet:space-y-14">
         <HeroImage img={img} />
-        <div className="laptop:self-center max-w-[705px] mx-auto">
-          <div className="w-fit laptop:px-0 mx-auto">
+        <div className="laptop:self-center mx-auto laptop:mx-0 max-w-[705px]">
+          <div className="w-fit mx-auto laptop:px-0">
             {children}
             <p
               className={
                 subtitle && mobileSubtitle === false
-                  ? "hidden text-tertiary-light/60 tablet:block laptop:inline-block mx-auto w-fit text-center laptop:text-left text-lg font-light laptop:text-xl mb-12 tablet:w-[545px] desktop:w-[673px]"
-                  : "text-tertiary-light/60 tablet:block laptop:inline-block mx-auto w-fit text-center laptop:text-left text-lg font-light laptop:text-xl mb-12 tablet:w-[545px] desktop:w-[673px]"
+                  ? "hidden text-tertiary-light/60 tablet:block laptop:inline-block mx-auto w-fit text-center laptop:text-left text-lg font-light laptop:text-xl mb-12 tablet:w-[545px] laptop:w-[673px]"
+                  : "text-tertiary-light/60 tablet:block laptop:inline-block mx-auto w-fit text-center laptop:text-left text-lg font-light laptop:text-xl mb-12 tablet:w-[545px] laptop:w-[673px]"
               }
             >
               {subtitle}
@@ -33,18 +33,21 @@ export default function Hero({subtitle, img, jumpLink, dblBtn, children, mobileS
           </div>
         </div>
       </div>
-      <div className="w-fit mx-auto mt-10 p-1 !rounded-full laptop:border border-primary-55 animate-bounce">
+      <div className="w-fit mx-auto mt-10 p-2 desktop:p-4 !rounded-full laptop:border-2 border-primary-55 animate-bounce">
         <Link to={jumpLink}>
-          {/* <span className="material-icons text-5xl text-primary-55">
-            expand_more
-          </span> */}
           <svg
-            fill="rgb(255 244 26)"
+            className="flex-shrink-0 m-1 w-5 h-5 desktop:scale-150 transition duration-400 group-open:-rotate-180"
             xmlns="http://www.w3.org/2000/svg"
-            height="48"
-            width="48"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="#FFF41A"
           >
-            <path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="4"
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         </Link>
       </div>

src/components/HeroImage.js

@@ -2,11 +2,11 @@ import React from 'react'
 
 export default function HeroImage({img}) {
   return (
-    <div className="max-h-[585px] laptop:w-[330px] laptop:max-w-[330px]">
+    <div className="max-h-[585px] laptop:w-[310px] laptop:max-w-[310px]">
       <img
         src={img}
         alt="hero"
-        className="object-cover w-full !laptop:w-[330px] !laptop:max-w[330px] max-h-[528px] tablet:max-h-[585px] tablet:h-[528px] laptop:h-[585px] rounded-[16px] tablet:rounded-[24px] laptop:rounded-[40px]"
+        className="object-cover w-full !laptop:w-[310px] !laptop:max-w[310px] max-h-[528px] tablet:max-h-[585px] tablet:h-[528px] laptop:h-[465px] desktop:h-[585px] rounded-[16px] tablet:rounded-[24px] laptop:rounded-[40px]"
       />
     </div>
   );

src/components/IconCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function IconCard({ children, title, text }) {
   return (
-    <div className="tablet:max-w-[400px] laptop:max-w-[273px]">
+    <div className="tablet:max-w-[400px] laptop:max-w-[273px] pr-8">
       <div className="text-primary-65 mb-[20px]">{children}</div>
       <div className="text-primary-65 text-lg font-regular">{title}</div>
       <div className="text-sm font-light leading-6 text-tertiary-light/87">{text}</div>

src/components/Navigation.js

@@ -9,7 +9,7 @@ export default function Navigation() {
   }
   return (
     <div className="text-tertiary-light/87 py-4 desktop:px-[120px] items-center fixed z-10 top-0 left-0 right-0 bg-secondary-dark border-b-2 border-neutral-20">
-      <div className="flex justify-between w-full mx-auto max-w-[1200px] px-4 laptop:px-0">
+      <div className="flex justify-between w-full mx-auto max-w-[1088px] desktop:max-w-[1204px] px-4 laptop:px-0">
         <Link to="/" className="shrink-0 h-fit my-auto">
           <img
             src="images/navbar-brand.svg"

src/components/NumberedCard.js

@@ -6,10 +6,10 @@ export default function NumberedCard({children, number, title, text}) {
       <div className="absolute text-center w-fit mx-auto inset-x-0 -top-5 py-1 px-[0.92rem] text-[23px] rounded-full bg-primary-65 text-secondary-dark">
         {number}
       </div>
-      <div className="mt-[4.5rem] text-center tablet:text-left laptop:text-center px-6">
+      <div className="mt-[4.5rem] text-center  px-6">
         <div className="text-primary-65">{children}</div>
-        <h1 className="px-8 mt-4 tablet:px-0 text-xl font-regular text-primary-65">{title}</h1>
-        <p className="mt-1 px-4 tablet:px-0 text-sm font-light leading-6 text-tertiary-light/87">{text}</p>
+        <h1 className="px-8 mt-4 tablet:px-0 text-xl font-semibold text-primary-65">{title}</h1>
+        <p className="mt-1 px-4 tablet:px-0 text-lg font-light leading-8 text-tertiary-light/87">{text}</p>
       </div>
     </div>
   );

src/components/ReviewCardCarousel.js

@@ -13,7 +13,7 @@ export default function ReviewCardCarousel() {
     {
       name: "Duane M",
       img: "images/profile.png",
-      text: "I have had almost every single one of the pictures in my house framed by Aris and some have been dry mounted. If it can be done and done right, this is the place to have it done. Nothing is too difficult, nothing is impossible.",
+      text: "I have had almost every single one of the pictures in my house framed by Aris and some have been dry mounted. If it can be done and done right, this is the place to have it done.",
     },
     {
       name: "[NAME]",
@@ -38,7 +38,7 @@ export default function ReviewCardCarousel() {
   ];
 
   return (
-    <div className="max-w-[1200px] mx-auto">
+    <div className="max-w-[1088px] desktop:max-w-[1200px] mx-auto">
       <div className={slide === 0 ? "" : "hidden"}>
         <div className="hidden laptop:block">
           <div className="flex gap-8 relative">

src/components/ServicesTabbed.js

@@ -11,7 +11,7 @@ export default function ServicesTabbed() {
   return (
     <div
       id="services-offered"
-      className="w-[792px] mx-auto px-[49px] py-6 bg-surface-1 rounded-2xl"
+      className="laptop:w-[902px] desktop:w-[998px] mx-auto px-[49px] py-6 bg-surface-1 rounded-2xl"
     >
       <div className="">
         <div id="tab-buttons" className="border-b border-neutral-20">
@@ -100,9 +100,9 @@ export default function ServicesTabbed() {
 
 function TabbedCard({title, text}) {
     return (
-        <div className="p-6 bg-surface-3 rounded-xl max-w-[331px] h-[160px] space-y-2">
+        <div className="p-6 bg-surface-3 rounded-xl w-full min-h-fit space-y-2">
             <h1 className="text-xl leading-8 font-regular text-primary-55">{title}</h1>
-            <p className="text-base leading-6 font-light text-tertiary-light/87">{text}</p>
+            <p className="text-lg leading-8 font-light text-tertiary-light/87">{text}</p>
         </div>
     )
 }

src/components/SubscribeForm.js

@@ -19,7 +19,7 @@ export default function SubscribeForm() {
       <div className="w-full">
         <label
           htmlFor="emailInput"
-          className="text-sm leading-6 text-tertiary-light"
+          className="text-base leading-6 text-tertiary-light"
         >
           Email Address
         </label>
@@ -29,13 +29,13 @@ export default function SubscribeForm() {
           name="emailInput"
           id="emailInput"
           placeholder="Please enter your email"
-          className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-sm text-tertiary-light/87"
+          className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-base text-tertiary-light/87"
           required
         />
       </div>
       <button
         onClick={(e) => submit(e)}
-        className="py-1.5 px-3 laptop:py-2 laptop:px-4 bg-primary-55 hover:bg-primary-65 active:bg-primary-75 text-secondary-dark rounded-full self-end tablet:self-start laptop:self-start text-base laptop:text-lg"
+        className="py-1.5 px-3 laptop:py-2 laptop:px-4 bg-primary-55 hover:bg-primary-65 active:bg-primary-75 text-secondary-dark rounded-full self-end tablet:self-start laptop:self-start text-base font-semibold laptop:text-lg"
       >
         Subscribe
       </button>

src/components/ValuesIconCard.js

@@ -2,17 +2,17 @@ import React from 'react'
 
 export default function ValuesIconCard({icon, value, text, font, children}) {
   return (
-    <div className={"flex flex-col items-center tablet:items-start laptop:items-start bg-surface-1 w-full rounded-2xl gap-6 p-4 pt-8 tablet:p-6 tablet:pt-10 laptop:p-8 laptop:pt-12 tablet:min-w-[556px] tablet:max-w-[981px] tablet:mx-auto"}>
+    <div className="flex flex-col items-center tablet:items-start laptop:items-start bg-surface-1 w-full rounded-2xl gap-6 p-4 pt-8 tablet:p-6 tablet:pt-10 laptop:p-8 laptop:pt-12 tablet:max-w-[611px] laptop:max-w-[981px] tablet:mx-auto">
       <span
         class="text-primary-65 text-5xl laptop:text-6xl"
       >
         {children}
       </span>
       <div className="text-center tablet:text-left space-y-1">
-        <h2 className="text-lg font-regular tablet:text-xl laptop:text-2xl text-primary-65">
+        <h2 className="text-lg font-regular laptop:text-xl text-primary-65">
           {value}
         </h2>
-        <p className="text-sm font-light tablet:text-base laptop:text-lg text-tertiary-light/87">
+        <p className="text-base leading-6 font-light tablet:text-base laptop:text-lg text-tertiary-light/87">
           {text}
         </p>
       </div>

src/layout/BenefitsCustom.js

@@ -8,7 +8,7 @@ export default function BenefitsCustom() {
       <SectionTitle text="Benefits of Custom Framing" />
       <div
         id="icon-card-group"
-        className="grid grid-cols-2 laptop:grid-cols-4 gap-4 laptop:gap-12 mt-28 w-fit mx-auto"
+        className="grid grid-cols-2 laptop:grid-cols-4 gap-4 laptop:gap-12 mt-28 w-fit mx-auto max-w-[1088px] desktop:max-w-[1204px]"
       >
         <IconCard
           className=""

src/layout/ContactForm.js

@@ -43,13 +43,13 @@ export default function ContactForm() {
             name="first_name"
             id="first_name"
             placeholder="Enter your first name"
-            className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-sm text-tertiary-light h-7 order-3 justify-start"
+            className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-base text-tertiary-light h-7 order-3 justify-start"
             required
             minLength={2}
           />
           <label
             htmlFor="first_name"
-            className="text-sm leading-6 text-tertiary-light order-1"
+            className="text-base leading-6 text-tertiary-light order-1"
           >
             First Name
           </label>
@@ -60,13 +60,13 @@ export default function ContactForm() {
             name="last_name"
             id="last_name"
             placeholder="Enter your last name"
-            className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-sm text-tertiary-light h-7 order-3"
+            className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-base text-tertiary-light h-7 order-3"
             required
             minLength={2}
           />
           <label
             htmlFor="last"
-            className="text-sm leading-6 text-tertiary-light order-1"
+            className="text-base leading-6 text-tertiary-light order-1"
           >
             Last Name
           </label>
@@ -77,13 +77,13 @@ export default function ContactForm() {
             name="email"
             id="emailInput"
             placeholder="Enter your email"
-            className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-sm text-tertiary-light h-7 order-3"
+            className="bg-transparent border-x-0 border-t-0 border-b appearance-none w-full pl-0 text-base text-tertiary-light h-7 order-3"
             required
             pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
           />
           <label
             htmlFor="emailInput"
-            className="text-sm leading-6 text-tertiary-light order-1"
+            className="text-base leading-6 text-tertiary-light order-1"
           >
             Email
           </label>
@@ -94,13 +94,13 @@ export default function ContactForm() {
             name="tel_number"
             id="tel_number"
             placeholder="Enter your phone number"
-            className="bg-transparent border-x-0 border-t-0 border-b appearance-none pl-0 text-sm text-tertiary-light h-7 order-3"
+            className="bg-transparent border-x-0 border-t-0 border-b appearance-none pl-0 text-base text-tertiary-light h-7 order-3"
             required
             pattern="^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$"
           />
           <label
             htmlFor="tel_number"
-            className="text-sm leading-6 text-tertiary-light order-1"
+            className="text-base leading-6 text-tertiary-light order-1"
           >
             Phone
           </label>
@@ -109,13 +109,13 @@ export default function ContactForm() {
           <textarea
             type="text"
             name="message"
-            className="w-full bg-transparent rounded-lg mt-1 text-sm resize-none h-[179px] order-2 text-tertiary-light"
+            className="w-full bg-transparent rounded-lg mt-1 text-base resize-none h-[179px] order-2 text-tertiary-light"
             placeholder="Send us a message..."
             required
             maxLength={300}
             minLength={20}
           />
-          <label className="laptop:col-span-full text-sm leading-6 text-tertiary-light order-1">
+          <label className="laptop:col-span-full text-base leading-6 text-tertiary-light order-1">
             Message
           </label>
         </div>
@@ -170,7 +170,7 @@ function ErrorModal({ errorModalShow, setErrorModalShow}) {
         <h3 className="text-primary-55 text-xl leading-8 font-bold text-center mb-2">
           Oops!
         </h3>
-        <p className="text-center text-tertiary-light/87 text-sm laptop:text-base px-[12px] leading-loose mb-5">
+        <p className="text-center text-tertiary-light/87 text-base laptop:text-base px-[12px] leading-loose mb-5">
           Your form could not be submitted.{" "}
           <span className="block">Try again later.</span>
         </p>

src/layout/FAQs.js

@@ -8,7 +8,7 @@ export default function FAQs() {
       <SectionTitle text="FAQs" />
       <div
         id="according-stack"
-        className="mt-12 space-y-4 max-w-[996px] mx-auto"
+        className="mt-12 space-y-4 max-w-[902px] desktop:max-w-[996px] mx-auto"
       >
         <Accordion
           question="What are the benefits of custom framing?"

src/layout/HowWeDo.js

@@ -8,7 +8,7 @@ export default function HowWeDo() {
       <SectionTitle text="How We Do Things" />
       <div
         id="numbered-card-stack"
-        className="mt-16 flex flex-col tablet:flex-row gap-10 items-center tablet:justify-center tablet:mx-8 tablet:gap-6 laptop:gap-8"
+        className="mt-16 flex flex-col tablet:flex-row gap-10 items-center tablet:justify-center tablet:mx-8 tablet:gap-6 laptop:gap-8 laptop:max-w-[1088px] desktop:max-w-[1204px] laptop:mx-auto"
       >
         <NumberedCard
           number="1"
@@ -19,7 +19,7 @@ export default function HowWeDo() {
             xmlns="http://www.w3.org/2000/svg"
             height="48"
             width="48"
-            className="mx-auto tablet:ml-0 tablet:mr-auto laptop:mx-auto"
+            className="mx-auto"
             fill="#fff64d"
           >
             <path d="M7 43.95q-1.2 0-2.1-.875Q4 42.2 4 40.95V11q0-1.2.9-2.1Q5.8 8 7 8h9l6.95-7q.4-.4 1.05-.4t1.05.4L32 8h9q1.2 0 2.1.9.9.9.9 2.1v29.95q0 1.25-.9 2.125t-2.1.875Zm0-3h34V11H7v29.95Zm6.5-5q-.65 0-1.075-.425Q12 35.1 12 34.45V17.5q0-.65.425-1.075Q12.85 16 13.5 16h21q.65 0 1.075.425Q36 16.85 36 17.5v16.95q0 .65-.425 1.075-.425.425-1.075.425Z" />
@@ -38,7 +38,7 @@ export default function HowWeDo() {
             height="48"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 24 24"
-            className="mx-auto tablet:ml-0 tablet:mr-auto laptop:mx-auto"
+            className="mx-auto"
           >
             <path
               fill="#fff64d"
@@ -59,7 +59,7 @@ export default function HowWeDo() {
             height="48"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 24 24"
-            className="mx-auto tablet:ml-0 tablet:mr-auto laptop:mx-auto"
+            className="mx-auto"
           >
             <path
               fill="#fff64d"