From e26c4634c9610dbff47567552428e3a326fffa05 Mon Sep 17 00:00:00 2001 From: Kapil Jangid Date: Mon, 4 Nov 2024 23:58:12 +0530 Subject: [PATCH 1/5] feat: add new UI components and update dependencies --- .gitignore | 3 +- app/layout.tsx | 20 +- components/main/hero/Hero.tsx | 10 +- components/main/input.tsx | 31 ++ components/main/share-your-vision.tsx | 189 +++++++++ components/ui/dialog.tsx | 122 ++++++ components/ui/form.tsx | 178 +++++++++ components/ui/label.tsx | 26 ++ components/ui/toast.tsx | 131 ++++++ components/ui/toaster.tsx | 35 ++ hooks/use-toast.ts | 194 +++++++++ package-lock.json | 554 +++++++++++++++++++++++++- package.json | 8 +- pnpm-lock.yaml | 447 ++++++++++++++++++++- tailwind.config.ts | 130 +++--- 15 files changed, 1992 insertions(+), 86 deletions(-) create mode 100644 components/main/input.tsx create mode 100644 components/main/share-your-vision.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/form.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 hooks/use-toast.ts diff --git a/.gitignore b/.gitignore index fd3dbb5..86f0706 100644 --- a/.gitignore +++ b/.gitignore @@ -27,10 +27,11 @@ yarn-error.log* # local env files .env*.local +.env # vercel .vercel # typescript *.tsbuildinfo -next-env.d.ts +next-env.d.ts \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index b5ff6d2..1c39daa 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,17 +1,18 @@ import type { Metadata } from "next"; -import { Space_Grotesk } from 'next/font/google'; +import { Space_Grotesk } from "next/font/google"; import "./globals.css"; import Navbar from "@/components/main/navbar/Navbar"; +import { Toaster } from "@/components/ui/toaster"; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "AceXLabs", + description: + "From Concept to Create ion Making Ideas Happen From sleek websites to scalable SaaS platforms and innovative MVPs, we specialize in building with JavaScript, Golang, Rust, and Web3 technologies. Whether you need robust web applications or blockchain-powered products, our agency is your go-to partner in turning concepts into impactful digital experiences.", }; - const spaceGrotesk = Space_Grotesk({ - subsets: ['latin'], - display: 'swap', + subsets: ["latin"], + display: "swap", }); export default function RootLayout({ @@ -21,11 +22,10 @@ export default function RootLayout({ }>) { return ( - - + + {children} + ); diff --git a/components/main/hero/Hero.tsx b/components/main/hero/Hero.tsx index 6f43427..14cb7ec 100644 --- a/components/main/hero/Hero.tsx +++ b/components/main/hero/Hero.tsx @@ -10,6 +10,7 @@ import { } from "@/components/farmui/ShinyLights"; import Container from "../../shared/Container"; import Link from "next/link"; +import { ShareYourVision } from "../share-your-vision"; export default function FUIDarkHeroSectionWithScrolls() { const ref = useRef(null); @@ -23,7 +24,10 @@ export default function FUIDarkHeroSectionWithScrolls() {
-
+
- +
diff --git a/components/main/input.tsx b/components/main/input.tsx new file mode 100644 index 0000000..836bcd4 --- /dev/null +++ b/components/main/input.tsx @@ -0,0 +1,31 @@ +"use client"; +import * as React from "react"; +import { cn } from "@/lib/utils"; + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ); + } +); +Input.displayName = "Input"; + +export { Input }; diff --git a/components/main/share-your-vision.tsx b/components/main/share-your-vision.tsx new file mode 100644 index 0000000..0daf45d --- /dev/null +++ b/components/main/share-your-vision.tsx @@ -0,0 +1,189 @@ +import { useForm } from "react-hook-form"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "./input"; +import { useState } from "react"; +import { useToast } from "@/hooks/use-toast"; + +export const ShareYourVision = () => { + const [loading, setLoading] = useState(false); + const { toast } = useToast(); + const accessKey = process.env.NEXT_PUBLIC_WEB3FORM_ACCESS_KEY as string; + + const schema = z.object({ + name: z.string().min(3, "Name is too short"), + email: z.string().email("Invalid email address"), + projectIdea: z.string().min(10, "Project idea is too short"), + access_key: z.string().default(accessKey), + xUsername: z.string().optional(), + }); + + const form = useForm>({ + resolver: zodResolver(schema), + }); + + const onValueChange = (e: React.ChangeEvent) => { + form.setValue( + e.target.name as keyof z.infer, + e.target.value + ); + }; + + const onSubmit = async (data: z.infer) => { + setLoading(true); + const response = await fetch("https://api.web3forms.com/submit", { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + access_key: data.access_key, + name: data.name, + email: data.email, + message: data.projectIdea, + X: data.xUsername, + }), + }); + const result = await response.json(); + if (result.success) { + toast({ title: result.message, variant: "success" }); + form.reset(); + } else { + toast({ title: result.message, variant: "destructive" }); + form.reset(); + } + window.location.reload(); + setLoading(false); + }; + return ( + + + + + + + + Share your vision + + + Tell us about your project idea. We'll get back to you soon! + + +
+ + ( + + Name + + + + + + )} + /> + ( + + Email Address + + + + + + )} + /> + ( + + Project Idea + +