Merge pull request #29 from davidwrossiter/dev-merger

update landing page to reflect figma changes

src/App.jsx

@@ -4,6 +4,7 @@ import Home from "./pages/Home";
 import Header from "./components/Header";
 import TermsOfService from "./pages/TermsOfService";
 import Privacy from "./pages/Privacy";
+
 function App() {
   const location = useLocation();
   useEffect(() => {

src/blocks/FAQ.jsx

@@ -9,25 +9,146 @@ function FAQ() {
       id="faq"
     >
       <p className="font-bold lg:text-[36px] text-orin-black text-2xl leading-7 pb-6 lg:pb-10">
-        Frequently Asked Questions
+        What are some examples of a request?
       </p>
       <div className="flex flex-col md:flex-row gap-6 justify-start w-full md:basis-0">
         <div className="flex flex-col md:flex-grow">
+          <AQ
+            question="Do you offer a refund if I don’t like the service?"
+            // answer="We don’t offer refunds but you can cancel at any time."
+            answer={
+              <div className="flex flex-col mt-2">
+                <p className="mb-8">
+                  A request can cover a wide range of UI design tasks. Here are
+                  some examples:
+                </p>
+                <p className="font-bold mb-2">Website Redesign</p>
+                <p className="mb-4">
+                  ‘I need a complete redesign of my e-commerce website to
+                  improve user experience and increase conversion rates.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Mobile App UI</p>
+                <p className="mb-4">
+                  ‘I need the user interface for our new mobile app designed,
+                  ensuring it is intuitive and visually appealing for both iOS
+                  and Android platforms.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Dashboard Design</p>
+                <p className="mb-4">
+                  ‘I need a user-friendly dashboard for our analytics platform,
+                  making complex data easy to understand and interact with.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Component Library Design</p>
+                <p className="mb-4">
+                  ‘I need a comprehensive UI component library for our internal
+                  design system to maintain consistency across our products.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Prototyping</p>
+                <p className="mb-4">
+                  ‘We need high-fidelity prototypes for our new feature to test
+                  user interactions and gather feedback before development.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">User Flow Diagrams</p>
+                <p className="mb-4">
+                  ‘We need detailed user flow diagrams for our onboarding
+                  process to streamline the user journey and improve
+                  engagement.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Responsive Design</p>
+                <p className="mb-4">
+                  ‘We need to ensure our current website is fully responsive and
+                  optimised for various devices and screen sizes.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Micro-Interactions</p>
+                <p className="mb-4">
+                  ‘We need to design engaging micro-interactions to enhance user
+                  experience and provide feedback during user interactions.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Landing Page Design</p>
+                <p className="mb-4">
+                  ‘We need a high-converting landing page for our upcoming
+                  product launch, focusing on clear call-to-actions and
+                  compelling visuals.’
+                </p>
+                {/*  */}
+                <p className="font-bold mb-2">Accessibility Improvements</p>
+                <p className="mb-4">
+                  ‘We need to review and redesign our website to meet
+                  accessibility standards, ensuring it is usable by all users,
+                  including those with disabilities.’
+                </p>
+              </div>
+            }
+          />
           <AQ
             question="How many requests can I have?"
-            answer="You can submit as many requests as you like. We will deliver them one at a time."
+            answer="You can submit as many requests as you like. Larger requests like a ‘Component Library Design’ or ‘Website Redesign’ will be broken down into smaller tasks that will be delivered one at a time."
+          />
+          <AQ
+            question="How do I submit a request?"
+            answer="Once you subscribe, you'll get access to a dedicated Trello board where you can add and track your requests. We’ll help you break larger requests down into smaller tasks on your Trello board. You won’t be left to figure it out alone; we're here to help every step of the way."
           />
           <AQ
-            question="When will I get my designs?"
-            answer="It takes 48 hours on average to complete a request."
+            question="When will I receive my designs?"
+            answer="On average we will deliver designs for review within 2 business days."
+          />
+          <AQ
+            question="What program do you use to design?"
+            answer="We use Figma for all our design work."
           />
           <AQ
             question="What if I don’t like the design?"
-            answer="We will keep iterating until you are 100% happy with the design."
+            answer="We will keep iterating until you are 100% happy."
           />
           <AQ
             question="What if I only have a single request?"
-            answer="That's fine. You can pause your subscription when finished and return when you have additional design needs. There's no need to let the remainder of your subscription go to waste."
+            answer="You can pause your subscription and return when you have additional design needs."
+          />
+          <AQ
+            question="What kind of clients do you work with?"
+            answer={
+              <div className="flex flex-col">
+                <p className="mb-4">
+                  Typical clients include any of the following:
+                </p>{" "}
+                <ul className="list-disc pl-4">
+                  <li className="mb-2">
+                    <p className="font-bold">Startups</p>
+                    <p>
+                      Example: Startups with only technical founders who need
+                      high quality design delivered fast.
+                    </p>
+                  </li>
+                  <li className="mb-2">
+                    <p className="font-bold">Retail/E-Commerce</p>
+                    <p>
+                      Example: You Require continuous UI design support to keep
+                      your website and mobile app visually appealing and
+                      user-friendly. You frequently launch new product lines and
+                      promotions, requiring regular updates to you digital
+                      interfaces.
+                    </p>
+                  </li>
+                  <li className="mb-2">
+                    <p className="font-bold">Financial Services</p>
+                    <p>
+                      Example: You provide financial advisory services and need
+                      a user-friendly client portal and mobile app to manage
+                      client accounts, provide financial insights, and
+                      communicate with clients securely.
+                    </p>
+                  </li>
+                </ul>
+              </div>
+            }
           />
           <AQ
             question="Do you offer a refund if I don’t like the service?"

src/blocks/Features.jsx

@@ -2,8 +2,8 @@ import React from "react";
 import HowItWorksEl from "../components/HowItWorksEl";
 function Features() {
   return (
-    <div id="features" className="py-10 xl:py-20 max-w-[1156px]">
-      <h3 className="pb-8 text-2xl leading-[28px] lg:pb-10 font-bold lg:text-[36px]">
+    <div id="features" className="py-10 xl:py-20 max-w-[1156px] flex flex-col items-center">
+      <h3 className="pb-8 text-2xl leading-[28px] lg:pb-10 font-bold lg:text-[36px] lg:leading-[48px]">
         Benefits
       </h3>
       <div className="flex flex-col sm:flex-row">
@@ -21,6 +21,7 @@ function Features() {
           description="Manage your own tasks using a dedicated task board."
           hasTopMargin={true}
         />
+
       </div>
     </div>
   );

src/blocks/Hero.jsx

@@ -5,30 +5,28 @@ import HeroRight from "../../public/components/HeroRight";
 function Hero() {
   //
   return (
-    <div className="font-inter py-10 md:pt-[104px] w-full max-w-[1158px] flex flex-col xl:flex-row xl:items-start xl:justify-between">
-      <div className="mr-16">
-        <h1 className="max-w-[648px] pb-4 text-[36px] leading-10 font-bold text-orin-black text-wrap md:text-[48px] md:leading-[48px]">
+    <div className="font-inter py-10 md:py-[104px] w-full max-w-[1158px] flex flex-col xl:flex-row xl:items-start xl:justify-between">
+      <div className="mr-16 w-full flex justify-center flex-col items-start md:items-center">
+        <h1 className="max-w-[800px] md:text-center pb-4 text-[36px] leading-10 font-bold text-orin-black text-wrap md:text-[48px] md:leading-[48px]">
           Quality{" "}
           <span className="text-orin-blue">
-            <br className="sm:hidden" />
-            UI Design
-            <br className="sm:hidden" />
-          </span>{" "}
+            {/* <br className="sm:hidden" /> */}
+            design
+            {/* <br className="sm:hidden" /> */}
+          </span>
+          ,
+          <br />
           delivered fast and affordably.
         </h1>
-        <p className="text-orin-grey max-w-[450px]">
-          Scalable, flexible UI design support you can pause or cancel at
-          anytime.
+        <p className="text-orin-grey md:text-center max-w-[600px]">
+          Orin Design is a subscription-based design agency that offers a
+          consistent, high-quality design service with the flexibility to pause
+          or cancel at any time.
         </p>
-        <div className="flex flex-row gap-2 leading-[14px] text-sm font-medium py-6 xl:py-10">
+        <div className="flex flex-row gap-2 leading-[14px] text-sm font-medium mb-4 py-6 xl:py-10">
           <a href="#memberships">
-            <button className="px-6 py-3 sm:py-4 rounded-lg border-[1.4px] border-orin-black bg-orin-black text-white hover:bg-[#404245] active:bg-[#606469]">
-              View Plans
-            </button>
-          </a>
-          <a href="#faq">
-            <button className="px-6 py-3 sm:py-4 rounded-lg border-[1.4px] border-orin-black hover:bg-[#EFEFEF] active:bg-[#E0DCDC]">
-              Read FAQ's
+            <button className="px-6 py-3 sm:py-3 rounded-lg border-[1.4px] border-orin-black bg-orin-black text-white hover:bg-[#404245] active:bg-[#606469]">
+              Book a call
             </button>
           </a>
         </div>

src/blocks/HowItWorks.jsx

@@ -3,28 +3,28 @@ import HowItWorksEl from "../components/HowItWorksEl";
 
 function HowItWorks() {
   return (
-    <div id="how-it-works" className="pb-10 xl:pb-20 max-w-[1156px]">
-      <h3 className="pb-8 text-2xl leading-[28px] lg:pb-10 font-bold lg:text-[36px]">
-        How it works
+    <div id="how-it-works" className="py-10 xl:py-20 max-w-[1156px]">
+      <h3 className="pb-8 text-2xl text-center leading-[28px] lg:pb-10 font-bold lg:text-[36px] lg:leading-[48px]">
+        How we work
       </h3>
       <div className="flex flex-col sm:flex-row">
         <HowItWorksEl
           title="Subscribe"
           description="Choose a subscription plan that suits your requirements."
         />
         <HowItWorksEl
-          title="Request"
+          title="Submit Requests"
           description="Submit as many requests as you’d like."
           hasTopMargin={true}
         />
         <HowItWorksEl
-          title="Receive"
-          description="Receive one request at a time, usually within 2 business days."
+          title="Review"
+          description="We’ll deliver one request at a time usually within 48 hours."
           hasTopMargin={true}
         />
         <HowItWorksEl
-          title="Happy"
-          description="We revise until you're 100% satisfied."
+          title="Iterate"
+          description="We’ll iterate on your designs until you're 100% satisfied."
           hasTopMargin={true}
         />
       </div>

src/blocks/MemberBen.jsx

@@ -4,37 +4,37 @@ import HowItWorksEl from "../components/HowItWorksEl";
 function MemberBen() {
   return (
     <div className="py-10 xl:py-20 max-w-[1156px] lg:py-20">
-      <h4 className="pb-6 lg:pb-10 text-2xl lg:text-[36px] leading-[28px] font-bold">
+      <h4 className="pb-6 lg:pb-10 text-center text-2xl lg:text-[36px] leading-[28px] font-bold lg:leading-[48px]">
         Member benefits
       </h4>
       <div className="flex flex-col sm:flex-row flex-wrap">
         <HowItWorksEl
-          title="Consistency"
-          description="Ensure a unified look and feel across all you digital products."
+          title="Predictable Costs"
+          description="You pay the same fixed price every month, simplify budgeting and planning."
         />
         <HowItWorksEl
-          title="Efficiency"
-          description="Streamline your design and development process with reusable components."
+          title="Flexible Subscription"
+          description="Upgrade, downgrade, pause or cancel your subscription at any time."
           hasTopMargin={true}
         />
         <HowItWorksEl
-          title="Collaboration"
-          description="Enhance communication between designers and developers."
+          title="Ongoing Support"
+          description="Creative design solutions tailored to your evolving business needs."
           hasTopMargin={true}
         />
         <HowItWorksEl
-          title="Quality"
-          description="Maintain high standards across all designs and improves the overall user experience."
+          title="Reduced Risk"
+          description="Reduces the risk of hiring and managing an in-house team."
           hasTopMargin={true}
         />
         <HowItWorksEl
-          title="Maintainability"
-          description="Reduce design and technical debt by standardising components."
+          title="Sustainable Growth"
+          description="Fosters long-term relationships and sustainable growth."
           hasTopMargin={true}
         />
         <HowItWorksEl
-          title="Brand Integrity"
-          description="Reinforce brand identity consistently across different platforms."
+          title="Efficient"
+          description="Streamlined workflows and quicker turnaround times for design requests."
           hasTopMargin={true}
         />
       </div>

src/blocks/ReviewBlock.jsx

@@ -3,8 +3,8 @@ import Review from "../components/Review";
 function ReviewBlock() {
   // name, jobTitle, description, iconSrc
   return (
-    <div className="py-10 xl:py-20 w-full max-w-[1156px] font-inter">
-      <h3 className="font-bold text-2xl lg:text-[36px] leading-7 pb-6 lg:pb-10">
+    <div className="py-10 xl:py-20 w-full max-w-[1156px] font-inter flex flex-col items-center">
+      <h3 className="font-bold text-2xl lg:text-[36px] leading-7 pb-6 lg:pb-10 lg:leading-[48px]">
         What others have said
       </h3>
       <div className="flex flex-col md:flex-row">
@@ -18,7 +18,7 @@ function ReviewBlock() {
         <Review
           name="Brandon"
           jobTitle="Director - Rethink"
-          description="Warren’s commitment to excellence and his collaborative spirit made him an invaluable asset to our team."
+          description="Warren is a highly experienced UX/UI designer whose passion, skill and dedication are evident in every project he undertakes."
           iconSrc="../../icons/brandon.svg"
         />
       </div>