Merge pull request #61 from Inspirante-Tech/dev

Dev

sanity/schemaTypes/aboutus.ts

@@ -1,28 +1,52 @@
-import { defineType, defineField } from 'sanity'
+import { defineType, defineField } from "sanity";
 
 export default defineType({
-    title: "About Us",
-    name: "aboutUs",
-    type: "document",
-    fields: [
+  title: "About Us",
+  name: "aboutUs",
+  type: "document",
+  fields: [
+    defineField({
+      name: "sections",
+      title: "Sections",
+      type: "array",
+      of: [
         defineField({
-            name: "sections",
-            title: "Sections",
-            type: "array",
-            of: [
-                defineField({
-                    name: "section",
-                    type: "section"
-                })
-            ],
-            validation: (Rule) => Rule.required(),
-        })
-    ],
-    preview: {
-        prepare() {
-            return {
-                title: `About`
-            }
-        }
-    }
-})
+          name: "section",
+          type: "section",
+        }),
+      ],
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: "logodescription",
+      title: "Logo Description",
+      type: "localeBlockArray",
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: "logo1",
+      title: "Logo 1",
+      type: "image",
+      validation: (Rule) => Rule.required(),
+      options: {
+        hotspot: true,
+      },
+    }),
+    defineField({
+      name: "logo2",
+      title: "Logo 2",
+      type: "image",
+      validation: (Rule) => Rule.required(),
+      options: {
+        hotspot: true,
+      },
+    }),
+  ],
+  preview: {
+    prepare() {
+      return {
+        title: `About`,
+      };
+    },
+  },
+});

src/app/(main)/[locale]/about-us/krishnaveni/page.tsx

@@ -3,6 +3,8 @@ import Heading from "~/components/Heading/Heading";
 import ZigZag from "~/components/ZigZag/ZigZag";
 import { fetchAboutPage } from "~/lib/queries";
 import { LocaleParamProp } from "~/lib/types";
+import Image from "next/image";
+import RichText from "~/components/RichText/RichText";
 
 async function About({ params }: LocaleParamProp) {
   const t = await getTranslations("aboutUs");
@@ -13,6 +15,38 @@ async function About({ params }: LocaleParamProp) {
 
       <div className="space-y-16 md:space-y-20 ">
         <ZigZag contents={data.sections} />
+
+        {/* logo description */}
+        <section
+          className="flex flex-col-reverse gap-6 md:flex-row md:gap-10 hover:shadow-2xl transition-shadow duration-300 bg-gradient-to-bl from-primary-300/50 to-primary-100/30"
+          id="logo"
+        >
+          <div className="md:basis-1/2 basis-auto flex flex-col  gap-2 md:gap-4 px-10 md:py-12 pb-8">
+            <p
+              className="subheading text-gray-900"
+              style={{ textTransform: "capitalize" }}
+            >
+              {t("logo")}
+            </p>
+            <RichText value={data.logodescription} />
+          </div>
+          <div className="relative rounded-2xl hover:shadow-xl transition ease-out duration-500 basis-auto md:basis-1/2 overflow-clip aspect-video md:aspect-auto group flex flex-col justify-center items-center">
+            <Image
+              className="object-cover group-hover:scale-105 transition ease-out duration-700"
+              src={data.logo1}
+              alt={"Ayurveda"}
+              height={270}
+              width={270}
+            />
+            <Image
+              className="object-cover group-hover:scale-105 transition ease-out duration-700"
+              src={data.logo2}
+              alt={"Ashrayadhama"}
+              height={270}
+              width={270}
+            />
+          </div>
+        </section>
       </div>
     </main>
   );

src/components/Footer/Footer.tsx

@@ -1,18 +1,22 @@
 import { navigation } from "~/constants";
 import { Instagram, Linkedin, Twitter, Youtube } from "lucide-react";
 import LocaleLink from "../ui/LocaleLink";
-import { getTranslations } from "next-intl/server";
+import { getLocale, getTranslations } from "next-intl/server";
 import Image from "next/image";
 
 async function Footer() {
   const t = await getTranslations("links");
+  const locale = await getLocale();
   return (
     <footer className="text-white mt-10">
       <div className="bg-secondary-900 h-1/2 w-full ">
         <div className="content-container flex md:flex-row flex-col justify-around items-start">
           <div className="p-5 ">
             <ul className="flex flex-col justify-center items-center gap-4">
-              <div className="flex gap-2 bg-primary-100 rounded-full justify-between items-center px-4 py-2">
+              <LocaleLink
+                href={"/about-us/krishnaveni#logo"}
+                className="flex gap-2 bg-primary-100 rounded-full justify-between items-center px-4 py-2"
+              >
                 <Image
                   src={"/logo.png"}
                   height={100}
@@ -27,7 +31,8 @@ async function Footer() {
                   alt="Logo"
                   className="object-center object-contain"
                 />
-              </div>
+              </LocaleLink>
+
               <div className="flex gap-6 pb-5">
                 <Instagram className="text-2xl cursor-pointer transition-colors duration-150 hover:text-secondary-300" />
                 <Twitter className="text-2xl cursor-pointer transition-colors duration-150 hover:text-secondary-300" />

src/lib/queries.ts

@@ -262,20 +262,26 @@ export async function fetchContactDetails(locale: string) {
 }
 
 type AboutPage = {
+  logodescription: [any];
   sections: {
     title: string;
     description: [any];
     image: Image;
   }[];
+  logo1: Image;
+  logo2: Image;
 };
 
 export async function fetchAboutPage(locale: string) {
   const query = `*[_type == "aboutUs"][0]{
+        "logodescription":${coalesce("logodescription", locale)},
         "sections":sections[]{
             "title":${coalesce("title", locale)},
             image,
             "description":${coalesce("content", locale)}
-        }
+        },
+            logo1,
+            logo2
       }`;
 
   let page = await client.fetch<AboutPage>(query);
@@ -285,6 +291,8 @@ export async function fetchAboutPage(locale: string) {
       ...section,
       image: urlForImage(section.image),
     })),
+    logo1: urlForImage(page.logo1),
+    logo2: urlForImage(page.logo2),
   };
 }
 

src/messages/en.json

@@ -87,7 +87,8 @@
     }
   },
   "aboutUs": {
-    "heading": "about us"
+    "heading": "about us",
+    "logo": "Our Logo"
   },
   "contact": {
     "heading": "Welcome",

src/messages/kn.json

@@ -87,7 +87,8 @@
     }
   },
   "aboutUs": {
-    "heading": "ನಮ್ಮ ಬಗ್ಗೆ"
+    "heading": "ನಮ್ಮ ಬಗ್ಗೆ",
+    "logo": "ನಮ್ಮ ಲೋಗೋ"
   },
   "contact": {
     "heading": "ಸ್ವಾಗತ",