start making FAQ page

2026-03-09 15:05:38 +07:00
parent 0c03bb9254
commit 83f644cb03
7 changed files with 188 additions and 3 deletions
@@ -4467,4 +4467,118 @@
 			box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 		}
 	}
+}
+
+.popular-questions {
+	background: linear-gradient(135deg, #6366f1, #8b5cf6);
+	border-radius: 20px;
+	padding: 30px;
+	margin-bottom: 30px;
+	color: white;
+
+	h2 {
+		font-size: 24px;
+		margin-bottom: 20px;
+		display: flex;
+		align-items: center;
+	}
+
+	.popular-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 20px;
+
+		div {
+			background: rgba(255, 255, 255, 0.1);
+			border-radius: 15px;
+			padding: 20px;
+
+			h4 {
+				margin-bottom: 10px;
+			}
+
+			p {
+				font-size: 14px;
+				opacity: 0.9;
+			}
+		}
+	}
+}
+
+.faq-section {
+	margin-bottom: 40px;
+
+	h2 {
+		font-size: 22px;
+		font-weight: 600;
+		margin-bottom: 20px;
+		color: #1f2937;
+		display: flex;
+		align-items: center;
+
+		span:first-child {
+			width: 6px;
+			height: 6px;
+			background: #6366f1;
+			border-radius: 50%;
+			margin-right: 15px;
+		}
+
+		span:last-child {
+			margin-left: 10px;
+			font-size: 14px;
+			color: #6b7280;
+			font-weight: 400;
+		}
+	}
+
+	.faq-item {
+		background: white;
+		border-radius: 15px;
+		margin-bottom: 15px;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+		transition: transform 0.3s, box-shadow 0.3s;
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+		}
+
+		.faq-question {
+			padding: 20px;
+			cursor: pointer;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-weight: 500;
+			background: white;
+			transition: background-color 0.3s;
+		}
+	}
+
+	.faq-question {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		cursor: pointer;
+		padding: 15px 0;
+		border-bottom: 1px solid #e5e7eb;
+
+		span {
+			font-weight: 500;
+		}
+	}
+
+	.faq-toggle {
+		font-size: 20px;
+		color: #6366f1;
+	}
+
+	.faq-answer {
+		display: none;
+		padding: 15px 0;
+		color: #4b5563;
+		line-height: 1.6;
+	}
 }