♻️ Fix website format on smaller screens (#89)

<!-- describe the change, why is it needed and what does it accomplish
as per https://ssw.com.au/rules/write-a-good-pull-request/ -->

As per conversation with @tiagov8, the format of the website on smaller
screens was a bit wonky:
1. On mobile, make sure the images are centralized
2. On mobile, make the gap between related text and image to be smaller;
and the gap between different sections to be bigger (so user can clearly
see what image is related to what text)

<!-- Add done video, screenshots as per
https://ssw.com.au/rules/record-a-quick-and-dirty-done-video/-->
<img width="732" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/34cba928-28ef-4865-8f50-dd90137d918b">\
**Figure: Image is centralized**

<img width="362" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/b374b2bc-d10a-41db-94b7-4253b323678a">\
**Figure: Gap between related text and image smaller; gap between
different sections larger**

<!-- As per rule https://www.ssw.com.au/rules/over-the-shoulder-prs -->
<!-- Getting the PR merged is part of the task - Call someone to review
your changes to get them merged ASAP -->

.github/workflows/cicd.yml

@@ -18,6 +18,7 @@ jobs:
     uses: ./.github/workflows/deploy.yml
     with: 
       environment: staging
+      url: https://staging.sswdory.com
     secrets: inherit
     needs: build-site
 

.github/workflows/deploy.yml

@@ -7,6 +7,10 @@ on:
         description: "Name of the environment to deploy to"
         required: true
         type: string
+      url:
+        description: "URL of the site"
+        required: false
+        type: string
 
 permissions:
   id-token: write
@@ -20,7 +24,9 @@ defaults:
 jobs:
   deploy-bicep:
     runs-on: ubuntu-latest
-    environment: ${{ inputs.environment }}
+    environment: 
+      name: ${{ inputs.environment }}
+      url: ${{ inputs.url }}
     outputs:
       storageName: ${{steps.deploy-bicep.outputs.websiteStorageAccountName}}
     env:

content/src/app/marketingCard.tsx

@@ -22,7 +22,7 @@ function MarketingCardText({ title, description }: MarketingCardTextProps) {
       <h2 className="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
         {title}
       </h2>
-      <h3 className="mb-8 leading-relaxed max-w-xl">{description}</h3>
+      <h3 className="leading-relaxed max-w-xl">{description}</h3>
     </div>
   );
 }
@@ -49,15 +49,15 @@ export default function MarketingCard({
 }: MarketingCardProps) {
   return (
     <section className="text-gray-700 body-font">
-      <div className="container mx-auto flex px-5 py-10 md:flex-row flex-col items-center">
-        <div className="mr-8 md:w-1/2 mb-10 md:mb-0">
+      <div className="container mx-auto mb-32 md:mb-0 flex px-5 py-10 md:flex-row flex-col items-center">
+        <div className="md:mr-8 md:w-1/2 md:mb-0 mb-10">
           {reverse ? (
             <MarketingCardImage imgURL={imgURL} />
           ) : (
             <MarketingCardText title={title} description={description} />
           )}
         </div>
-        <div className="md:w-1/2 w-5/6 mb-10 md:mb-0">
+        <div className="md:w-1/2 w-5/6 md:mb-0">
           {reverse ? (
             <MarketingCardText title={title} description={description} />
           ) : (

content/src/app/page.tsx

@@ -18,7 +18,7 @@ export default function Home() {
       </nav>
       <div className="container mx-auto">
         <section className="text-gray-700 body-font">
-          <div className="container mx-auto flex px-5 py-20 items-center justify-center flex-col">
+          <div className="container mx-auto mb-32 md:mb-0 flex px-5 py-10 items-center justify-center flex-col">
             <div className="text-center lg:w-2/3 w-full">
               <h1 className="title-font leading-tight sm:text-5xl text-4xl mb-10 font-semibold text-gray-900">
                 Check out our Github