Skip to content

Commit c23d6f0

Browse files
recursivezerorecursivezero
authored
Designing Home page (#129)
merged with some doubt
2 parents f5a2b68 + f17d98c commit c23d6f0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1718
-100
lines changed

‎public/assets/images/ABCD-blue.png‎

172 KB
Loading

‎src/assets/icons/man_with_keyboard.svg‎

Lines changed: 21 additions & 0 deletions
Loading

‎src/assets/styles/about.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
:root {
2-
--bg-dark: #0f172a;
3-
--bg-light: #ffffff;
4-
--bg-secondary: #1e293b;
5-
--primary: #3b82f6;
6-
--primary-light: #60a5fa;
7-
--text-main: #f8fafc;
8-
--text-primary: #cbd5e1;
9-
--text-secondary: #212223;
10-
--accent: #f59e0b;
11-
}
12-
131
.about-container {
142
background-color: light-dark(var(--bg-light), var(--bg-dark));
153
color: var(--text-main);

‎src/assets/styles/coming-soon.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.page-container {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 2.5rem;
5+
margin: 2rem 0;
6+
}
7+
8+
.heading-container {
9+
background: var(--bg-secondary);
10+
text-align: center;
11+
border-radius: 1.5rem;
12+
}
13+
14+
.logo {
15+
margin-bottom: 0.5rem;
16+
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
17+
height: 60rem;
18+
aspect-ratio: 1;
19+
}
20+
21+
h1 {
22+
color: var(--primary);
23+
font-size: clamp(2.25rem, 5vw, 3.5rem);
24+
margin-bottom: 1rem;
25+
font-weight: 700;
26+
}
27+
28+
.subtitle {
29+
font-size: 1.125rem;
30+
color: var(--text-secondary);
31+
max-width: 500px;
32+
margin: 0 auto;
33+
line-height: 1.6;
34+
}

‎src/assets/styles/contact.css‎

Lines changed: 85 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,108 @@
44

55
.container__contact {
66
box-sizing: border-box;
7+
padding: 4rem 1.5rem;
8+
background-color: var(--bg-alt);
9+
color: var(--text-main);
710
}
811

912
.contact__message {
10-
@apply text-sm md:p-[1rem];
13+
/* @apply text-sm md:p-[1rem]; */
1114
margin-top: 4px;
1215
}
1316

14-
.custom__input {
17+
/* .custom__input {
1518
@apply md:tracking-widest;
16-
}
19+
} */
1720

1821
.container__form {
19-
@apply flex flex-grow items-center justify-start max-sm:justify-center md:mr-36;
22+
/* @apply flex flex-grow items-center justify-start max-sm:justify-center md:mr-36; */
23+
padding: 3rem;
24+
display: flex;
25+
flex-direction: column;
26+
gap: 2rem;
27+
}
28+
29+
.contact-wrapper {
30+
max-width: 700px;
31+
margin: 2rem auto 0 auto;
32+
border-radius: 1.5rem;
33+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
34+
overflow: hidden;
35+
background-color: var(--bg-main);
36+
}
37+
38+
/* --- Top Section: Contact Info --- */
39+
.contact-info {
40+
background: linear-gradient(135deg, var(--c-primary, #3b82f6) 0%, #60a5fa 100%);
41+
color: #ffffff;
42+
padding: 1rem;
43+
}
44+
.contact-info h3 {
45+
font-size: 1.8rem;
46+
font-weight: 700;
47+
margin-bottom: 1rem;
48+
color: #ffffff;
49+
}
50+
.info-item {
51+
display: flex;
52+
align-items: center;
53+
gap: 1.5rem;
54+
margin-bottom: 1rem;
55+
}
56+
.info-item i {
57+
font-size: 1.2rem;
58+
color: var(--c-primary);
59+
border-radius: 50%;
60+
width: 40px;
61+
height: 40px;
62+
display: inline-flex;
63+
align-items: center;
64+
justify-content: center;
65+
}
66+
.info-item a, .info-item span {
67+
color: #ffffff;
68+
text-decoration: none;
69+
font-weight: 500;
70+
font-size: 1.8rem;
71+
}
72+
73+
.copy-btn {
74+
background: none;
75+
border: none;
76+
color: inherit;
77+
cursor: pointer;
78+
padding: 0 0.5rem 0 0.2rem;
79+
font-size: 1rem;
80+
opacity: 0.7;
81+
transition: opacity 0.2s;
82+
}
83+
84+
.copy-btn:hover {
85+
opacity: 1;
2086
}
2187

22-
.contact__form {
23-
@apply w-full p-4;
88+
.info-item .underline-text {
89+
text-decoration: underline;
2490
}
2591

26-
.section__grid {
27-
@apply grid items-center gap-1;
92+
/* --- Dark Theme Override for Contact Info --- */
93+
[data-theme="dark"] .contact-info {
94+
background: #1f2937;
2895
}
2996

30-
.center__text {
31-
@apply top-[1rem] mt-5 text-center;
97+
[data-theme="dark"] .contact-info h3,
98+
[data-theme="dark"] .contact-info a {
99+
color: #d1d5db;
32100
}
33101

34-
.contact__button--group {
35-
@apply mt-8 flex justify-end;
102+
[data-theme="dark"] .info-item i {
103+
color: #1f2937;
104+
background-color: #d1d5db;
36105
}
37106

38-
.contact__button {
39-
@apply w-36 max-sm:w-full;
107+
@media (max-width: 768px) {
108+
.contact-info, .container__form {
109+
padding: 2rem;
110+
}
40111
}

‎src/assets/styles/cookies.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.article-container {
2+
max-width: 800px;
3+
margin: 2rem auto;
4+
padding: 2rem;
5+
background: var(--bg-secondary);
6+
border-radius: 12px;
7+
}
8+
9+
.article-header {
10+
text-align: center;
11+
margin-bottom: 2.5rem;
12+
padding-bottom: 1.5rem;
13+
border-bottom: 1px solid var(--border-color);
14+
}
15+
16+
.article-header h1 {
17+
font-size: clamp(2rem, 5vw, 2.75rem);
18+
color: var(--text-main);
19+
margin-bottom: 0.5rem;
20+
}
21+
22+
.article-header p {
23+
color: var(--text-secondary);
24+
font-style: italic;
25+
}
26+
27+
.article-content {
28+
line-height: 1.8;
29+
color: var(--text-main);
30+
}
31+
32+
.article-content h2,
33+
.article-content h3,
34+
.article-content h4 {
35+
color: var(--text-main);
36+
margin-top: 2.5rem;
37+
margin-bottom: 1rem;
38+
line-height: 1.3;
39+
}
40+
41+
.article-content a {
42+
color: var(--primary);
43+
text-decoration: underline;
44+
}
45+
46+
.article-content ul,
47+
.article-content ol {
48+
padding-left: 1.5rem;
49+
margin-bottom: 1rem;
50+
}
51+
52+
.article-content li {
53+
margin-bottom: 0.5rem;
54+
}
55+
56+
.article-content hr {
57+
border: 0;
58+
border-top: 1px solid var(--border-color);
59+
margin: 2.5rem 0;
60+
}

‎src/assets/styles/countdown.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.countdown__container {
2+
display: grid;
3+
place-items: center;
4+
}
5+
6+
.countdown {
7+
display: flex;
8+
flex-wrap: wrap;
9+
gap: 1.5rem;
10+
justify-content: center;
11+
}
12+
13+
.countdown-item {
14+
background: var(--bg-secondary);
15+
padding: 1rem;
16+
border-radius: 12px;
17+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
18+
min-width: 90px;
19+
text-align: center;
20+
flex-grow: 1;
21+
}
22+
23+
.countdown-number {
24+
font-size: clamp(2rem, 6vw, 2.5rem);
25+
font-weight: bold;
26+
color: var(--primary);
27+
}
28+
29+
.countdown-label {
30+
font-size: 0.9rem;
31+
color: var(--text-secondary);
32+
margin-top: 0.25rem;
33+
}

‎src/assets/styles/faq.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.faq-container {
2+
max-width: 800px;
3+
margin: 2rem auto;
4+
padding: 0 1rem;
5+
}
6+
7+
.faq-item {
8+
background: var(--bg-secondary);
9+
border-radius: 12px;
10+
margin-bottom: 1rem;
11+
border: 1px solid var(--border-color);
12+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
13+
transition: all 0.2s ease-in-out;
14+
border: 1px solid rgba(59, 130, 246, 0.2);
15+
}
16+
17+
.faq-item:hover {
18+
background: var(--primary-light);
19+
border-color: var(--primary-light);
20+
transform: translateY(-2px);
21+
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
22+
}
23+
24+
.faq-item[open] {
25+
border-color: var(--primary);
26+
}
27+
28+
.faq-question {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
padding: 1.25rem;
33+
cursor: pointer;
34+
font-size: 1.125rem;
35+
font-weight: 600;
36+
color: var(--text-main);
37+
list-style: none;
38+
}
39+
40+
.faq-question::-webkit-details-marker {
41+
display: none;
42+
}
43+
44+
.faq-question .icon {
45+
transition: transform 0.3s ease-in-out;
46+
color: var(--primary);
47+
}
48+
49+
.faq-item[open] .faq-question .icon {
50+
transform: rotate(180deg);
51+
}
52+
53+
.faq-answer {
54+
padding: 1.25rem;
55+
padding-top: 0;
56+
color: var(--text-secondary);
57+
line-height: 1.7;
58+
overflow: hidden;
59+
}
60+
.faq-item[open] .faq-answer {
61+
animation: fadeIn 0.5s ease;
62+
}
63+
64+
@keyframes fadeIn {
65+
from {
66+
opacity: 0;
67+
transform: translateY(-10px);
68+
}
69+
to {
70+
opacity: 1;
71+
transform: translateY(0);
72+
}
73+
}

0 commit comments

Comments
 (0)