SebastianStankiewicz · gilgongo · Sep 30, 2024 · Oct 1, 2024 · Oct 1, 2024 · Oct 1, 2024
diff --git a/README.md b/README.md
@@ -2,3 +2,4 @@
 
 -Tailwind with Daisy ui, framer motion, react router
 
+npm run dev -- --host
diff --git a/index.html b/index.html
@@ -2,9 +2,18 @@
 <html data-theme="customTheme" lang="en">
   <head>
     <meta charset="UTF-8" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     <title>Baker-Bates PR</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/graphics/favicon/favicon.ico?v=2" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Sixtyfour+Convergence&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Holtwood+One+SC&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Red+Rose:wght@300..700&family=Sixtyfour+Convergence&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Fjalla+One&family=Holtwood+One+SC&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Red+Rose:wght@300..700&family=Sixtyfour+Convergence&display=swap" rel="stylesheet">
+
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/graphics/favicon/android-chrome-192x192.png b/public/graphics/favicon/android-chrome-192x192.png
diff --git a/public/graphics/favicon/android-chrome-512x512.png b/public/graphics/favicon/android-chrome-512x512.png
diff --git a/public/graphics/favicon/apple-touch-icon.png b/public/graphics/favicon/apple-touch-icon.png
diff --git a/public/graphics/favicon/favicon-16x16.png b/public/graphics/favicon/favicon-16x16.png
diff --git a/public/graphics/favicon/favicon-32x32.png b/public/graphics/favicon/favicon-32x32.png
diff --git a/public/graphics/favicon/favicon.ico b/public/graphics/favicon/favicon.ico
diff --git a/src/components/Clients.jsx b/src/components/Clients.jsx
@@ -16,9 +16,6 @@ import houseOfCommons from "../companyLogos/houseOfCommons.png"
 const Clients = () => {
   return (
     <>
-    <div className="text-3xl font-semibold text-center mb-6 text-transparent bg-clip-text bg-[#001b36]">
-            Previous Clients
-        </div>
     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-4">
       <div className="flex justify-center items-center">
         <img src={Aardman} alt="Aardman" className="h-24 object-contain" />

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -12,7 +12,7 @@ const Footer = () => {
 
 <footer className="footer footer-center bg-primary text-primary-content p-10">
   <aside>
-  <img src={bakerBatesLogo} alt="Baker bates" className="h-24 object-contain invert" />
+  <img src={bakerBatesLogo} alt="BakerBates PR logo" className="h-24 object-contain invert" />
     <p className="font-bold">
       Baker Bates PR
       <br />

diff --git a/src/components/WelcomeHero.jsx b/src/components/WelcomeHero.jsx
@@ -12,9 +12,9 @@ const WelcomeHero = () => {
       >
 
         <div className="hero-content justify-center text-neutral-content text-center flex-col lg:flex-row-reverse items-center">
-          <img src={headShot} className="max-w-sm rounded-full shadow-2xl " />
+          <img src={headShot} className="max-w-sm rounded-full shadow-2xl " alt="Photo of Harriet wearing glasses." />
           <div className="max-w-md ">
-            <h1 className="mb-5 text-5xl text-transparent font-bold bg-gradient-to-r from-[#001f3f] via-[#001b36] to-[#001732] bg-clip-text ">
+            <h1 className="mb-5 text-5xl text-transparent font-bold bg-clip-text ">
               Communications, Marketing, PR and Media Relations
             </h1>
             <p className="mb-5 text-2xl font-semibold text-transparent bg-clip-text bg-[#001b36] ">

diff --git a/src/components/pageFiller/GetInTouch.jsx b/src/components/pageFiller/GetInTouch.jsx
@@ -8,7 +8,7 @@ const GetInTouch = () => {
   return (
     <div className="card image-full lg:card-side bg-base-100 shadow-xl ">
       <figure>
-        <img src={cows} alt="Cows" />
+        <img src={cows} alt="Photo of a herd of cows crossing a road on a sunny afternoon." />
       </figure>
       <div className="card-body">
         <h2 className="card-title text-8xl">Get in touch</h2>

diff --git a/src/components/serviceCarousel/ServiceCard.jsx b/src/components/serviceCarousel/ServiceCard.jsx
@@ -10,7 +10,7 @@ const ServiceCard = ({ title, description, icon, longDescription }) => {
         className="card bg-neutral w-96 shadow-sm rounded-lg border border-primary"
       >
         <figure className="text-3xl mt-4">{icon}</figure>
-        <div className="card-body items-center text-center">
+        <div className="card-body items-center">
           <h2 className="card-title">{title}</h2>
           <p>{description}</p>
           <div className="card-actions">

diff --git a/src/components/serviceGrid/serviceCard.jsx b/src/components/serviceGrid/serviceCard.jsx
@@ -5,7 +5,7 @@ const ServiceCard = ({title, description}) => {
   return (
     <>
       <motion.div className="card bg-neutral w-96 shadow-sm rounded-lg border border-primary">
-        <div className="card-body items-center text-center">
+        <div className="card-body items-center">
           <h2 className="card-title">{title}</h2>
           <p dangerouslySetInnerHTML={{ __html: description }} />
         </div>

diff --git a/src/index.css b/src/index.css
@@ -2,5 +2,124 @@
 @tailwind components;
 @tailwind utilities;
 
+.min-h-screen {
+    min-height: 50vh;
+}
 
+.bg-neutral {
+    --tw-bg-opacity: 1;
+    background-color: #e5e6e6;
+}
 
+.text-5xl {
+    font-size: 3rem;
+    line-height: 1.3;
+
+    color: #D7D55B;
+    text-shadow: 2px 2px 4px #414141;
+
+    font-family: "Fjalla One", serif;
+    font-optical-sizing: auto;
+    font-weight: 700;
+    font-style: normal;
+    font-variation-settings:
+      "slnt" 0;
+}
+
+.text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+
+    color: #D7D55B;
+    text-shadow: 2px 2px 4px #414141;
+
+    font-family: "Afacad Flux", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 500;
+    font-style: normal;
+    font-variation-settings:
+      "slnt" 0;
+
+}
+
+.text-3xl {
+    font-size: 2rem;
+    line-height: 2rem;
+
+    font-family: "Afacad Flux", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 500;
+    font-style: normal;
+    font-variation-settings:
+      "slnt" 0;
+
+}
+
+html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    font-size: 1.2rem;
+
+  font-family: "Afacad Flux", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 450;
+  font-style: normal;
+  font-variation-settings:
+    "slnt" 0;
+
+    -webkit-tap-highlight-color: transparent;
+}
+
+
+.border-primary {
+    --tw-border-opacity: 0;
+}
+
+.border-black {
+    --tw-border-opacity: 0;
+
+}
+
+.shadow-2xl {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.card-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: var(--padding-card, 2rem);
+    gap: 0.5rem;
+
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.rounded-lg {
+    border-radius: 0.5rem;
+
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.w-80 {
+    width: 10rem;
+}
+
+.w-96 {
+    width: 20rem;
+}
+
+.card-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+}
+
+.max-w-sm {
+    max-width: 20em;
+}
diff --git a/src/routes/About.jsx b/src/routes/About.jsx
@@ -12,12 +12,12 @@ const About = () => {
       <div className="flex flex-col-reverse lg:flex-row">
         {/* Left side: Collage of images */}
         <div className="w-full lg:w-1/2 p-4 space-y-4">
-          <img src={dog} className="w-full h-auto rounded-lg shadow-lg" />
+          <img src={dog} className="w-full h-auto rounded-lg shadow-lg" alt="Photo of Harriet's dog with his toungue hanging out. He wears a bandana around his neck." />
         </div>
 
         {/* Right side: About Me */}
         <div className="w-full lg:w-1/2 p-4 space-y-4 ">
-          <h1 className="text-3xl font-bold mb-4">About Me</h1>
+          <h1 className="text-3xl font-bold mb-4">Harriet Baker-Bates</h1>
           <div className="text-xl">
             <p className="mb-4">
               After graduating, I started my career as Publicity Assistant for

diff --git a/src/routes/Contact.jsx b/src/routes/Contact.jsx
@@ -16,9 +16,6 @@ const Contact = () => {
         }}
       >
         <div className="max-w-xl mx-auto p-6 bg-white rounded-lg shadow-md space-y-6">
-          <div className="text-5xl font-bold text-center text-gray-800">
-            Get in touch
-          </div>
 
           <div className="mt-4">
             <ContactForm />
@@ -60,7 +57,7 @@ const Contact = () => {
         </div>
       </div>
 
-      <footer>
+      <footer class="contact-lift">
         <Footer />
       </footer>
     </>

diff --git a/src/routes/Home.jsx b/src/routes/Home.jsx
@@ -1,9 +1,8 @@
 import React from "react";
 import WelcomeHero from "../components/WelcomeHero";
 import Clients from "../components/Clients";
-import { Link } from "react-router-dom";
-import ServiceCardCara from "../components/serviceCarousel/ServiceCardCara";
 import Footer from "../components/Footer";
+import Services from "./Services";
 
 const Home = () => {
   return (
@@ -19,21 +18,8 @@ const Home = () => {
       <br></br>
 
       <div className="flex flex-col justify-center items-center min-h-screen">
-        <div className="text-5xl font-semibold z-1 px-10 ">
-          Three decades of experience
-        </div>
         <br></br>
-        <ServiceCardCara />
-
-        <div className="flex flex-row gap-10">
-          <Link className="btn btn-secondary" to={`services`}>
-            View All Services
-          </Link>
-
-          <Link className="btn btn-secondary" to={`contact`}>
-            Contact me
-          </Link>
-        </div>
+        <Services />
       </div>
 
       <b></b>

diff --git a/src/routes/Services.jsx b/src/routes/Services.jsx
@@ -62,7 +62,7 @@ const Services = () => {
           <div className="text-3xl flex justify-center  bg-gradient-to-r from-[#001f3f] via-[#001b36] to-[#001732] bg-clip-text">Affiliations</div>
           <div className="flex justify-center gap-6 p-4">
             <div className="card bg-neutral w-96 shadow-sm rounded-lg border border-primary">
-              <div className="card-body items-center text-center">
+              <div className="card-body items-center">
                 <h2 className="card-title">
                   Speaker Coaching & Storytelling Training
                 </h2>

diff --git a/src/routes/root.jsx b/src/routes/root.jsx
@@ -38,14 +38,14 @@ const root = () => {
                 <div className="flex justify-center items-center">
                   <img
                     src={bakerBatesLogo}
-                    alt="Optimum releasing"
+                    alt="BakerBates PR logo"
                     className="h-32 object-contain"
                   />
                 </div>
               </Link>
             </div>
             <div className="hidden flex-none lg:block">
-              <ul className="menu menu-horizontal text-2xl">
+              <ul className="menu menu-horizontal text-3xl">
                 {/* Navbar menu content here */}
                 <li>
                   <Link to={`/`}>Home</Link>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@

		-Tailwind with Daisy ui, framer motion, react router

		npm run dev -- --host