|
| 1 | +import { Box, Collapsible, Heading, Text, VStack } from "@chakra-ui/react"; |
| 2 | +import { useState } from "react"; |
| 3 | +import { LuChevronDown, LuChevronRight } from "react-icons/lu"; |
| 4 | + |
| 5 | +import { useBlogArticleTheme } from "../../chakra-starter/marketing-ui/BlogArticle/useBlogArticleTheme"; |
| 6 | + |
| 7 | +type Benefit = { |
| 8 | + id: string; |
| 9 | + title: string; |
| 10 | + summary: string; |
| 11 | + details: string; |
| 12 | +}; |
| 13 | + |
| 14 | +const benefits: Benefit[] = [ |
| 15 | + { |
| 16 | + id: "real-estate", |
| 17 | + title: "Optimized Real Estate", |
| 18 | + summary: "Reduce your office footprint by up to 30%", |
| 19 | + details: |
| 20 | + "Desk booking data reveals exactly how much space you actually need. Most companies discover they can consolidate floors, sublease unused space, or avoid renewing costly leases. For a mid-size firm, this alone can save hundreds of thousands annually.", |
| 21 | + }, |
| 22 | + { |
| 23 | + id: "productivity", |
| 24 | + title: "Higher Productivity", |
| 25 | + summary: "Eliminate desk hunting and wasted time", |
| 26 | + details: |
| 27 | + "Employees can book the right space for their task in seconds. No more wandering the office searching for a spot. The time saved across your entire workforce compounds into thousands of productive hours regained each year.", |
| 28 | + }, |
| 29 | + { |
| 30 | + id: "retention", |
| 31 | + title: "Increased Employee Retention", |
| 32 | + summary: "Flexibility drives satisfaction and loyalty", |
| 33 | + details: |
| 34 | + "A well-managed hybrid workplace shows employees you trust them. Giving people choice over where and how they work improves engagement and reduces turnover, which is one of the largest hidden costs for any organization.", |
| 35 | + }, |
| 36 | + { |
| 37 | + id: "collaboration", |
| 38 | + title: "Better Collaboration", |
| 39 | + summary: "Keep teams connected without assigned seats", |
| 40 | + details: |
| 41 | + "Team members can see who is in the office and book desks near each other. This spontaneous collaboration is lost in chaotic hot-desking setups but preserved with an intentional booking system.", |
| 42 | + }, |
| 43 | + { |
| 44 | + id: "data", |
| 45 | + title: "Data-Driven Decisions", |
| 46 | + summary: "Stop guessing, start optimizing", |
| 47 | + details: |
| 48 | + "Detailed analytics on utilization patterns, peak days, and no-show rates give you the evidence you need to make smart real estate and policy decisions. No more relying on gut feelings or outdated spreadsheets.", |
| 49 | + }, |
| 50 | +]; |
| 51 | + |
| 52 | +export const BenefitsBreakdown = () => { |
| 53 | + const { theme } = useBlogArticleTheme(); |
| 54 | + const [openIds, setOpenIds] = useState<string[]>([]); |
| 55 | + |
| 56 | + const bgColor = theme === "dark" ? "gray.800" : "orange.50"; |
| 57 | + const cardBg = theme === "dark" ? "gray.700" : "white"; |
| 58 | + const borderColor = theme === "dark" ? "gray.600" : "orange.200"; |
| 59 | + |
| 60 | + const toggle = (id: string) => { |
| 61 | + setOpenIds((prev) => |
| 62 | + prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id], |
| 63 | + ); |
| 64 | + }; |
| 65 | + |
| 66 | + return ( |
| 67 | + <Box |
| 68 | + borderWidth={1} |
| 69 | + borderColor={borderColor} |
| 70 | + borderRadius="lg" |
| 71 | + bg={bgColor} |
| 72 | + p={{ base: 4, md: 6 }} |
| 73 | + maxWidth={{ base: "100%", md: "80%" }} |
| 74 | + mx="auto" |
| 75 | + > |
| 76 | + <Heading size="md" mb={2}> |
| 77 | + Benefits Breakdown |
| 78 | + </Heading> |
| 79 | + <Text fontSize="sm" mb={4} opacity={0.7}> |
| 80 | + Click each benefit to learn more |
| 81 | + </Text> |
| 82 | + |
| 83 | + <VStack gap={3} align="stretch"> |
| 84 | + {benefits.map((benefit) => { |
| 85 | + const isOpen = openIds.includes(benefit.id); |
| 86 | + return ( |
| 87 | + <Collapsible.Root |
| 88 | + key={benefit.id} |
| 89 | + open={isOpen} |
| 90 | + onOpenChange={() => toggle(benefit.id)} |
| 91 | + > |
| 92 | + <Box |
| 93 | + as="button" |
| 94 | + display="flex" |
| 95 | + alignItems="center" |
| 96 | + width="full" |
| 97 | + textAlign="left" |
| 98 | + p={4} |
| 99 | + borderRadius="md" |
| 100 | + borderWidth={1} |
| 101 | + borderColor={borderColor} |
| 102 | + bg={cardBg} |
| 103 | + cursor="pointer" |
| 104 | + _hover={{ borderColor: "orange.400" }} |
| 105 | + > |
| 106 | + <Box flex="1"> |
| 107 | + <Text fontWeight="bold" fontSize="sm"> |
| 108 | + {benefit.title} |
| 109 | + </Text> |
| 110 | + <Text fontSize="xs" mt={1} opacity={0.7}> |
| 111 | + {benefit.summary} |
| 112 | + </Text> |
| 113 | + </Box> |
| 114 | + {isOpen ? ( |
| 115 | + <LuChevronDown size={18} /> |
| 116 | + ) : ( |
| 117 | + <LuChevronRight size={18} /> |
| 118 | + )} |
| 119 | + </Box> |
| 120 | + <Collapsible.Content> |
| 121 | + <Box |
| 122 | + p={4} |
| 123 | + mt={1} |
| 124 | + borderRadius="md" |
| 125 | + bg={theme === "dark" ? "gray.700" : "orange.100"} |
| 126 | + fontSize="sm" |
| 127 | + > |
| 128 | + {benefit.details} |
| 129 | + </Box> |
| 130 | + </Collapsible.Content> |
| 131 | + </Collapsible.Root> |
| 132 | + ); |
| 133 | + })} |
| 134 | + </VStack> |
| 135 | + </Box> |
| 136 | + ); |
| 137 | +}; |
0 commit comments