Skip to content

feat: adding ContactUs page #267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: adding ContactUs page #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 129 additions & 0 deletions pages/templates/Shyam-Raghuwanshi/ContactUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import Head from 'next/head'
import React from 'react'
import { Footer, Navbar } from '../ebraj'
import { GithubIcon, MailCheckIcon } from 'lucide-react'
import { DiscordLogoIcon } from '@radix-ui/react-icons'
import Link from 'next/link'
export default function Home() {
const handleGmailClick = () => {
const gmailAddress = '[email protected]'
window.location.href = `mailto:${gmailAddress}`
}
const handleSubmit = () => {
alert('Comming soon!')
}
return (
<>
<Head>
<title>Contact - Review App</title>
<meta
name="description"
content="Simplies the process of adding
a review system to your website."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Navbar />
<div className="container mx-auto py-24 md:px-6">
<section className="mb-32">
<div className="relative h-[300px] overflow-hidden bg-[url('https://mdbcdn.b-cdn.net/img/new/textures/full/171.jpg')] bg-cover bg-[50%] bg-no-repeat"></div>
<div className="container px-6 md:px-12">
<div className="-mt-[100px] block rounded-lg bg-[hsla(0,0%,100%,0.7)] px-6 py-12 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] backdrop-blur-[30px] dark:bg-[hsla(0,0%,5%,0.7)] dark:shadow-black/20 md:px-12 md:py-16">
<div className="mb-12 grid gap-x-6 rounded-full dark:bg-gray-900 py-5 md:grid-cols-2 lg:grid-cols-3">
<Link href="https://github.com/piyushgarg-dev/review-app">
<div className="mx-auto mb-12 flex flex-col items-center justify-center text-center lg:mb-0">
<GithubIcon className="transform transition-transform duration-300 hover:scale-125" />
<h6 className="font-medium ">Github</h6>
</div>
</Link>
<div
onClick={handleGmailClick}
className="mx-auto mb-6 flex flex-col items-center justify-center text-center md:mb-0"
>
<MailCheckIcon className="transform cursor-pointer transition-transform duration-300 hover:scale-125" />
<h6 className="font-medium">Gmail</h6>
</div>
<Link href="https://discord.gg/KEe3Cg7vTy">
<div className="mx-auto flex flex-col items-center justify-center pt-3 text-center">
<DiscordLogoIcon className="scale-[1.8] transform transition-transform duration-300 hover:scale-[2.1]" />
<h6 className="font-medium">Discord</h6>
</div>
</Link>
</div>
<div className="mx-auto max-w-[700px]">
<form>
<div className="relative mb-6" data-te-input-wrapper-init>
<input
type="text"
className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
id="exampleInput90"
placeholder="Name"
/>
<label
className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
htmlFor="exampleInput90"
>
Name
</label>
</div>
<div className="relative mb-6" data-te-input-wrapper-init>
<input
type="email"
className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
id="exampleInput91"
placeholder="Email address"
/>
<label
className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
htmlFor="exampleInput91"
>
Email address
</label>
</div>
<div className="relative mb-6" data-te-input-wrapper-init>
<textarea
className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlTextarea1"
rows={3}
placeholder="Your message"
></textarea>
<label
htmlFor="exampleFormControlTextarea1"
className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>
Message
</label>
</div>
<div className="mb-6 inline-block min-h-[1.5rem] justify-center pl-[1.5rem] md:flex">
<input
className="relative float-left -ml-[1.5rem] mr-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-neutral-300 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-[0px_0px_0px_13px_transparent] before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ml-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ml-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent dark:border-neutral-600 dark:checked:border-primary dark:checked:bg-primary dark:focus:before:shadow-[0px_0px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca]"
type="checkbox"
value=""
id="exampleCheck96"
/>
<label
className="inline-block pl-[0.15rem] hover:cursor-pointer"
htmlFor="exampleCheck96"
>
Send me a copy of this message
</label>
</div>
<button
onClick={handleSubmit}
type="button"
data-te-ripple-init
data-te-ripple-color="light"
className="hover:bg-primary-600 focus:bg-primary-600 active:bg-primary-700 inline-block w-full rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] lg:mb-0"
>
Send
</button>
</form>
</div>
</div>
</div>
</section>
</div>
<Footer />
</>
)
}
2 changes: 1 addition & 1 deletion pages/templates/ebraj/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const allNavLinks = [
{ title: 'Home', url: '/' },
{ title: 'About', url: '/templates/ebraj/about' },
{ title: 'Blogs', url: '/templates/ebraj/blogs' },
{ title: 'Contact', url: '/templates/ebraj/contact' },
{ title: 'Contact', url: '/templates/Shyam-Raghuwanshi/ContactUs' },
]

export const Navbar = () => {
Expand Down