over/under card almost done

Author: tylertraviss

frontend/src/components/Landing/OddsCard.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Flex, Image, Text } from "@chakra-ui/react"
 import { useColorModeValue } from "@/components/ui/color-mode"
 
 type MarketKey = "home" | "draw" | "away"
+type OverUnderKey = "over" | "under"
 
 interface BookInfo {
   name: string
@@ -24,6 +25,16 @@ export interface OddsCardProps {
   onSelect?: (market: MarketKey) => void
 }
 
+export interface OverUnderOddsCardProps {
+  homeTeam: string
+  awayTeam: string
+  marketLabel?: string
+  line?: string
+  over: Market
+  under: Market
+  onSelect?: (market: OverUnderKey) => void
+}
+
 interface OddsPillProps extends Market {
   label: string
   onSelect?: () => void
@@ -118,7 +129,7 @@ export function OddsCard({
 
   return (
     <Box
-      borderWidth="4px"
+      borderWidth="1px"
       borderRadius="2xl"
       borderColor={borderColor}
       bg={wrapperBg}
@@ -183,4 +194,87 @@ export function OddsCard({
   )
 }
 
+export function OverUnderOddsCard({
+  homeTeam,
+  awayTeam,
+  marketLabel = "Total",
+  line,
+  over,
+  under,
+  onSelect,
+}: OverUnderOddsCardProps) {
+  const wrapperBg = useColorModeValue("gray.50", "gray.800")
+  const borderColor = useColorModeValue("gray.200", "gray.600")
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderRadius="2xl"
+      borderColor={borderColor}
+      bg={wrapperBg}
+      px={10}
+      py={50}
+      w="full"
+      maxW="5xl"
+    >
+      <Flex
+        direction={{ base: "column", sm: "row" }}
+        justify="space-between"
+        align={{ base: "stretch", sm: "center" }}
+        gap={6}
+      >
+        <Flex
+          direction={{ base: "column", md: "row" }}
+          align="center"
+          justify="center"
+          gap={4}
+          minW={{ base: "full", md: "sm" }}
+        >
+          <Text
+            fontSize="2xl"
+            fontWeight="semibold"
+            textAlign={{ base: "center", md: "right" }}
+            lineHeight="short"
+          >
+            {homeTeam}
+          </Text>
+          <Box
+            px={3}
+            py={1}
+            borderRadius="full"
+            bg="teal.600"
+            color="white"
+            fontWeight="bold"
+            fontSize="sm"
+          >
+            VS
+          </Box>
+          <Text
+            fontSize="2xl"
+            fontWeight="semibold"
+            textAlign={{ base: "center", md: "left" }}
+            lineHeight="short"
+          >
+            {awayTeam}
+          </Text>
+        </Flex>
+        <Flex direction="column" align="center" justify="center" w="full" maxW="2xl" gap={4}>
+          <Text fontSize="sm" fontWeight="medium" color="teal.600" textTransform="uppercase">
+            {marketLabel}
+          </Text>
+          {line && (
+            <Text fontSize="3xl" fontWeight="semibold" color="fg.default">
+              {line}
+            </Text>
+          )}
+          <Flex justify="space-evenly" align="center" gap={10} w="full">
+            <MarketColumn title="OVER" market={over} onSelect={() => onSelect?.("over")} />
+            <MarketColumn title="UNDER" market={under} onSelect={() => onSelect?.("under")} />
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
+  )
+}
+
 export default OddsCard

frontend/src/routes/landing.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Container, Flex, Heading, Text } from "@chakra-ui/react"
 import { Link as RouterLink, createFileRoute } from "@tanstack/react-router"
 
 import { isLoggedIn } from "@/hooks/useAuth"
-import { OddsCard } from "@/components/Landing/OddsCard"
+import { OddsCard, OverUnderOddsCard } from "@/components/Landing/OddsCard"
 import { ColorModeButton } from "@/components/ui/color-mode"
 import useCustomToast from "@/hooks/useCustomToast"
 
@@ -41,6 +41,27 @@ function LandingPage() {
     },
   }
 
+  const totalsMarket = {
+    homeTeam: "Real Betis",
+    awayTeam: "Sevilla FC",
+    marketLabel: "Total Goals",
+    line: "2.5",
+    over: {
+      value: "-105",
+      book: {
+        name: "FanDuel",
+        logoUrl: "https://dummyimage.com/64x18/eeeeee/333333&text=FanDuel",
+      },
+    },
+    under: {
+      value: "-110",
+      book: {
+        name: "DraftKings",
+        logoUrl: "https://dummyimage.com/64x18/eeeeee/333333&text=DraftKings",
+      },
+    },
+  }
+
   return (
     <Container
       maxW="6xl"
@@ -114,6 +135,23 @@ function LandingPage() {
           }
         />
       </Flex>
+
+      <Flex direction="column" gap={6}>
+        <Heading as="h2" size="lg">
+          Totals, made simple
+        </Heading>
+        <Text color="fg.muted">
+          Surface edges on totals with streamlined over/under comparisons across your books.
+        </Text>
+        <OverUnderOddsCard
+          {...totalsMarket}
+          onSelect={(market) =>
+            showSuccessToast(
+              `Selected ${market.toUpperCase()} option on the featured totals market.`,
+            )
+          }
+        />
+      </Flex>
     </Container>
   )
 }