Added changes to Styling.

components/GoTop.js

@@ -0,0 +1,63 @@
+import { useState, useEffect } from "react";
+
+import styled from "styled-components";
+
+import CaretUp from "../public/CaretUp";
+
+const GoTopParent = styled.div`
+  display: ${(props) => (props.display ? props.display : "none")};
+
+  .icon {
+    position: fixed;
+    width: 30px;
+    height: 30px;
+    bottom: 5%;
+    left: 90%;
+    cursor: pointer;
+    text-align: center;
+    line-height: 30px;
+    background: #aaaaaa;
+    border-radius: 50%;
+  }
+`;
+
+const GoTop = (props) => {
+  const { topRef } = props;
+
+  const [scrollPosition, setSrollPosition] = useState(0);
+  const [showGoTop, setshowGoTop] = useState("none");
+
+  const handleVisibleButton = () => {
+    const position = window.pageYOffset;
+    setSrollPosition(position);
+
+    if (scrollPosition > 50) {
+      return setshowGoTop("block");
+    } else if (scrollPosition < 50) {
+      return setshowGoTop("none");
+    }
+  };
+
+  const handleScrollUp = () => {
+    topRef.current.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleVisibleButton);
+  });
+
+  return (
+    <>
+      <GoTopParent display={showGoTop}>
+        <div className="icon" onClick={handleScrollUp}>
+          <CaretUp
+            color={props.data.branding.background_color}
+            bgcolor={props.data.branding.primary_color}
+          />
+        </div>
+      </GoTopParent>
+    </>
+  );
+};
+
+export default GoTop;

components/Team.js

@@ -3,23 +3,31 @@ export default function Team(props) {
     <div className="bg-white">
       <div className="mx-auto pt-5 pb-10 px-4 max-w-7xl sm:px-6 lg:px-8">
         <div className="space-y-12">
-          <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Meet our team</h2>
+          <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
+            Meet our team
+          </h2>
 
           <ul
             role="list"
             className="space-y-12 lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8 lg:gap-y-12 lg:space-y-0"
           >
             {props.data.team.map((person) => (
               <li key={person.name}>
-                <div className="space-y-4 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0 lg:gap-8">
+                <div className="space-y-4 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0 bg-slate-100 lg:gap-8 lg:p-2 rounded-lg">
                   <div className="h-0 aspect-w-3 aspect-h-2 sm:aspect-w-3 sm:aspect-h-4">
-                    <img className="object-contain md:object-cover shadow-lg rounded-lg" src={person.image_url} alt="" />
+                    <img
+                      className="object-contain lg:object-cover shadow-lg rounded-lg"
+                      src={person.image_url}
+                      alt=""
+                    />
                   </div>
                   <div className="sm:col-span-2">
                     <div className="space-y-4">
                       <div className="text-lg leading-6 font-medium space-y-1">
                         <h3>{person.name}</h3>
-                        <p className="mosque-website__text--brand">{person.role}</p>
+                        <p className="mosque-website__text--brand">
+                          {person.role}
+                        </p>
                       </div>
                       {/* <div className="text-lg">
                         <p className="text-gray-500">{person.bio}</p>
@@ -33,5 +41,5 @@ export default function Team(props) {
         </div>
       </div>
     </div>
-  )
+  );
 }

data/mosques.yml

@@ -15,6 +15,7 @@ default:
   branding:
     logo_url: https://www.eastlondonmosque.org.uk/clients/eastlondonmosque/assets/logo@2x.png
     banner_image_url: https://images.unsplash.com/photo-1551041777-ed277b8dd348?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80
+    favicon_url: https://www.eastlondonmosque.org.uk/clients/eastlondonmosque/assets/footer-logo-motif.png
     primary_color: "#95112d"
   team:
     - name: Dilowar Hussain Khan
@@ -31,7 +32,7 @@ default:
       image_url: https://www.eastlondonmosque.org.uk/GetImage.aspx?IDMF=73fb7ccc-8721-4e2c-9371-1e92bb9134cf&w=150&h=210&src=mc
   contact:
     addresses:
-    	- East London Mosque Trust, 82-92 Whitechapel Road, LONDON, E1 1JQ
+      - East London Mosque Trust, 82-92 Whitechapel Road, LONDON, E1 1JQ
     phone_numbers:
       - name: Reception
         number: "020 7650 3000"
@@ -68,6 +69,7 @@ cheacs.mosque.website: &cheacs
   branding:
     logo_url: https://github.com/Mosque-Screens/mosque-logos/raw/master/cheacs-logo.png
     banner_image_url: https://images.unsplash.com/photo-1551041777-ed277b8dd348?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80
+    favicon_url: https://github.com/Mosque-Screens/mosque-logos/raw/master/cheacs-logo.png
     primary_color: "#00bcf2"
   team:
     - name: Malik Chowdhury-Nanu

next.config.js

@@ -1,7 +1,11 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  reactStrictMode: true,
-}
+	reactStrictMode: true,
+	swcMinify: true,
+	compiler: {
+		styledComponents: true,
+	},
+};
 
-const withYAML = require('next-yaml')
-module.exports = withYAML(module.exports)
+const withYAML = require('next-yaml');
+module.exports = withYAML(module.exports);