miranshala
7 months ago
parent
d1bc2139b4
commit
63a753403a
@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import ContactForm from "@/components/ContactForm";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="mb-12 text-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center text-[#FF7518] hover:text-[#ff4f00] mb-6 transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="mr-2"
|
||||
>
|
||||
<path d="m12 19-7-7 7-7" />
|
||||
<path d="M19 12H5" />
|
||||
</svg>
|
||||
Back To Home
|
||||
</Link>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Contact Us
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
We look forward to hearing from you and helping you find the perfect
|
||||
cloud solution for your needs. Our team of experts is ready to
|
||||
assist you with any questions or concerns you may have.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact Form Component */}
|
||||
<div className="mb-12">
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="text-center bg-white rounded-xl border border-[#FF7518] shadow p-8">
|
||||
<p className="text-lg text-gray-700 mb-4">
|
||||
Looking to start a project with us?
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="px-6 py-3 bg-[#FF7518] text-white rounded-md font-semibold hover:bg-[#ff4f00] transition-colors"
|
||||
>
|
||||
Create an account
|
||||
</Link>
|
||||
<span className="text-gray-500">or</span>
|
||||
<Link
|
||||
href="/"
|
||||
className="px-6 py-3 border border-[#FF7518] text-[#FF7518] rounded-md font-semibold hover:bg-[#FF7518] hover:text-white transition-colors"
|
||||
>
|
||||
Schedule a consultation
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
export default function ContactForm() {
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Get in Touch Card */}
|
||||
<div className="rounded-xl border border-[#FF7518] shadow bg-white text-black">
|
||||
<div className="p-6">
|
||||
<h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="w-6 h-6 text-[#ff4f00] mt-1"
|
||||
>
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p className="font-medium">Phone Support</p>
|
||||
<p className="text-gray-400">+1 (555) 123-4567</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Available 24/7 for urgent matters
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="w-6 h-6 text-[#ff4f00] mt-1"
|
||||
>
|
||||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||||
</svg>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="font-medium">Sales Inquiries</p>
|
||||
<a
|
||||
href="mailto:sales@reya.cloud"
|
||||
className="text-[#ff4f00] hover:underline"
|
||||
>
|
||||
sales@reya.cloud
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Technical Support</p>
|
||||
<a
|
||||
href="mailto:support@reya.cloud"
|
||||
className="text-[#ff4f00] hover:underline"
|
||||
>
|
||||
support@reya.cloud
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Report Abuse</p>
|
||||
<a
|
||||
href="mailto:abuse@reya.cloud"
|
||||
className="text-[#ff4f00] hover:underline"
|
||||
>
|
||||
abuse@reya.cloud
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Business Hours Card */}
|
||||
<div className="rounded-xl border border-[#FF7518] shadow bg-white text-black">
|
||||
<div className="p-6">
|
||||
<h2 className="text-2xl font-semibold mb-6">Business Hours</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="font-medium">Sales Department</p>
|
||||
<p className="text-gray-400">
|
||||
Monday - Friday: 9:00 AM - 6:00 PM EST
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Technical Support</p>
|
||||
<p className="text-gray-400">24/7/365</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Priority support for enterprise customers
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<p className="text-gray-400">
|
||||
For urgent matters outside of business hours, please use our
|
||||
24/7 phone support or submit a ticket through your customer
|
||||
portal.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,127 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
MoreHorizontalIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
data-slot="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="pagination-content"
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||
return <li data-slot="pagination-item" {...props} />
|
||||
}
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean
|
||||
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
||||
React.ComponentProps<"a">
|
||||
|
||||
function PaginationLink({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) {
|
||||
return (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
data-slot="pagination-link"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationPrevious({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
<span className="hidden sm:block">Previous</span>
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationNext({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="hidden sm:block">Next</span>
|
||||
<ChevronRightIcon />
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="pagination-ellipsis"
|
||||
className={cn("flex size-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon className="size-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
PaginationPrevious,
|
||||
PaginationNext,
|
||||
PaginationEllipsis,
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 407 KiB |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in new issue