Skip to content

Commit 858edae

Browse files
achyuthcodes30achyuthcodes30
authored
fix: CTA mobile view & rendering issues (#135)
* fix: CTA mobile view & rendering issues * fix: cover screen with black div
1 parent 1500393 commit 858edae

File tree

1 file changed

+105
-100
lines changed

1 file changed

+105
-100
lines changed

‎components/root/aboutUs.js‎

Lines changed: 105 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ export default function AboutUs() {
44
return (
55
<>
66
<style jsx global>{`
7+
#landingAbout {
8+
perspective: 100rem;
9+
-webkit-perspective: 100rem;
10+
transform-style: preserve-3d;
11+
-webkit-transform-style: preserve-3d;
12+
}
13+
714
.grid-container {
815
--grid: 10rem;
916
width: 100%;
@@ -13,96 +20,101 @@ export default function AboutUs() {
1320
left: 0;
1421
1522
transform-style: preserve-3d;
16-
perspective: 100rem;
23+
-webkit-transform-style: preserve-3d;
24+
1725
animation: rotate 100s linear infinite forwards;
26+
}
27+
28+
.grid-container .plane {
29+
--dir: 1;
30+
width: 200%;
31+
height: 120%;
32+
min-height: 70rem;
33+
position: absolute;
34+
bottom: 0;
35+
36+
left: 50%;
37+
transform-style: preserve-3d;
38+
transform-origin: bottom center;
39+
40+
backface-visibility: hidden;
41+
-webkit-backface-visibility: hidden;
42+
43+
transform: translate3d(-50%, 0, 0) rotateX(85deg);
44+
}
45+
46+
.grid-container .plane:last-child {
47+
--dir: -1;
48+
top: 0;
49+
transform-origin: top center;
50+
transform: translate3d(-50%, 0, 0) rotateX(-85deg);
51+
}
52+
53+
.grid-container .plane:last-child > *::after {
54+
background-image: linear-gradient(
55+
to top,
56+
rgba(0, 0, 0, 255) var(--grid),
57+
rgba(0, 0, 0, 0)
58+
);
59+
}
60+
61+
.grid-container .plane > * {
62+
transform-style: preserve-3d;
63+
height: 100%;
64+
width: 100%;
65+
position: absolute;
66+
}
67+
68+
.grid-container .plane > *::before,
69+
.grid-container .plane > *::after {
70+
content: '';
71+
display: block;
72+
position: absolute;
73+
width: 100%;
74+
height: 100%;
75+
top: 0;
76+
left: 0;
77+
}
78+
79+
.grid-container .plane > *::before {
80+
background-image:
81+
repeating-linear-gradient(
82+
to left,
83+
var(--lab-green),
84+
var(--lab-green) 4px,
85+
transparent 4px,
86+
transparent var(--grid)
87+
),
88+
repeating-linear-gradient(
89+
to bottom,
90+
var(--lab-green),
91+
var(--lab-green) 4px,
92+
transparent 4px,
93+
transparent var(--grid)
94+
);
95+
animation: move 1s linear infinite forwards;
1896
19-
.plane {
20-
--dir: 1;
21-
width: 300%;
22-
height: 150%;
23-
min-height: 70rem;
24-
position: absolute;
25-
bottom: 0;
26-
27-
left: 50%;
28-
transform-style: preserve-3d;
29-
transform-origin: bottom center;
30-
31-
backface-visibility: hidden;
32-
will-change: transform;
33-
transform: translate3d(-50%, 0, 0) rotateX(85deg);
34-
35-
&:last-child {
36-
--dir: -1;
37-
top: 0;
38-
transform-origin: top center;
39-
transform: translate3d(-50%, 0, 0) rotateX(-85deg);
40-
41-
& > * {
42-
&::after {
43-
background-image: linear-gradient(
44-
to top,
45-
rgba(0, 0, 0, 255) var(--grid),
46-
rgba(0, 0, 0, 0)
47-
);
48-
}
49-
}
50-
}
51-
52-
& > * {
53-
transform-style: preserve-3d;
54-
height: 100%;
55-
width: 100%;
56-
position: absolute;
57-
58-
&::before,
59-
&::after {
60-
content: '';
61-
display: block;
62-
position: absolute;
63-
width: 100%;
64-
height: 100%;
65-
top: 0;
66-
left: 0;
67-
}
68-
69-
&::before {
70-
background-image:
71-
repeating-linear-gradient(
72-
to left,
73-
var(--lab-green),
74-
var(--lab-green) 4px,
75-
transparent 4px,
76-
transparent var(--grid)
77-
),
78-
repeating-linear-gradient(
79-
to bottom,
80-
var(--lab-green),
81-
var(--lab-green) 4px,
82-
transparent 4px,
83-
transparent var(--grid)
84-
);
85-
animation: move 1s linear infinite forwards;
86-
87-
will-change: transform;
88-
}
89-
90-
&::after {
91-
background-image: linear-gradient(
92-
to bottom,
93-
rgba(0, 0, 0, 255) var(--grid),
94-
rgba(0, 0, 0, 0)
95-
);
96-
z-index: 10;
97-
transform: translateZ(1px);
98-
}
99-
}
100-
101-
.glow {
102-
filter: blur(0.5rem);
103-
z-index: 11;
104-
mix-blend-mode: plus-lighter;
105-
}
97+
will-change: transform;
98+
}
99+
100+
.grid-container .plane > *::after {
101+
background-image: linear-gradient(
102+
to bottom,
103+
rgba(0, 0, 0, 255) var(--grid),
104+
rgba(0, 0, 0, 0)
105+
);
106+
z-index: 10;
107+
transform: translateZ(1px);
108+
}
109+
110+
.grid-container .plane .glow {
111+
filter: blur(0.5rem);
112+
z-index: 11;
113+
mix-blend-mode: screen;
114+
}
115+
@supports (mix-blend-mode: plus-lighter) {
116+
.grid-container .plane .glow {
117+
mix-blend-mode: plus-lighter;
106118
}
107119
}
108120
@@ -116,18 +128,11 @@ export default function AboutUs() {
116128
}
117129
118130
@media (max-width: 640px) {
119-
.grid-container {
120-
--grid: 3rem;
131+
#landingAbout {
121132
perspective: 70rem;
122133
}
123-
.grid-container .plane {
124-
width: 240%;
125-
height: 110%;
126-
min-height: 0;
127-
transform: translate3d(-50%, 0, 0) rotateX(78deg);
128-
}
129-
.grid-container .plane:last-child {
130-
transform: translate3d(-50%, 0, 0) rotateX(-78deg);
134+
.grid-container {
135+
--grid: 3rem;
131136
}
132137
}
133138
@@ -607,7 +612,7 @@ export default function AboutUs() {
607612
</div>
608613
</div>
609614

610-
<div className="p-4 md:p-24 bg-black absolute left-0 top-1/2 right-0 -translate-y-1/2 w-full h-[38%] flex flex-col justify-center items-center">
615+
<div className="p-4 md:p-24 bg-black absolute left-0 top-1/2 right-0 -translate-y-1/2 w-full h-[45%] flex flex-col justify-center items-center">
611616
<p className="text-xs md:text-2xl text-center">
612617
<a href="/" className="text-lab-green">
613618
<ScrambleText
@@ -667,7 +672,7 @@ export default function AboutUs() {
667672
on campus, driving niche projects and deep research
668673
across domains!
669674
</p>
670-
<span className="mt-4 md:mt-24 w-1/4 mx-auto flex flex-row justify-between">
675+
<span className="mt-6 md:mt-24 w-3/4 md:w-1/4 mx-auto flex flex-row justify-between">
671676
<a
672677
href="/events"
673678
className="bg-gradient-to-br -skew-x-12 from-[var(--lab-green)] hover:scale-110 transition-all ease-in-out duration-600 to-green-700 text-center font-bold text-sm md:text-xl p-2 md:p-4"

0 commit comments

Comments
 (0)