[web] interviews/marketing: fix homepage QA issues (#1004)
This commit is contained in:
Nitesh Seram
GitHub
parent
434a2fa54a
commit
0073d605ac
|
|
@ -17,7 +17,6 @@ import {
|
|||
themeBorderElementColor,
|
||||
themeOutlineElement_FocusVisible,
|
||||
themeOutlineElementBrandColor_FocusVisible,
|
||||
themeTextSubtitleColor,
|
||||
themeWhiteGlowCardBackground,
|
||||
} from '~/components/ui/theme';
|
||||
import Tooltip from '~/components/ui/Tooltip';
|
||||
|
|
@ -174,10 +173,10 @@ export default function InterviewsTestimonialsSlider({ data }: Props) {
|
|||
];
|
||||
|
||||
const sliderNavigation = (
|
||||
<TabsPrimitive.List className="flex justify-center gap-4">
|
||||
<TabsPrimitive.List className="flex justify-center gap-3">
|
||||
{data.map((item) => (
|
||||
<TabsPrimitive.Trigger key={item.id} asChild={true} value={item.id}>
|
||||
<button aria-label={item.id} className="w-12 py-1.5" type="button">
|
||||
<button aria-label={item.id} className="w-12 py-[5px]" type="button">
|
||||
<div
|
||||
className={clsx(
|
||||
'h-1 w-full rounded',
|
||||
|
|
@ -235,12 +234,7 @@ export default function InterviewsTestimonialsSlider({ data }: Props) {
|
|||
/>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Heading
|
||||
className={themeTextSubtitleColor}
|
||||
color="custom"
|
||||
level="heading6">
|
||||
{label}
|
||||
</Heading>
|
||||
<Heading level="heading6">{label}</Heading>
|
||||
{logos && (
|
||||
<div className="isolate flex">
|
||||
{logos.map((logo, index) => (
|
||||
|
|
|
|||
|
|
@ -127,94 +127,93 @@ export default function InterviewsMarketingContactSection() {
|
|||
id="RdVD3x"
|
||||
/>
|
||||
</Heading>
|
||||
<Text
|
||||
className={clsx(
|
||||
'mt-6 block',
|
||||
'text-base lg:text-lg',
|
||||
'lg:font-medium',
|
||||
'lg:max-w-[634px]',
|
||||
)}
|
||||
color="secondary"
|
||||
size="inherit"
|
||||
weight="inherit">
|
||||
<FormattedMessage
|
||||
defaultMessage="Have questions, feedback, or anything to say? Tell us. We usually get back within 1-2 days."
|
||||
description="Marketing page section subtitle"
|
||||
id="ZXUeF4"
|
||||
/>
|
||||
</Text>
|
||||
<Section>
|
||||
<div
|
||||
className={clsx(
|
||||
'mt-12 lg:mt-16',
|
||||
'grid gap-x-6 gap-y-12 md:gap-x-6 lg:grid-cols-12',
|
||||
)}>
|
||||
<div className="flex flex-col gap-10 lg:col-span-5">
|
||||
<Text
|
||||
className={clsx(
|
||||
'block',
|
||||
'text-base lg:text-lg',
|
||||
'lg:font-medium',
|
||||
'max-w-md lg:max-w-2xl',
|
||||
)}
|
||||
color="secondary"
|
||||
size="inherit"
|
||||
weight="inherit">
|
||||
<FormattedMessage
|
||||
defaultMessage="Have questions, feedback, or anything to say? Tell us. We usually get back within 1-2 days."
|
||||
description="Marketing page section subtitle"
|
||||
id="ZXUeF4"
|
||||
/>
|
||||
</Text>
|
||||
<div
|
||||
className={clsx(
|
||||
'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1',
|
||||
'gap-4 xl:gap-6',
|
||||
'-py-5',
|
||||
)}>
|
||||
{data.map(({ key, label, icon: Icon, href, tooltip }) => (
|
||||
<div
|
||||
className={clsx(
|
||||
'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1',
|
||||
'lg:col-span-5',
|
||||
'gap-0 md:gap-x-6 lg:gap-0',
|
||||
'-mt-5',
|
||||
)}>
|
||||
{data.map(({ key, label, icon: Icon, href, tooltip }) => (
|
||||
<div
|
||||
key={key}
|
||||
className={clsx(
|
||||
'group relative',
|
||||
'flex items-center gap-4',
|
||||
'py-5',
|
||||
['border-b', themeBorderColor],
|
||||
'last:border-b-0 md:last:border-b lg:last:border-b-0',
|
||||
)}>
|
||||
<div
|
||||
key={key}
|
||||
className={clsx(
|
||||
'group relative',
|
||||
'flex items-center gap-4',
|
||||
'py-5',
|
||||
['border-b', themeBorderColor],
|
||||
'last:border-b-0 md:last:border-b lg:last:border-b-0',
|
||||
'flex items-center justify-center',
|
||||
'rounded',
|
||||
'size-8',
|
||||
['border', themeBorderColor],
|
||||
themeBorderBrandColor_GroupHover,
|
||||
'transition-colors',
|
||||
)}>
|
||||
<div
|
||||
<Icon
|
||||
aria-hidden={true}
|
||||
className={clsx(
|
||||
'flex items-center justify-center',
|
||||
'rounded',
|
||||
'size-8',
|
||||
['border', themeBorderColor],
|
||||
themeBorderBrandColor_GroupHover,
|
||||
'transition-colors',
|
||||
)}>
|
||||
<Icon
|
||||
aria-hidden={true}
|
||||
className={clsx(
|
||||
'size-5 shrink-0',
|
||||
themeTextSubtitleColor,
|
||||
themeTextBrandColor_GroupHover,
|
||||
'transition-colors',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<Text color="subtitle" size="body2" weight="medium">
|
||||
{label}
|
||||
</Text>
|
||||
{tooltip && (
|
||||
<Tooltip label={tooltip}>
|
||||
<RiInformationLine
|
||||
className={clsx(
|
||||
'size-4 relative z-[1] shrink-0',
|
||||
themeTextSubtleColor,
|
||||
)}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<RiArrowRightLine
|
||||
className={clsx(
|
||||
'size-5 transition-colors',
|
||||
themeTextSubtleColor,
|
||||
'size-5 shrink-0',
|
||||
themeTextSubtitleColor,
|
||||
themeTextBrandColor_GroupHover,
|
||||
'transition-colors',
|
||||
)}
|
||||
/>
|
||||
<Anchor
|
||||
aria-label={key}
|
||||
className="absolute inset-0"
|
||||
href={href}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<Text color="subtitle" size="body2" weight="medium">
|
||||
{label}
|
||||
</Text>
|
||||
{tooltip && (
|
||||
<Tooltip label={tooltip}>
|
||||
<RiInformationLine
|
||||
className={clsx(
|
||||
'size-4 relative z-[1] shrink-0',
|
||||
themeTextSubtleColor,
|
||||
)}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<RiArrowRightLine
|
||||
className={clsx(
|
||||
'size-5 transition-colors',
|
||||
themeTextSubtleColor,
|
||||
themeTextBrandColor_GroupHover,
|
||||
)}
|
||||
/>
|
||||
<Anchor
|
||||
aria-label={key}
|
||||
className="absolute inset-0"
|
||||
href={href}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="hidden lg:col-span-1 lg:block" />
|
||||
<div className="lg:col-span-6">
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export default function InterviewsMarketingHeroNew({ testimonials }: Props) {
|
|||
<div className="flex flex-col gap-x-16 gap-y-6 md:flex-row">
|
||||
<div
|
||||
className={clsx(
|
||||
'flex flex-col items-start gap-4',
|
||||
'flex flex-col items-center gap-4',
|
||||
'transition-opacity',
|
||||
'duration-1000',
|
||||
DELAY_THIRD,
|
||||
|
|
|
|||
|
|
@ -317,7 +317,6 @@ export default function InterviewsMarketingPracticeQuestionBankSection({
|
|||
<div className="hidden md:block">
|
||||
<SideNavigation
|
||||
activeValue={filterNavigation.value}
|
||||
fontSize="medium"
|
||||
items={filterNavigation.items}
|
||||
onClick={filterNavigation.onClick}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -376,7 +376,6 @@ export default function InterviewsMarketingSolutionsByExInterviewersSection() {
|
|||
<div className="hidden lg:block">
|
||||
<SideNavigation
|
||||
activeValue={selectedQuestion}
|
||||
fontSize="medium"
|
||||
items={questions}
|
||||
onClick={(value) => {
|
||||
setSelectedQuestion(value);
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ export default function InterviewsMarketingEmbedSection({
|
|||
'scroll-mt-16',
|
||||
)}>
|
||||
<Container
|
||||
className={clsx('relative', 'flex flex-col gap-y-10')}
|
||||
className={clsx('relative', 'flex flex-col gap-y-8')}
|
||||
width="screen-xl">
|
||||
<motion.div
|
||||
style={{
|
||||
|
|
|
|||
Loading…
Reference in New Issue