first commit

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -9,17 +9,30 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "embla-carousel-react": "^8.0.0-rc22",
+    "hamburger-react": "^2.5.0",
+    "lucide-react": "^0.320.0",
+    "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.0"
+    "react-fast-marquee": "^1.6.3",
+    "react-hook-form": "^7.50.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0"
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
   }
 }

public/VENEU/index.tsx

@@ -0,0 +1,23 @@
+import Veneu1 from './Veneu1.jpg';
+import Veneu2 from './Veneu2.jpg';
+import Veneu3 from './Veneu3.jpg';
+import Veneu4 from './Veneu4.jpg';
+import Veneu5 from './Veneu5.jpg';
+import Veneu6 from './Veneu6.jpg';
+import Veneu7 from './Veneu7.jpg';
+import Veneu8 from './Veneu8.jpg';
+import Veneu9 from './Veneu9.jpg';
+import Veneu10 from './Veneu10.jpg';
+
+export {
+	Veneu1,
+	Veneu2,
+	Veneu3,
+	Veneu4,
+	Veneu5,
+	Veneu6,
+	Veneu7,
+	Veneu8,
+	Veneu9,
+	Veneu10,
+};

src/app/globals.css

@@ -2,32 +2,85 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 0 0% 3.9%;
+
+		--radius: 0.5rem;
+	}
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+	.dark {
+		--background: 0 0% 3.9%;
+		--foreground: 0 0% 98%;
+
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 0 0% 9%;
+
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+		--ring: 0 0% 83.1%;
+	}
 }
 
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+		background-color: #f2f2f2;
+	}
+}
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+	.no-scrollbar ::-webkit-scrollbar {
+		display: none;
+	}
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
 }

src/app/layout.tsx

@@ -1,22 +1,28 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+	title: 'Create Next App',
+	description: 'Generated by create next app',
 };
 
 export default function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: React.ReactNode;
+	children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
+	return (
+		<html lang='en'>
+			<body className={`${inter.className}`}>
+				<Navbar />
+				{children}
+				<Footer />
+			</body>
+		</html>
+	);
 }

src/app/login/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { Button } from '@/components/ui/button';
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from '@/components/ui/card';
+import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export default function Page() {
+	return (
+		<main>
+			<Card className='lg:w-1/4 w-80 m-auto lg:mt-14 mt-10'>
+				<CardHeader>
+					<CardTitle className='text-center'>
+						LOGIN BUPATI CUP
+						<br /> SKATEBOARD COMPETITION II
+					</CardTitle>
+				</CardHeader>
+				<CardContent className='capitalize'>
+					<div>
+						<Label>email</Label>
+						<Input />
+					</div>
+					<div>
+						<Label>password</Label>
+						<Input />
+					</div>
+				</CardContent>
+				<CardFooter className='flex flex-col gap-1.5'>
+					<p className='text-xs'>
+						Forgot your Password? RESET PASSWORD
+					</p>
+					<Button className='w-full'>sign in</Button>
+					<Button
+						className='w-full'
+						variant={'outline'}>
+						sign up
+					</Button>
+					<p className='text-xs'>
+						Don't have an account yet? Create Now!
+					</p>
+				</CardFooter>
+			</Card>
+		</main>
+	);
+}