Skip to content

Commit

Permalink
update Responsiveness of About page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vrushalikudande
vrushalikudande committed Oct 30, 2024
1 parent ab38bee commit f294288
Showing 1 changed file with 34 additions and 40 deletions.
74 changes: 34 additions & 40 deletions src/app/(pages)/about/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,87 +54,81 @@ const AboutPage = () => {
];

return (
<div className="container mx-auto min-h-screen px-4 py-6 space-y-12 sm:px-6 sm:py-8 md:px-8 md:py-10 lg:space-y-24">
<div className="space-y-24">
<PageHeader
pageHeaderTitle="About Us"
pageHeaderSubtitle={about.header.title}
pageHeaderDescription={about.header.description}
className="text-center sm:text-left"
>
<div className="flex flex-col w-full items-center gap-6 sm:flex-row sm:flex-wrap sm:justify-between sm:gap-8 md:items-start">
<div className="flex max-w-5xl flex-wrap justify-between gap-8">
<BlockQuote heading="5" subheading="Underpaid Employees" />
<BlockQuote heading="$7K+" subheading="Invoices billed" />
<BlockQuote heading="26" subheading="Placated clients" />
</div>
</PageHeader>

<div className="relative w-full space-y-6 rounded-xl bg-foreground p-4 text-background outline outline-4 sm:outline-8 outline-foreground sm:p-6 md:p-8 lg:p-10">
<div className="space-y-4">
<h4 className="text-base font-bold sm:text-lg md:text-xl">Our culture</h4>
<h1 className="text-xl font-semibold leading-tight sm:text-2xl md:text-3xl lg:text-4xl">
Balance your passion with your passion for life.
</h1>
<p className="text-sm font-semibold text-muted/90 sm:text-base md:text-lg">
We are a group of like-minded people who share the same core values.
</p>
</div>

<div className="grid gap-8 py-6 sm:grid-cols-2 sm:py-8 lg:grid-cols-3 lg:py-10">
<div className="my-16 min-h-96 w-full space-y-4 rounded-xl bg-foreground p-10 text-background outline outline-8 outline-foreground">
<h4 className="font-bold">Our culture</h4>
<h1 className="text-3xl font-semibold">
Balance your passion <br /> with your passion for life.
</h1>
<p className="font-semibold text-muted">
We are a group of like-minded people who share the same core values.
</p>
<div className="flex max-w-5xl flex-col justify-between space-y-8 py-12 lg:flex-row lg:space-y-0">
{ourCulture.map((culture, index) => (
<div
className="flex space-x-4"
className="flex space-x-4 lg:space-y-0"
key={index}
>
<div className="flex-shrink-0">
<div className="h-full space-y-1 overflow-hidden">
<Separator
orientation="vertical"
className="h-8 w-[2px] bg-white dark:bg-black sm:h-10"
className="h-10 w-[2px] bg-white dark:bg-black"
/>
<Separator
orientation="vertical"
className="h-12 w-[2px] bg-muted-foreground sm:h-14"
className="h-14 w-[2px] bg-muted-foreground"
/>
</div>
<div className="flex-1">
<p className="text-sm sm:text-base">
<strong className="block mb-1.5 sm:mb-2">{culture.heading}</strong>
{culture.description}
</p>
</div>
<p className="text-medium max-w-64 text-wrap">
<strong>{culture.heading}.</strong>
{culture.description}
</p>
</div>
))}
</div>
</div>

<Separator orientation="horizontal" className="my-6 sm:my-8 md:my-12" />
<Separator orientation="horizontal" className="my-14" />

{/* Team Members */}
<div className="space-y-6 sm:space-y-8 lg:space-y-12">
<h2 className="text-lg font-bold text-center sm:text-xl md:text-2xl sm:text-left">Our Team</h2>
<div className="grid grid-cols-1 gap-6 px-4 sm:px-0 sm:grid-cols-2 md:grid-cols-3 lg:gap-8">
<div className="flex flex-col justify-between gap-4 lg:flex-row">
<div className="text-xl font-bold">Our Team</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3">
{teamMembers.map((member, index) => (
<div
key={index}
className="group relative mx-auto h-[280px] w-full max-w-[260px] overflow-hidden rounded-lg bg-card transition-transform duration-300 hover:scale-[1.02] sm:h-[300px] md:h-[320px] sm:max-w-[280px]"
className="group relative mx-auto h-[400px] sm:h-64 w-full max-w-[280px] sm:max-w-[220px] sm:w-52 overflow-hidden rounded-lg bg-card lg:h-80 lg:w-64"
>
<div className="absolute inset-0 h-full w-full">
<Image
src={member.imageSrc}
alt={member.name}
width={280}
width={256}
height={320}
className="h-full w-full object-cover"
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
priority={index < 2}
/>
</div>
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent">
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent">
<div className="absolute bottom-0 p-3 sm:p-4 text-white">
<h2 className="text-base font-semibold sm:text-lg md:text-xl">
<h2 className="text-base sm:text-lg font-semibold">
{member.name}
</h2>
<h3 className="text-sm font-medium text-white/80 sm:text-base">
<h2 className="text-sm font-medium text-white/80">
{member.position}
</h3>
</h2>
</div>
</div>
</div>
Expand All @@ -155,11 +149,11 @@ const BlockQuote = ({
date?: string;
}) => {
return (
<div className="m-1 sm:m-2 flex gap-x-3 sm:gap-x-4 md:gap-x-6">
<div className="m-2 flex gap-x-6">
<VerticalSeparator />
<blockquote className="space-y-1.5 sm:space-y-2">
<p className="text-xl font-bold sm:text-2xl md:text-3xl">{heading}</p>
<p className="text-xs font-medium text-muted-foreground sm:text-sm md:text-base">
<blockquote className="space-y-2">
<p className="text-3xl font-bold">{heading}</p>
<p className="font-medium text-muted-foreground">
{subheading}
</p>
</blockquote>
Expand Down

0 comments on commit f294288

Please sign in to comment.