Add koor application page

Author: afgprogrammer

public/images/koor-vertical.png

@@ -0,0 +1,57 @@
+"use client";
+
+import { Box, GridCol, Image } from "@mantine/core";
+
+export default function ImageView() {
+  let deviceWidth = 1024;
+
+  if (typeof document !== "undefined") {
+    deviceWidth = document.documentElement.clientWidth;
+  }
+
+  return (
+    <GridCol
+      span={{ lg: 8 }}
+      pos="relative"
+      h={700}
+      style={{ overflow: "hidden" }}
+    >
+      {deviceWidth > 768 && (
+        <Box
+          w={350}
+          h={350}
+          style={{
+            right: 300,
+            top: 200,
+            position: "absolute",
+            background:
+              "linear-gradient(45deg, rgba(12, 0, 239, 0.66),rgba(0, 219, 239, 0.43))",
+            filter: "blur(100px)",
+          }}
+        ></Box>
+      )}
+      {deviceWidth > 768 ? (
+        <Image
+          src="/images/koor-vertical.png"
+          alt="Koor Flutter Application UI Kit"
+          style={{
+            position: "relative",
+            width: "100%",
+            left: 120,
+            top: -220,
+            transform: "rotate(-10deg)",
+          }}
+        />
+      ) : (
+        <Image
+          src="/images/koor-vertical.png"
+          alt="Koor Flutter Application UI Kit"
+          style={{
+            position: "relative",
+            width: "100%",
+          }}
+        />
+      )}
+    </GridCol>
+  );
+}

src/app/flutter/koor-ui-kit/components/ImageView.tsx

@@ -0,0 +1,95 @@
+import {
+  Button,
+  Container,
+  Grid,
+  GridCol,
+  Group,
+  Space,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+import Link from "next/link";
+import ImageView from "./components/ImageView";
+
+export const metadata = {
+  title: "Flutter Real Estate Application UI Kit",
+  description:
+    "A beautiful and modern real estate application UI Kit designed with Flutter. It includes 40+ screens and 100+ components, all built with clean code and easy to use.",
+};
+
+export default function FlutterKoorPage() {
+  return (
+    <Container size="xl" pos="relative">
+      <Space h={{ md: 100, base: 42 }} />
+      <Grid>
+        <GridCol span={{ lg: 4 }} pos="relative">
+          <Title
+            fz={{ xs: 52 }}
+            fw={700}
+            style={{
+              wordSpacing: -1,
+            }}
+            c={"light-dark(var(--mantine-color-dark-9), white)"}
+          >
+            Flutter Real Estate Application UI Kit
+          </Title>
+          <Space h={20} />
+          <Text
+            fz={{ base: 22 }}
+            c="light-dark(var(--mantine-color-gray-7), white)"
+          >
+            A beautiful and modern real estate application UI Kit designed with
+            Flutter.
+          </Text>
+          <Space h={16} />
+          <Group>
+            <IconCheck color={"var(--mantine-color-green-5)"} />
+            <Text fz={18}>40+ Screens</Text>
+          </Group>
+          <Space h={8} />
+          <Group>
+            <IconCheck color={"var(--mantine-color-green-5)"} />
+            <Text fz={18}>100+ Components</Text>
+          </Group>
+          <Space h={8} />
+          <Group>
+            <IconCheck color={"var(--mantine-color-green-5)"} />
+            <Text fz={18}>Clean Code</Text>
+          </Group>
+          <Space h={8} />
+          <Group>
+            <IconCheck color={"var(--mantine-color-green-5)"} />
+            <Text fz={18}>Easy to Use</Text>
+          </Group>
+          <Space h={32} />
+          <Group>
+            <Button
+              component={Link}
+              href="https://instagram.com/theflutterlover"
+              color="pink"
+              radius="xl"
+              size="lg"
+              px={32}
+              target="_blank"
+            >
+              Buy Now ($128)
+            </Button>
+            <Button
+              component={Link}
+              href="https://koor-ui-kit.vercel.app/"
+              color="pink"
+              variant="outline"
+              radius="xl"
+              size="lg"
+              target="_blank"
+            >
+              Live Demo
+            </Button>
+          </Group>
+        </GridCol>
+        <ImageView />
+      </Grid>
+    </Container>
+  );
+}