contact page changes

app/(root)/changelogs/[slug]/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { Skeleton } from "@/components/ui/skeleton";
 import React, { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 
@@ -35,8 +36,16 @@ const Page = ({ params }: { params: { slug: string } }) => {
 
 	if (loading) {
 		return (
-			<section className="flex-center flex-col wrapper container">
+			<section className="wrapper container py-24 md:py-28 gap-4 flex flex-col">
-				<p className="text-lg">Loading...</p>
+				<div className="mb-3">
+					<Skeleton className="w-[400px] h-[50px] rounded-md" />
+				</div>
+				<div className="flex flex-col gap-4">
+					<Skeleton className="w-[300px] h-[30px] rounded-md" />
+					<Skeleton className="w-[200px] h-[20px] rounded-md" />
+					<Skeleton className="w-[200px] h-[20px] rounded-md" />
+					<Skeleton className="w-[200px] h-[20px] rounded-md" />
+				</div>
 			</section>
 		);
 	}

app/(root)/contact/page.tsx

@@ -9,7 +9,6 @@ import { Button } from "@/components/ui/button";
 import {
 	Form,
 	FormControl,
-	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -19,6 +18,8 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/components/ui/use-toast";
 import { useState } from "react";
+import { Separator } from "@/components/ui/separator";
+import { emails } from "@/constants";
 
 const ContactUs = () => {
 	const { toast } = useToast();
@@ -66,25 +67,23 @@ const ContactUs = () => {
 			});
 			setLoading(false);
 		}
-
-		console.log(values);
 	}
 
 	return (
 		<>
-			<div className="flex items-center justify-center py-16 md:py-24 w-full transition-all duration-300">
+			<div className="flex items-center justify-center py-12 md:py-16 w-full transition-all duration-300">
-				<h1 className="text-4xl md:text-6xl tracking-tight font-bold uppercase">
+				<h1 className="text-4xl md:text-6xl tracking-tight font-bold uppercase text-center text-gray-900 dark:text-white">
 					Contact Us
 				</h1>
 			</div>
 
 			<section id="contact" className="w-full">
-				<div className="flex max-md:flex-center flex-col md:flex-row justify-between mx-auto p-5 max-w-4xl">
+				<div className="flex-center flex-col md:flex-row justify-between mx-auto p-6 max-w-5xl">
 					{/* Left contact page */}
 					<Form {...form}>
 						<form
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="space-y-4 pb-8 mb-4 max-w-sm w-full"
+							className="space-y-4 pb-8 mb-8 max-w-lg w-full bg-accent border p-6 rounded-lg shadow-md"
 						>
 							<FormField
 								control={form.control}
@@ -119,7 +118,11 @@ const ContactUs = () => {
 									<FormItem>
 										<FormLabel>Message</FormLabel>
 										<FormControl>
-											<Textarea placeholder="Your Message" {...field} />
+											<Textarea
+												className="h-44"
+												placeholder="Your Message"
+												{...field}
+											/>
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -128,11 +131,11 @@ const ContactUs = () => {
 							<Button
 								type="submit"
 								variant={"default"}
-								className="w-full"
+								className="w-full mt-2"
 								disabled={loading}
 							>
 								<div className="flex items-center justify-center">
-									<span className="tracking-tight font-[600px]">SEND</span>
+									<span className="tracking-tight font-semibold">SEND</span>
 									<Send className="ml-2 w-5 h-5" />
 								</div>
 							</Button>
@@ -140,63 +143,32 @@ const ContactUs = () => {
 					</Form>
 
 					{/* Right contact page */}
-					<div className="max-w-xl mt-3 md:ml-5">
+					<div className="max-w-lg mt-8 md:mt-0 md:ml-8 p-12 border rounded-lg">
-						<ul className="ml-2 max-md:flex-center flex-col pr-5">
+						<ul className="space-y-4 mb-6">
-							<li className="mb-2 text-[#aaa] flex items-center">
+							{emails.map((email, index) => (
-								<WebhookIcon className="mr-2" size={24} />
+								<li
-								<span>
+									key={index}
-									<a
+									className="text-gray-600 dark:text-gray-300 flex items-center"
-										href="mailto:#"
+								>
-										title="Send me an email"
+									<email.icon className="mr-2" size={24} />
-										className="opacity-70 hover:opacity-100 transition duration-200"
+									<span>
-									>
+										<a
-										webmaster@svrjs.org
+											href={email.url}
-									</a>
+											title={`Send an email to ${email.email}`}
-								</span>
+											className="text-muted-foreground hover:text-accent-foreground transition duration-200"
-							</li>
+										>
-							<li className="mb-2 text-[#aaa] flex items-center">
+											{email.email}
-								<Bug className="mr-2" size={24} />
+										</a>
-								<span>
+									</span>
-									<a
+								</li>
-										href="mailto:#"
+							))}
-										title="Send me an email"
-										className="opacity-70 hover:opacity-100 transition duration-200"
-									>
-										bugreports@svrjs.org
-									</a>
-								</span>
-							</li>
-							<li className="mb-2 text-[#aaa] flex items-center">
-								<Shield className="mr-2" size={24} />
-								<span>
-									<a
-										href="mailto:#"
-										title="Send me an email"
-										className="opacity-70 hover:opacity-100 transition duration-200"
-									>
-										vulnerability-reports@svrjs.org
-									</a>
-								</span>
-							</li>
-							<li className="mb-2 text-[#aaa] flex items-center">
-								<Mail className="mr-2" size={24} />
-								<span>
-									<a
-										href="mailto:#"
-										title="Send me an email"
-										className="opacity-70 hover:opacity-100 transition duration-200"
-									>
-										support@svrjs.org
-									</a>
-								</span>
-							</li>
 						</ul>
-						<hr className="border-t border-white opacity-60 my-4" />
+						<Separator />
-						<ul className="flex justify-center space-x-3 mb-6">
+						<ul className="flex justify-center space-x-3 my-6">
 							<Iconss />
 						</ul>
-						<hr className="border-t border-white opacity-60 my-4" />
+						<Separator />
-						<div className="text-center text-[#555] text-sm font-light">
+						<div className="text-center text-gray-500 mt-2 text-sm font-light">
 							© ALL RIGHTS RESERVED SVRJS
 						</div>
 					</div>

components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

constants/index.tsx

@@ -1,4 +1,13 @@
-import { BadgeAlert, BarChart4, Cog, File, ShieldCheck } from "lucide-react";
+import {
+	BadgeAlert,
+	BarChart4,
+	Bug,
+	Cog,
+	File,
+	Mail,
+	ShieldCheck,
+	WebhookIcon,
+} from "lucide-react";
 import { Download, Home, Settings, User } from "lucide-react";
 
 // Navbar
@@ -195,3 +204,27 @@ export const AdminLinks = [
 		icon: Home,
 	},
 ];
+
+// contact page emails
+export const emails = [
+	{
+		icon: WebhookIcon,
+		email: "webmaster@svrjs.org",
+		url: "mailto:webmaster@svrjs.org",
+	},
+	{
+		icon: Bug,
+		email: "bugreports@svrjs.org",
+		url: "mailto:bugreports@svrjs.org",
+	},
+	{
+		icon: ShieldCheck,
+		email: "vulnerability-reports@svrjs.org",
+		url: "mailto:vulnerability-reports@svrjs.org",
+	},
+	{
+		icon: Mail,
+		email: "support@svrjs.org",
+		url: "mailto:support@svrjs.org",
+	},
+];

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/themes": "^3.0.5",