Skip to content

Commit 86a327f

Browse files
cchiemcchiem
authored
Merge pull request #65 from UoaWDCC/about-page-responsive
About page responsive
2 parents b4f6193 + fe03f4d commit 86a327f

File tree

4 files changed

+37
-27
lines changed

4 files changed

+37
-27
lines changed

‎src/app/(frontend)/about/page.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,24 +42,34 @@ async function TeamContent() {
4242
return (
4343
<div className="bg-tansa-blue">
4444
<div className="bg-tansa-blue overflow-hidden">
45-
<div className="max-w-6xl h-[300px] relative mx-auto flex items-center justify-between py-16">
46-
<div>
47-
<h1 className="text-6xl text-white font-newkansas">Meet our</h1>
48-
<h1 className="text-8xl text-white font-newkansas">Team!</h1>
45+
{/* HERO SECTION - stays like original */}
46+
<div className="max-w-6xl relative mx-auto flex items-center justify-between
47+
py-[clamp(2.5rem,6vw,4.5rem)] h-[clamp(240px,35vw,320px)] lg:h-[300px] lg:py-16">
48+
<div className="pl-4 sm:pl-8 md:pl-12 mt-[clamp(0.5rem,2vw,1rem)] lg:mt-0">
49+
{/* Text scales on small screens, fixed look on large screens */}
50+
<h1 className="text-[clamp(2.5rem,5.5vw,4rem)] sm:text-[clamp(3rem,7vw,5rem)] lg:text-6xl text-white font-newkansas">
51+
Meet our
52+
</h1>
53+
<h1 className="text-[clamp(3.5rem,9vw,6rem)] sm:text-[clamp(4rem,10vw,6.5rem)] lg:text-8xl text-white font-newkansas mt-0 sm:mt-4 lg:mt-0">
54+
Team!
55+
</h1>
4956
</div>
50-
<div className="w-[400px] bottom-[-70px] absolute right-0 select-none">
57+
58+
{/* Bear scales on small screens, fixed position/size on large screens */}
59+
<div className="w-[clamp(220px,35vw,400px)] lg:w-[400px] absolute right-2 sm:right-4 md:right-10 bottom-[-50px] lg:bottom-[-70px] select-none">
5160
<Image
5261
src="/bears/lying_on_stomach.svg"
5362
alt="bear lying on stomach"
5463
width={400}
5564
height={400}
56-
className="object-contain"
65+
className="object-contain w-full h-auto"
5766
priority
5867
/>
5968
</div>
6069
</div>
6170
</div>
6271

72+
{/* TEAM SECTIONS - responsive improvements preserved */}
6373
{categories.map(({ title, members }, index) => (
6474
<TeamSection key={title} title={title} members={members} isFirst={index === 0} />
6575
))}

‎src/components/team/MemberCard.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ export default function MemberCard({ member, priority = false }: MemberCardProps
3434
return (
3535
<div
3636
ref={cardRef}
37-
className="flex flex-col items-center w-[250px] min-h-[350px] transition-opacity duration-500"
37+
className="flex flex-col items-center w-[clamp(150px,20vw,250px)] min-h-[clamp(220px,28vw,350px)] transition-opacity duration-500"
3838
style={{ opacity: isVisible ? 1 : 0 }}
3939
>
40-
<div className="relative w-[250px] h-[250px] rounded-md overflow-hidden bg-gray-200">
40+
<div className="relative w-full aspect-square rounded-md overflow-hidden bg-gray-200">
4141
{isVisible && (
4242
<Image
4343
src={
@@ -48,21 +48,21 @@ export default function MemberCard({ member, priority = false }: MemberCardProps
4848
width={250}
4949
height={250}
5050
priority={priority}
51-
className={`rounded-md object-cover h-[250px] w-[250px] transition-opacity duration-300 ${
51+
className={`rounded-md object-cover w-full h-full transition-opacity duration-300 ${
5252
imageLoaded ? 'opacity-100' : 'opacity-0'
5353
}`}
5454
onLoad={() => setImageLoaded(true)}
5555
placeholder="blur"
56-
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
56+
blurDataURL="data:image/jpeg;base64,..."
5757
/>
5858
)}
5959
{!imageLoaded && isVisible && (
6060
<div className="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 animate-pulse" />
6161
)}
6262
</div>
63-
<p className="mt-2 text-center text-2xl text-tansa-blue font-newkansas">{member.name}</p>
64-
<p className="text-center text-base text-tansa-blue font-newkansas">{member.position}</p>
65-
<p className="text-center text-base text-tansa-blue font-newkansas">{member.degree}</p>
63+
<p className="mt-2 text-center text-[clamp(1rem,2vw,1.5rem)] text-tansa-blue font-newkansas">{member.name}</p>
64+
<p className="text-center text-[clamp(0.8rem,1.5vw,1rem)] text-tansa-blue font-newkansas">{member.position}</p>
65+
<p className="text-center text-[clamp(0.8rem,1.5vw,1rem)] text-tansa-blue font-newkansas">{member.degree}</p>
6666
</div>
6767
)
6868
}

‎src/components/team/TeamSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ export default function TeamSection({ title, members, isFirst = false }: TeamSec
1212
return (
1313
<div className="bg-tansa-cream">
1414
<div className="container mx-auto px-4 pt-12 text-center">
15-
<h1 className="text-3xl text-tansa-blue font-newkansas">{title}</h1>
15+
<h1 className="text-[clamp(1.5rem,3vw,2rem)] text-tansa-blue font-newkansas">{title}</h1>
1616
</div>
17-
<div className="mx-auto flex flex-wrap justify-center gap-10 pt-6 pb-6">
17+
<div className="mx-auto flex flex-wrap justify-center gap-[clamp(1rem,3vw,2.5rem)] pt-6 pb-6">
1818
{members.map((member, index) => (
1919
<MemberCard
2020
key={member.id}

‎src/components/team/TeamSkeleton.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ export default function TeamSkeleton() {
22
return (
33
<div className="bg-tansa-blue">
44
<div className="bg-tansa-blue overflow-hidden">
5-
<div className="max-w-6xl h-[300px] relative mx-auto flex items-center justify-between py-16">
5+
<div className="max-w-6xl relative mx-auto flex items-center justify-between py-[clamp(2rem,6vw,4rem)] h-[clamp(180px,30vw,300px)]">
66
<div>
7-
<div className="h-16 w-64 bg-white/20 rounded animate-pulse mb-4" />
8-
<div className="h-20 w-80 bg-white/20 rounded animate-pulse" />
7+
<div className="h-[clamp(2rem,4vw,4rem)] w-[clamp(150px,25vw,250px)] bg-white/20 rounded animate-pulse mb-4" />
8+
<div className="h-[clamp(2.5rem,5vw,5rem)] w-[clamp(200px,30vw,320px)] bg-white/20 rounded animate-pulse" />
99
</div>
10-
<div className="w-[400px] bottom-[-70px] absolute right-0">
11-
<div className="w-[400px] h-[400px] bg-white/10 rounded animate-pulse" />
10+
<div className="w-[clamp(200px,30vw,400px)] bottom-[-10%] absolute right-0">
11+
<div className="w-full aspect-square bg-white/10 rounded animate-pulse" />
1212
</div>
1313
</div>
1414
</div>
@@ -17,15 +17,15 @@ export default function TeamSkeleton() {
1717
{[1, 2, 3].map((section) => (
1818
<div key={section} className="bg-tansa-cream">
1919
<div className="container mx-auto px-4 pt-12 text-center">
20-
<div className="h-8 w-48 bg-gray-300 rounded animate-pulse mx-auto" />
20+
<div className="h-[clamp(1.5rem,3vw,2rem)] w-[clamp(150px,25vw,200px)] bg-gray-300 rounded animate-pulse mx-auto" />
2121
</div>
22-
<div className="mx-auto flex flex-wrap justify-center gap-10 pt-6 pb-6">
22+
<div className="mx-auto flex flex-wrap justify-center gap-[clamp(1rem,3vw,2.5rem)] pt-6 pb-6">
2323
{[1, 2, 3, 4].map((card) => (
24-
<div key={card} className="flex flex-col items-center w-[250px] min-h-[350px]">
25-
<div className="w-[250px] h-[250px] bg-gray-300 rounded-md animate-pulse" />
26-
<div className="mt-2 h-6 w-32 bg-gray-300 rounded animate-pulse" />
27-
<div className="mt-1 h-4 w-24 bg-gray-300 rounded animate-pulse" />
28-
<div className="mt-1 h-4 w-28 bg-gray-300 rounded animate-pulse" />
24+
<div key={card} className="flex flex-col items-center w-[clamp(150px,20vw,250px)] min-h-[clamp(220px,28vw,350px)]">
25+
<div className="w-full aspect-square bg-gray-300 rounded-md animate-pulse" />
26+
<div className="mt-2 h-[clamp(1rem,2vw,1.5rem)] w-[clamp(100px,15vw,150px)] bg-gray-300 rounded animate-pulse" />
27+
<div className="mt-1 h-[clamp(0.8rem,1.5vw,1rem)] w-[clamp(80px,12vw,120px)] bg-gray-300 rounded animate-pulse" />
28+
<div className="mt-1 h-[clamp(0.8rem,1.5vw,1rem)] w-[clamp(90px,13vw,140px)] bg-gray-300 rounded animate-pulse" />
2929
</div>
3030
))}
3131
</div>

0 commit comments

Comments
 (0)