Skip to content

Commit 7332f9a

Browse files
GizmotronnGizmotronn
committed
🎋🥬 ↝ [SGV2-22]: I have a constant fear that someone's always near
1 parent 598cdf5 commit 7332f9a

File tree

1 file changed

+50
-126
lines changed

1 file changed

+50
-126
lines changed

‎components/_Core/Section/Planet.tsx

+50-126
Original file line numberDiff line numberDiff line change
@@ -28,26 +28,28 @@ const Planet: React.FC<PlanetProps> = ({
2828
centerButtonImage,
2929
}) => {
3030
return (
31-
<div className="flex flex-col justify-center">
32-
<div className="flex overflow-hidden relative flex-col w-full min-h-[2413px] max-md:max-w-full">
33-
<img
34-
loading="lazy"
35-
src={backgroundImage}
36-
className="object-cover absolute inset-0 size-full"
37-
/>
31+
<div className="flex flex-col justify-center overflow-hidden h-screen">
32+
<img
33+
loading="lazy"
34+
src={backgroundImage}
35+
className="object-cover absolute inset-0 z-0"
36+
/>
37+
<div className="relative z-10 flex-1">
3838
{/* <Header
3939
logoImage={logoImage}
4040
planetName={planetName}
4141
leftArrowImage={leftArrowImage}
4242
rightArrowImage={rightArrowImage}
4343
compassImage={compassImage}
4444
/> */}
45-
<RoverSection
46-
structureImage={structureImage}
47-
activeRoverImage={activeRoverImage}
48-
idleRoverImage={idleRoverImage}
49-
/>
50-
<Gallery images={galleryImages} centerButtonImage={centerButtonImage} />
45+
<div className="flex flex-col justify-between h-full pb-8">
46+
<RoverSection
47+
structureImage={structureImage}
48+
activeRoverImage={activeRoverImage}
49+
idleRoverImage={idleRoverImage}
50+
/>
51+
<Gallery images={galleryImages} centerButtonImage={centerButtonImage} />
52+
</div>
5153
</div>
5254
</div>
5355
);
@@ -68,42 +70,19 @@ const Header: React.FC<HeaderProps> = ({
6870
rightArrowImage,
6971
compassImage,
7072
}) => {
71-
return (
72-
<div className="flex relative flex-col justify-center w-full backdrop-blur-[5px] bg-white bg-opacity-0 max-md:max-w-full">
73-
<div className="flex flex-col justify-center items-center px-12 py-5 w-full max-md:px-5 max-md:max-w-full md:flex-row md:justify-between">
74-
<div className="flex flex-col justify-center items-center md:flex-row md:items-center">
75-
<img
76-
loading="lazy"
77-
src={logoImage}
78-
className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px] md:w-auto"
79-
/>
80-
<div className="flex flex-col justify-center self-stretch">
81-
<div className="flex gap-5 justify-center items-center self-stretch mt-2 text-3xl font-semibold text-center text-white uppercase tracking-[5.12px] md:mt-0">
82-
<img
83-
loading="lazy"
84-
src={leftArrowImage}
85-
className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
86-
/>
87-
<div className="self-stretch">{planetName}</div>
88-
<img
89-
loading="lazy"
90-
src={rightArrowImage}
91-
className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
92-
/>
93-
</div>
94-
<div className="flex justify-center items-center p-1.5 mt-2 w-[47px] md:mt-0">
95-
<img loading="lazy" src={compassImage} className="w-full aspect-square" />
96-
</div>
97-
</div>
98-
</div>
99-
<img
100-
loading="lazy"
101-
src={logoImage}
102-
className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px] md:w-auto"
103-
/>
104-
</div>
73+
return (
74+
<div className="flex justify-between items-center px-6 py-4">
75+
<div className="flex items-center">
76+
<img loading="lazy" src={logoImage} className="w-12 h-12 mr-2" />
77+
<div className="flex flex-col items-center">
78+
<img loading="lazy" src={leftArrowImage} className="w-6 h-6 mb-1" />
79+
<div className="text-white">{planetName}</div>
80+
<img loading="lazy" src={rightArrowImage} className="w-6 h-6 mt-1" />
10581
</div>
106-
);
82+
<img loading="lazy" src={compassImage} className="w-6 h-6 ml-auto" />
83+
</div>
84+
</div>
85+
);
10786
};
10887

10988
interface RoverSectionProps {
@@ -118,63 +97,22 @@ const RoverSection: React.FC<RoverSectionProps> = ({
11897
idleRoverImage,
11998
}) => {
12099
return (
121-
<div className="relative self-center w-full max-w-[906px] mt-[1554px] max-md:mt-10 max-md:max-w-full">
122-
<div className="flex gap-5 max-md:flex-col max-md:gap-0">
123-
<div className="flex flex-col w-[26%] max-md:ml-0 max-md:w-full">
124-
<div className="flex relative flex-col px-5 mt-1 text-xl font-semibold text-center text-white uppercase whitespace-nowrap tracking-[3.2px] max-md:mt-10">
125-
<div>structure</div>
126-
<div className="shrink-0 self-start mt-20 rounded-full shadow-2xl backdrop-blur-[5px] bg-cyan-300 bg-opacity-50 h-[45px] max-md:mt-10" />
100+
<div className="flex flex-col justify-center items-center">
101+
<div className="flex justify-between w-full px-6 mb-4">
102+
{[1, 2, 3].map((index) => (
103+
<div key={index} className="w-1/3 p-2">
104+
<img loading="lazy" src={structureImage} className="w-full" />
127105
</div>
106+
))}
107+
</div>
108+
<div className="flex justify-between w-full px-6">
109+
<div className="w-1/2">
110+
<div className="text-center text-white">Active Rover</div>
111+
<img loading="lazy" src={activeRoverImage} className="w-full" />
128112
</div>
129-
<div className="flex flex-col ml-5 w-[74%] max-md:ml-0 max-md:w-full">
130-
<div className="relative grow max-md:mt-10 max-md:max-w-full">
131-
<div className="flex gap-5 max-md:flex-col max-md:gap-0">
132-
<div className="flex flex-col w-[68%] max-md:ml-0 max-md:w-full">
133-
<div className="flex relative grow gap-4 items-start mt-16 max-md:mt-10">
134-
<div className="flex flex-col flex-1 px-5">
135-
<div className="justify-center self-center px-4 py-1 text-xl font-medium text-center text-white whitespace-nowrap rounded-xl shadow-sm bg-green-500 bg-opacity-40">
136-
Active
137-
</div>
138-
<div className="text-xl font-semibold text-center text-white uppercase tracking-[3.2px]">
139-
rover
140-
</div>
141-
<div className="flex flex-col justify-center px-10 py-0.5 max-md:px-5">
142-
<div className="flex flex-col items-start pt-5">
143-
<img
144-
loading="lazy"
145-
src={activeRoverImage}
146-
className="aspect-[1.18] w-[92px]"
147-
/>
148-
</div>
149-
</div>
150-
</div>
151-
<div className="flex flex-col flex-1 px-5 mt-1.5">
152-
<div className="justify-center self-center px-4 py-1 text-xl font-medium text-center text-white whitespace-nowrap rounded-xl shadow-sm bg-red-600 bg-opacity-40">
153-
Idle
154-
</div>
155-
<div className="text-xl font-semibold text-center text-white uppercase tracking-[3.2px]">
156-
rover
157-
</div>
158-
<div className="flex flex-col justify-center px-10 py-0.5 max-md:px-5">
159-
<div className="flex flex-col items-start pt-5">
160-
<img
161-
loading="lazy"
162-
src={idleRoverImage}
163-
className="aspect-[1.18] w-[92px]"
164-
/>
165-
</div>
166-
</div>
167-
</div>
168-
</div>
169-
</div>
170-
<div className="flex flex-col ml-5 w-[32%] max-md:ml-0 max-md:w-full">
171-
<div className="flex relative flex-col px-5 text-xl font-semibold text-center text-white uppercase whitespace-nowrap tracking-[3.2px] max-md:mt-9">
172-
<div>structure</div>
173-
<div className="shrink-0 self-start mt-20 rounded-full shadow-2xl backdrop-blur-[5px] bg-cyan-300 bg-opacity-50 h-[45px] max-md:mt-10" />
174-
</div>
175-
</div>
176-
</div>
177-
</div>
113+
<div className="w-1/2">
114+
<div className="text-center text-white">Idle Rover</div>
115+
<img loading="lazy" src={idleRoverImage} className="w-full" />
178116
</div>
179117
</div>
180118
</div>
@@ -188,30 +126,16 @@ interface GalleryProps {
188126

189127
const Gallery: React.FC<GalleryProps> = ({ images, centerButtonImage }) => {
190128
return (
191-
<div className="flex relative flex-col justify-center mt-16 w-full max-md:mt-10 max-md:max-w-full">
192-
<div className="flex flex-col justify-center py-5 w-full max-md:max-w-full">
193-
<div className="flex flex-col justify-center w-full max-md:max-w-full">
194-
<div className="flex justify-center items-center px-16 py-6 w-full max-md:px-5 max-md:max-w-full">
195-
<div className="flex gap-5 justify-between max-md:flex-wrap">
196-
{images.map((image, index) => (
197-
<div
198-
key={index}
199-
className="flex overflow-hidden relative flex-col justify-center aspect-[1.08] w-[140px]"
200-
>
201-
<img
202-
loading="lazy"
203-
src={image}
204-
className="object-cover absolute inset-0 size-full"
205-
/>
206-
<div className="relative shrink-0 h-[130px]" />
207-
</div>
208-
))}
209-
</div>
129+
<div className="flex justify-center">
130+
<div className="flex flex-wrap w-full px-4">
131+
{images.map((image, index) => (
132+
<div key={index} className="w-1/3 p-2">
133+
<img loading="lazy" src={image} className="w-full" />
210134
</div>
211-
</div>
212-
<div className="flex justify-center items-center self-center px-2.5 mt-10 bg-indigo-700 h-[108px] rounded-[100px] w-[108px]">
213-
<img loading="lazy" src={centerButtonImage} className="w-full aspect-square" />
214-
</div>
135+
))}
136+
</div>
137+
<div className="flex justify-center w-full">
138+
<img loading="lazy" src={centerButtonImage} className="w-16 h-16 mb-8" />
215139
</div>
216140
</div>
217141
);

0 commit comments

Comments
 (0)