Add new image and some buttons

prettier.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [require.resolve("prettier-plugin-astro")],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

src/consts.ts

@@ -31,7 +31,7 @@ export const SOCIAL = [
 export const PERSONAL_INFO = {
   name: 'Jonathan Cottrell',
   title: "Model Cottrell Studios",
-  subtitle: 'A selection of Photographs and Art.',
+  subtitle: 'Professional Photography & Retouching.',
   role: 'Photographer',
   contact: 'mailto:[email protected]',
   avatar:

src/pages/index.astro

@@ -86,9 +86,10 @@ const images = await Promise.all(
 <Layout title={PERSONAL_INFO.title}>
   <div class="py-4 sm:py-6 lg:py-8 flex flex-col justify-between h-screen">
     <main class="mb-auto">
-      <div class="my-8 sm:my-12">
-        <h2
-          class="text-gray-800 dark:text-white text-2xl md:text-3xl lg:text-4xl text-center mb-4 md:mb-6 font-semibold"
+      <div class="flex flex-col sm:flex-row sm:h-half justify-center items-center overflow-auto my-12">
+        <div class="my-8 mx-12 md:mx-20 sm:my-12 h-full sm:h-auto flex flex-col justify-center items-center">
+          <h2
+          class="text-gray-800 dark:text-white text-3xl md:text-4xl lg:text-5xl text-center mb-4 md:mb-6 font-semibold"
         >
           {PERSONAL_INFO.title}
         </h2>
@@ -98,9 +99,26 @@ const images = await Promise.all(
         >
           {PERSONAL_INFO.subtitle}
         </p>
+
+        <div class="flex gap-4 my-4">
+          <a href="https://calendly.com/johnny-weho/30min" target="_blank" class="group px-4 pt-3 pb-4 relative overflow-hidden rounded-2xl bg-gray-500 text-lg font-bold text-white text-center">
+            Schedule Meeting
+          </a>
+          <a href="tel:6503195440" target="_blank" class="px-4 pt-3 pb-4 relative rounded-2xl bg-gray-300 text-lg font-bold text-gray-600 text-center">
+            +1 (650) 319-5440
+          </a>
+        </div>
+      </div>
+      <div class="sm:h-auto flex justify-center items-center max-w-300 rounded-xl overflow-hidden">
+        <Img src="/src/images/modelcottrell_behind_scenes.png" alt="Model Cottrell's studio behind the scenes" width="500" />
       </div>
+    </div>
 
-      <div class="max-w-screen-xl px-4 md:px-8 mx-auto">
+    <div class="flex justify-center py-4 md:py-6">
+      <div class="h-0.5 w-full bg-gray-300 md:w-1/2"></div>
+    </div>
+    <div class="max-w-screen-xl px-4 md:px-8 mx-auto">
+      <div class="text-gray-600 text-center my-8 font-semibold text-2xl md:text-3xl lg:text-5xl">Gallery</div>
         <div
           id="my-gallery"
           class="justify-center items-center pswp-gallery grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 xl:gap-8 gallery"