feat(features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx, features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx): ✨ update FAQ and benefits sections with new styles and responsive design adjustments
This commit is contained in:
parent
b625406614
commit
33abc8beb2
2 changed files with 13 additions and 0 deletions
|
|
@ -111,6 +111,7 @@ const Grid = styled.div`
|
|||
|
||||
@media (max-width: 640px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ const FAQSummary = styled.summary`
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
|
|
@ -115,6 +116,7 @@ const FAQSummary = styled.summary`
|
|||
font-weight: 300;
|
||||
color: var(--neon-gold);
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
${FAQDetails}[open] &::after {
|
||||
|
|
@ -124,6 +126,11 @@ const FAQSummary = styled.summary`
|
|||
&:hover {
|
||||
color: var(--neon-gold);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const FAQAnswer = styled.p`
|
||||
|
|
@ -132,4 +139,9 @@ const FAQAnswer = styled.p`
|
|||
color: ${(props) => props.theme.colors.text.secondary};
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0 1.25rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue