Build exceptional React apps with blazing speed.

import { Fire, Tag } from "@phosphor-icons/react";
import { Card, Image, Text, Chip, Button, Flex, fr } from "@prismane/core";

export default function App() {
  return (
    <Card w={360} h={540} gap={fr(2)}>
      <Image 
        src="https://i.pinimg.com/originals/c0/1f/4c/c01f4c611c6ecaa688d25ddf1259b4aa.jpg" 
        br="base" 
        fit="cover"
        mb={fr(2)}
      />
      <Flex gap={fr(2)}>
        <Chip icon={<Fire />}>On Sale</Chip>
        <Chip icon={<Tag />} color="teal">New</Chip>
      </Flex>
      <Flex direction="column">
        <Text fs="2xl" fw="bold" cl={["base", 900]}>Modern Sofa</Text>
        <Text cl={["base", 700]}>
          Experience the ultimate comfort and style with our luxurious sofa, 
          designed to elevate your living space.
        </Text>
      </Flex>
      <Text fw="bold" fs="2xl" cl="primary">$500</Text>
      <Flex gap={fr(4)} mt="auto">
        <Button>Buy Now</Button>
        <Button variant="tertiary" color="base">Add To Cart</Button>
      </Flex>
    </Card>
  );
}