+
+ );
+};
+
+export function CardPattern({ mouseX, mouseY, randomString }: any) {
+ const smallerScreen = window.innerWidth <= 768;
+ let maskImage = smallerScreen
+ ? useMotionTemplate`radial-gradient(550px at ${mouseX}px ${mouseY}px, white, transparent)`
+ : useMotionTemplate`radial-gradient(700px at ${mouseX}px ${mouseY}px, white, transparent)`;
+
+ let style = { maskImage, WebkitMaskImage: maskImage };
+
+ return (
+
+
+ 
+ 
+
+
+
+
+
+ );
+}
+
+const characters =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+export const generateRandomString = (length: number) => {
+ let result = "";
+ for (let i = 0; i < length; i++) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+ return result;
+};
+
+export const Icon = ({ className, ...rest }: any) => {
+ return (
+
+ );
+};
diff --git a/src/components/Backgorund and content/MainPage.tsx b/src/components/Backgorund and content/MainPage.tsx
new file mode 100644
index 0000000..6787fd9
--- /dev/null
+++ b/src/components/Backgorund and content/MainPage.tsx
@@ -0,0 +1,12 @@
+import { BackgroundAndContent } from "./BackgroundAndContent";
+
+export function MainPage() {
+ return (
+ + {randomString} +
+
+
+ );
+}
diff --git a/src/index.css b/src/index.css
index ec2585e..17df0e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/utils/cn.ts b/src/utils/cn.ts
new file mode 100644
index 0000000..cec6ac9
--- /dev/null
+++ b/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..3899361
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,45 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {
+ fontFamily: {
+ Lexend: ["Lexend", "sans-serif"],
+ },
+ colors: {
+ Main_Colour: "#5024FF",
+ },
+ textShadow: {
+ default: "2px 2px 4px rgba(0, 0, 0, 0.1)",
+ md: "3px 3px 6px rgba(0, 0, 0, 0.15)",
+ lg: "0px 0px 10px white",
+ xl: "5px 5px 10px rgba(0, 0, 0, 0.25)",
+ none: "none",
+ },
+ },
+ },
+ plugins: [
+ function ({ addUtilities }) {
+ addUtilities(
+ {
+ ".text-shadow": {
+ textShadow: "2px 2px 4px rgba(0, 0, 0, 0.1)",
+ },
+ ".text-shadow-md": {
+ textShadow: "3px 3px 6px rgba(0, 0, 0, 0.15)",
+ },
+ ".text-shadow-lg": {
+ textShadow: "0px 0px 5px white",
+ },
+ ".text-shadow-xl": {
+ textShadow: "5px 5px 10px rgba(0, 0, 0, 0.25)",
+ },
+ ".text-shadow-none": {
+ textShadow: "none",
+ },
+ },
+ ["responsive", "hover"]
+ );
+ },
+ ],
+};
+ © 2023 Rize Labs, HQ Singapore
+
+