diff --git a/public/border/darkPinkBorder.webp b/public/border/darkPinkBorder.webp
new file mode 100644
index 00000000..c1912139
Binary files /dev/null and b/public/border/darkPinkBorder.webp differ
diff --git a/public/border/lightPinkBorder.webp b/public/border/lightPinkBorder.webp
new file mode 100644
index 00000000..bf030718
Binary files /dev/null and b/public/border/lightPinkBorder.webp differ
diff --git a/public/border/transparentBorder.webp b/public/border/transparentBorder.webp
new file mode 100644
index 00000000..19c117be
Binary files /dev/null and b/public/border/transparentBorder.webp differ
diff --git a/public/border/whiteBrownBorder.webp b/public/border/whiteBrownBorder.webp
new file mode 100644
index 00000000..953f64f2
Binary files /dev/null and b/public/border/whiteBrownBorder.webp differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2e402ff5..67c0cf5e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,6 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
-import Image from 'next/image';
const inter = Inter({ subsets: ['latin'] });
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 386d9f2a..ec94daf3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,13 @@
+import Border from '@/components/Border';
+
export default function Home() {
- return home;
+ return (
+
+
+
+ Hello, World!
+
+
+
+ );
}
diff --git a/src/components/Border.tsx b/src/components/Border.tsx
new file mode 100644
index 00000000..373cba60
--- /dev/null
+++ b/src/components/Border.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import darkPinkBorder from '../../public/border/darkPinkBorder.webp';
+import lightPinkBorder from '../../public/border/lightPinkBorder.webp';
+import whiteBrownBorder from '../../public/border/whiteBrownBorder.webp';
+import transparentBorder from '../../public/border/transparentBorder.webp';
+
+interface BorderProps {
+ variant: 'dark-pink' | 'light-pink' | 'white-brown' | 'transparent';
+ className?: string;
+ children?: React.ReactNode;
+}
+
+const borderStyles = {
+ 'dark-pink': {
+ base: 'bg-cover bg-center',
+ style: {
+ backgroundImage: `url(${darkPinkBorder.src})`,
+ },
+ },
+ 'light-pink': {
+ base: 'bg-cover bg-center opacity-70',
+ style: {
+ backgroundImage: `url(${lightPinkBorder.src})`,
+ },
+ },
+ 'white-brown': {
+ base: 'bg-cover bg-center',
+ style: {
+ backgroundImage: `url(${whiteBrownBorder.src})`,
+ },
+ },
+ transparent: {
+ base: 'bg-cover bg-center opacity-70',
+ style: {
+ backgroundImage: `url(${transparentBorder.src})`,
+ },
+ },
+};
+
+const Border: React.FC = ({
+ variant = 'dark-pink',
+ className,
+ children,
+}) => {
+ const { base, style } = borderStyles[variant];
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Border;