Implemented a simple counter app with increment, decrement, and reset…

… functionalities. The design is visually appealing and responsive.

src/pages/Index.jsx

@@ -1,20 +1,26 @@
-// Update this page (the content is just a fallback if you fail and example)
-// Use chakra-ui
-import { Container, Text, VStack } from "@chakra-ui/react";
-
-// Example of using react-icons
-// import { FaRocket } from "react-icons/fa";
-// <IconButton aria-label="Add" icon={<FaRocket />} size="lg" />; // IconButton would also have to be imported from chakra
+import { useState } from "react";
+import { Container, Text, VStack, Button, HStack } from "@chakra-ui/react";
 
 const Index = () => {
+  const [count, setCount] = useState(0);
+
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count - 1);
+  const reset = () => setCount(0);
+
   return (
     <Container centerContent maxW="container.md" height="100vh" display="flex" flexDirection="column" justifyContent="center" alignItems="center">
       <VStack spacing={4}>
-        <Text fontSize="2xl">Your Blank Canvas</Text>
-        <Text>Chat with the agent to start making edits.</Text>
+        <Text fontSize="4xl" fontWeight="bold">Counter App</Text>
+        <Text fontSize="2xl">{count}</Text>
+        <HStack spacing={4}>
+          <Button colorScheme="teal" size="lg" onClick={increment}>Increment</Button>
+          <Button colorScheme="orange" size="lg" onClick={decrement}>Decrement</Button>
+          <Button colorScheme="red" size="lg" onClick={reset}>Reset</Button>
+        </HStack>
       </VStack>
     </Container>
   );
 };
 
-export default Index;
+export default Index;