Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge commit: Update Responsiveness and Content of About Page #16

Merged
merged 2 commits into from
Oct 30, 2024
Merged

Merge commit: Update Responsiveness and Content of About Page #16

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f294288
update Responsiveness of About page
vrushalikudande Oct 30, 2024
56c190b
update content of About page
vrushalikudande Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 35 additions & 41 deletions src/app/(pages)/about/page.tsx
View file
Open in desktop
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="5/5" subheading="Client Rating" />
<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
Loading