Skip to content

Commit

Permalink
Update about page items style (#656)
Browse files Browse the repository at this point in the history
* make about page items fit new style

* add divider

* adjust headings
  • Loading branch information
choden-dev authored Jul 19, 2024
1 parent 456ba03 commit e30e185
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 72 deletions.
51 changes: 30 additions & 21 deletions client/src/app/about/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,36 @@ const About = async () => {
const aboutItems = await sanityQuery<AboutItem[]>(ABOUT_ITEMS_GROQ_QUERY)

return (
<div className="flex w-full flex-col gap-4 ">
<h2 className="text-dark-blue-100 mt-8 pl-4 text-center italic lg:text-left">
About us
</h2>
{aboutItems.map((item, index) => {
// Even => Left, Odd => Right
const side = index % 2 === 0 ? "left" : "right"
return (
<div className="p-4" key={item._id}>
<AboutSection
title={item.title || ""}
text={item.description || ""}
variant={side}
imageSrc={item.imageUrl || ""}
/>
</div>
)
})}

<Footer />
</div>
<>
<div className="flex w-full flex-col items-center justify-center">
<div className="mb-4 flex max-w-[1100px] flex-col">
<h2 className="text-dark-blue-100 my-8 text-center italic">
About us
</h2>
{aboutItems.map((item, index) => {
// Even => Left, Odd => Right
const side = index % 2 === 0 ? "left" : "right"
return (
<div key={item._id}>
<AboutSection
title={item.title || ""}
text={item.description || ""}
variant={side}
imageSrc={item.imageUrl || ""}
/>
{
// Don't need divider for last row
index < aboutItems.length - 1 && (
<div className="bg-gray-2 my-11 h-[1px] w-full" />
)
}
</div>
)
})}
</div>
<Footer />
</div>
</>
)
}

Expand Down
88 changes: 37 additions & 51 deletions client/src/components/generic/AboutSection/AboutSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,23 @@ import Image, { StaticImageData } from "next/image"
type ImageSideVariants = "left" | "right"

interface IAboutSectionProps {
/**
* The text that describes the name of the about section
* @example "Our Purpose: Snowboarding and Skiing"
*/
title: string
/**
* The smaller text giving more detail about the section
* @example "lorem ipsum"
*/
text: string
/**
* "left" or "right" based on the side the image is on
*/
variant: ImageSideVariants
/**
* The image url, or `StaticImageData` originating from importing the image
*/
imageSrc: string | StaticImageData
}

Expand All @@ -14,61 +28,33 @@ type Props = IAboutSectionProps

const TextStyler = ({ title, text }: Omit<Props, "variant" | "imageSrc">) => {
return (
<div className="grid-col grid w-full items-center overflow-hidden">
<h4 className="lg:text-h2 md:text-h4 text-dark-blue-100 p-2 text-center font-bold italic md:p-2 md:text-left md:font-bold lg:p-4 lg:text-left">
{title}
</h4>
<p className=" text-dark-blue-100 lg:text-h4 p-2 md:p-2 lg:p-3">{text}</p>
</div>
<>
<h2 className="font-weight-bold text-dark-blue-100 italic">{title}</h2>
<p className=" text-h4 text-black">{text}</p>
</>
)
}

const AboutSection = ({ title, text, imageSrc, variant }: Props) => {
if (variant === "left") {
return (
<div className="grid-col grid w-full md:grid-cols-2 md:gap-4 lg:grid-cols-2 lg:gap-4">
<Image
src={imageSrc}
width={DEFAULT_ABOUT_IMAGE_RES}
height={DEFAULT_ABOUT_IMAGE_RES}
alt="about page image"
className="object-fit: cover relative w-full rounded-t-lg"
/>
<div className=" border-dark-blue-100 mt-auto w-full rounded-b-lg border bg-white md:rounded-lg lg:rounded-t-lg">
<TextStyler title={title} text={text} />
</div>
</div>
)
} else {
return (
<div className="grid-col grid w-full md:grid-cols-2 md:gap-4 lg:grid-cols-2 lg:gap-4">
<>
<div className="border-dark-blue-100 mt-auto hidden w-full rounded-b-lg border bg-white sm:rounded-t-none md:block md:rounded-lg lg:rounded-t-lg ">
<TextStyler title={title} text={text} />
</div>
<Image
src={imageSrc}
width={DEFAULT_ABOUT_IMAGE_RES}
height={DEFAULT_ABOUT_IMAGE_RES}
alt="about page image"
className="hidden w-full rounded-t-lg md:flex"
/>
</>
<>
<Image
src={imageSrc}
width={DEFAULT_ABOUT_IMAGE_RES}
height={DEFAULT_ABOUT_IMAGE_RES}
alt="about page image"
className="flex w-full rounded-t-lg md:hidden"
/>
<div className="border-dark-blue-100 w-full rounded-b-lg border bg-white sm:rounded-t-none md:hidden md:rounded-lg lg:rounded-t-lg ">
<TextStyler title={title} text={text} />
</div>
</>
const AboutSection = ({ title, text, imageSrc, variant = "left" }: Props) => {
return (
<div className="relative grid h-fit w-full grid-cols-1 md:grid-cols-2 md:gap-5">
<span className="home-page-gradient" />
<Image
src={imageSrc}
width={DEFAULT_ABOUT_IMAGE_RES}
height={DEFAULT_ABOUT_IMAGE_RES}
alt="about page image"
className={`relative ${variant === "right" ? "-order-1" : "md:order-1"}
h-full rounded-t-md object-cover md:rounded-b-md`}
/>
<div
className="border-gray-3 flex w-full flex-col gap-10 rounded-b-md border
bg-white p-8 md:rounded-t-md"
>
<TextStyler title={title} text={text} />
</div>
)
}
</div>
)
}

export default AboutSection

0 comments on commit e30e185

Please sign in to comment.