Skip to content

Commit 622195e

Browse files
AldemirLucasAldemirLucas
authored
Merge pull request #1584 from basedosdados/feat/chatbot_lp_att
Feat/chatbot lp att
2 parents 75ecd73 + edd12db commit 622195e

5 files changed

Lines changed: 100 additions & 271 deletions

File tree

‎next/pages/chatbot-lp.js‎

Lines changed: 81 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ import {
66
Box,
77
Stack,
88
VStack,
9-
Accordion,
10-
AccordionItem,
11-
AccordionButton,
12-
AccordionPanel,
13-
Text,
149
Skeleton,
1510
} from "@chakra-ui/react";
1611
import Head from "next/head";
@@ -28,7 +23,6 @@ import TitleText from "../components/atoms/Text/TitleText";
2823
import BodyText from "../components/atoms/Text/BodyText";
2924
import LabelText from "../components/atoms/Text/LabelText";
3025
import QuestionsBox from "../components/molecules/QuestionsBox";
31-
import TypewriterConsole from "../components/atoms/TypewriterConsole";
3226
import Button from "../components/atoms/Button";
3327
import Toggle from "../components/atoms/Toggle";
3428
import CheckIcon from "../public/img/icons/checkIcon";
@@ -97,10 +91,9 @@ function ChatbotPricingCardSkeleton() {
9791
display="flex"
9892
flexDirection="column"
9993
width="100%"
94+
maxWidth="600px"
95+
margin="0 auto"
10096
height="100%"
101-
minHeight={{ base: "auto", lg: "480px" }}
102-
borderRadius="16px"
103-
boxShadow="0 2px 16px 0 rgba(100, 96, 103, 0.16)"
10497
padding="40px 24px"
10598
backgroundColor="#FFFFFF"
10699
>
@@ -204,7 +197,7 @@ function ChatbotPricingCardSkeleton() {
204197
);
205198
}
206199

207-
function ChatbotPricingCard({ highlightedFeature }) {
200+
function ChatbotPricingCard() {
208201
const { t } = useTranslation(["chatbot", "prices"]);
209202
const router = useRouter();
210203
const { locale } = router;
@@ -228,8 +221,7 @@ function ChatbotPricingCard({ highlightedFeature }) {
228221
: totalPrice;
229222

230223
const planInterval = toggleAnual ? "year" : "month";
231-
const isCurrentPlan =
232-
isBDChatbot.isCurrentPlan && isBDChatbot.planInterval === planInterval;
224+
const isCurrentPlan = isBDChatbot.isCurrentPlan;
233225

234226
useEffect(() => {
235227
async function loadData() {
@@ -311,12 +303,14 @@ function ChatbotPricingCard({ highlightedFeature }) {
311303

312304
return (
313305
<Box
306+
id="chatbot-pricing"
307+
scrollMargin="100px"
314308
display="flex"
315309
flexDirection="column"
316310
width="100%"
311+
maxWidth="600px"
312+
margin="0 auto"
317313
height="100%"
318-
borderRadius="16px"
319-
boxShadow="0 2px 16px 0 rgba(100, 96, 103, 0.16)"
320314
padding="40px 24px"
321315
backgroundColor="#FFFFFF"
322316
>
@@ -406,32 +400,21 @@ function ChatbotPricingCard({ highlightedFeature }) {
406400
</Box>
407401

408402
<VStack align="stretch" spacing="8px" flex={1} marginBottom="32px">
409-
{features.map((feature, index) => {
410-
const isHighlighted = highlightedFeature === index;
411-
412-
return (
413-
<Box
414-
key={feature}
415-
display="flex"
416-
flexDirection="row"
417-
alignItems="center"
418-
gap="8px"
419-
padding="8px"
420-
borderRadius="8px"
421-
backgroundColor={isHighlighted ? "#E8F5EC" : "transparent"}
422-
transition="background-color 0.25s ease"
423-
>
424-
<CheckIcon width="24px" height="24px" fill="#2B8C4D" />
425-
<BodyText
426-
alignItems="center"
427-
color={isHighlighted ? "#252A32" : "#464A51"}
428-
fontWeight={isHighlighted ? "500" : "400"}
429-
>
430-
{feature}
431-
</BodyText>
432-
</Box>
433-
);
434-
})}
403+
{features.map((feature) => (
404+
<Box
405+
key={feature}
406+
display="flex"
407+
flexDirection="row"
408+
alignItems="center"
409+
gap="8px"
410+
padding="8px"
411+
>
412+
<CheckIcon width="24px" height="24px" fill="#2B8C4D" />
413+
<BodyText alignItems="center" color="#464A51">
414+
{feature}
415+
</BodyText>
416+
</Box>
417+
))}
435418
</VStack>
436419

437420
<Box marginTop="auto" width="100%">
@@ -499,7 +482,6 @@ function ChatbotPricingCard({ highlightedFeature }) {
499482

500483
function WhyChatbotSection() {
501484
const { t, ready } = useTranslation("chatbot");
502-
const [activeIndex, setActiveIndex] = useState(0);
503485
const isMobile = isMobileMod();
504486

505487
if (!ready) return null;
@@ -534,77 +516,46 @@ function WhyChatbotSection() {
534516
justifyContent="space-between"
535517
alignItems={{ base: "center", lg: "stretch" }}
536518
gap="40px"
537-
flexDirection={{ base: "column", lg: "row" }}
519+
flexDirection="column"
538520
spacing={0}
539521
>
540522
<Box
541523
flex={1}
542-
maxWidth={{ base: "100%", lg: "624px" }}
524+
maxWidth="100%"
543525
width="100%"
544526
alignSelf="stretch"
527+
display="grid"
528+
gridTemplateColumns={{ base: "1fr", lg: "1fr 1fr" }}
529+
gap="40px"
545530
>
546-
<Accordion
547-
index={activeIndex}
548-
onChange={(index) => setActiveIndex(index)}
549-
width="100%"
550-
>
551-
{items.map((elm, index) => (
552-
<AccordionItem
553-
key={elm.title}
554-
borderTopWidth="0"
555-
borderBottomWidth="1px"
556-
padding="10px 0"
531+
{items.map((elm) => (
532+
<Box key={elm.title}>
533+
<TitleText
534+
typography={isMobile ? "small" : "medium"}
535+
textAlign="left"
536+
color="#252A32"
537+
marginBottom="8px"
538+
>
539+
{elm.title}
540+
</TitleText>
541+
<BodyText
542+
typography={isMobile ? "medium" : "large"}
543+
color="#464A51"
557544
>
558-
<AccordionButton
559-
padding={index === activeIndex ? "24px 0 0" : "24px 0"}
560-
_hover={{ backgroundColor: "transparent" }}
561-
>
562-
<TitleText
563-
typography={isMobile ? "small" : "medium"}
564-
display="flex"
565-
width="100%"
566-
flexDirection="row"
567-
justifyContent="space-between"
568-
textAlign="left"
569-
color={index === activeIndex ? "#252A32" : "#71757A"}
570-
_hover={{ color: "#252A32" }}
571-
>
572-
{elm.title}
573-
<Text
574-
display={activeIndex === index ? "none" : "flex"}
575-
fontSize="32px"
576-
fontWeight="300"
577-
color="#2B8C4D"
578-
>
579-
+
580-
</Text>
581-
</TitleText>
582-
</AccordionButton>
583-
<AccordionPanel padding="8px 0 24px">
584-
<BodyText
585-
typography={isMobile ? "medium" : "large"}
586-
color="#464A51"
587-
>
588-
{elm.content}
589-
</BodyText>
590-
</AccordionPanel>
591-
</AccordionItem>
592-
))}
593-
</Accordion>
545+
{elm.content}
546+
</BodyText>
547+
</Box>
548+
))}
594549
</Box>
595550

596551
<Box
597-
id="chatbot-pricing"
598-
scrollMargin="100px"
599-
width={{ base: "100%", lg: "400px" }}
552+
width="100%"
600553
maxWidth="100%"
601554
flexShrink={0}
602555
display="flex"
603-
alignSelf={{ base: "center", lg: "stretch" }}
556+
alignSelf="stretch"
604557
>
605-
<ChatbotPricingCard
606-
highlightedFeature={items[activeIndex]?.highlightFeature}
607-
/>
558+
<ChatbotPricingCard />
608559
</Box>
609560
</Stack>
610561
</VStack>
@@ -687,7 +638,6 @@ function VideoPlayer({ src }) {
687638

688639
function Hero({ t }) {
689640
const router = useRouter();
690-
const prompts = t("hero.prompts", { returnObjects: true });
691641
const [hasChatbotAccess, setHasChatbotAccess] = useState(false);
692642

693643
useEffect(() => {
@@ -731,11 +681,7 @@ function Hero({ t }) {
731681
};
732682
}, []);
733683

734-
const heroPromptButtonText = hasChatbotAccess
735-
? t("hero.buttonPrompt.textStart")
736-
: t("hero.buttonPrompt.textSubscribe");
737-
738-
const handleHeroPromptClick = () => {
684+
const handleHeroButtonClick = () => {
739685
if (hasChatbotAccess) {
740686
router.push("/chatbot");
741687
return;
@@ -755,6 +701,7 @@ function Hero({ t }) {
755701
minHeight={{ base: "800px", lg: "700px" }}
756702
backgroundColor="#FFFFFF"
757703
padding="40px 24px"
704+
marginTop={{ base: "0", lg:"50px"}}
758705
overflow="hidden"
759706
>
760707
<Box
@@ -776,93 +723,56 @@ function Hero({ t }) {
776723
"radial-gradient(ellipse 95% 95% at 50% 50%, #fff 0%, rgba(255,255,255,0.45) 45%, transparent 72%)",
777724
}}
778725
/>
779-
<VStack gap="32px" spacing="0" textAlign="center" zIndex="2">
726+
<VStack spacing="0" textAlign="center" zIndex="2">
780727
<Display
781728
as="h1"
782-
typography={isMobileMod() ? "small" : "medium"}
783-
maxWidth="700px"
729+
typography={isMobileMod() ? "small" : "large"}
730+
maxWidth="1000px"
784731
textAlign="center"
785732
>
786-
{t("hero.title.prefix")}{" "}
787-
<Box as="span" color="#2B8C4D" fontStyle="italic" display="inline">
788-
{t("hero.title.highlight1")}
789-
</Box>{" "}
790-
{t("hero.title.middle")}{" "}
791-
<Box as="span" color="#2B8C4D" fontStyle="italic" display="inline">
792-
{t("hero.title.highlight2")}
793-
</Box>{" "}
794-
{t("hero.title.suffix")}
733+
{t("hero.title")}
795734
</Display>
796-
<TypewriterConsole
797-
messages={prompts}
798-
textBtn={heroPromptButtonText}
799-
onClickBtn={handleHeroPromptClick}
800-
targetBtn={hasChatbotAccess ? "_blank" : "_self"}
801-
/>
735+
<TitleText
736+
as="h2"
737+
maxWidth="1440px"
738+
color="#71757A"
739+
paddingTop="16px"
740+
typography={isMobileMod() ? "small" : "medium"}
741+
>
742+
{t("hero.description")}
743+
</TitleText>
802744
<Button
803-
marginTop="32px !important"
804-
width="160px !important"
805-
justifyContent="center"
806-
alignItems="center"
807-
display="flex"
808-
height="40px !important"
809-
backgroundColor="#464A51"
810-
_hover={{
811-
backgroundColor: "#71757A",
812-
}}
813-
onClick={scrollToPresentation}
745+
height="54px"
746+
width={isMobileMod() ? "100%" : "fit-content"}
747+
margin="32px 0 !important"
748+
justifyContent={{ base: "center", md: "flex-start" }}
749+
onClick={handleHeroButtonClick}
814750
>
815-
{t("hero.buttonScroll.text")}
751+
<LabelText
752+
typography={isMobileMod() ? "medium" : "x-large"}
753+
color="currentColor"
754+
>
755+
{t("hero.button")}
756+
</LabelText>
816757
</Button>
817758
</VStack>
818-
</Box>
819-
);
820-
}
821-
822-
function Presentation({ t }) {
823-
const isMobile = isMobileMod();
824-
825-
return (
826-
<VStack width="100%" padding="80px 24px" spacing="24px">
827-
<Display
828-
as="h2"
829-
typography={isMobile ? "small" : "medium"}
830-
width="100%"
831-
maxWidth="800px"
832-
textAlign="center"
833-
margin="0 auto"
834-
>
835-
{t("presentation.title")}
836-
</Display>
837-
838-
<TitleText
839-
as="h3"
840-
maxWidth="1000px"
841-
typography={isMobileMod() ? "small" : "small"}
842-
fontWeight="400"
843-
color="#464A51"
844-
>
845-
{t("presentation.description")}
846-
</TitleText>
847-
848759
<Box
849-
id="presentation"
850-
scrollMargin={isMobile ? "320px" : "250px"}
851760
display="flex"
852761
alignItems="center"
853762
justifyContent="center"
854-
width="fit-content"
855-
maxWidth="800px"
856-
height={{ base: "auto", md: "450px" }}
857-
minHeight={{ base: "250px", md: "450px" }}
858-
backgroundColor="#F9F9F9"
763+
width="100%"
764+
height="100%"
765+
maxWidth="1200px"
766+
margin="40px 0"
767+
backgroundColor="#FFF"
859768
boxShadow="0px 1.6px 16px rgba(100, 96, 103, 0.16)"
860769
borderRadius="16px"
861770
overflow="hidden"
771+
zIndex="2"
862772
>
863773
<VideoPlayer src="https://storage.googleapis.com/basedosdados-website/video/modo_de_usar_chatbot.mp4" />
864774
</Box>
865-
</VStack>
775+
</Box>
866776
);
867777
}
868778

@@ -935,7 +845,6 @@ export default function ChatbotLPPage({ faqs }) {
935845
<meta property="og:title" content={t('head.metaTitle')} key="ogtitle" />
936846
</Head>
937847
<Hero t={t} />
938-
<Presentation t={t} />
939848
<WhyChatbotSection />
940849
<FAQ t={t} faqs={faqs} />
941850
</MainPageTemplate>

0 commit comments

Comments
 (0)