diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8f322f0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..5e32039 --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,65 @@ +import { Card } from "@/components/ui/card"; +import { Frame, Sparkles, Shield, Zap } from "lucide-react"; + +export default function About() { + return ( +
+
+

About SAAZ FRAMER

+

+ SAAZ FRAMER is a professional image framing tool designed for photographers, artists, and creative professionals who want to enhance their work with beautiful frames and watermarks. +

+ +
+ +
+
+ +
+

Professional Quality

+

+ Create stunning, high-quality framed images that stand out in any portfolio or gallery. +

+
+
+ + +
+
+ +
+

Protect Your Work

+

+ Add custom watermarks to protect your intellectual property while maintaining image quality. +

+
+
+ + +
+
+ +
+

Fast & Easy

+

+ Intuitive interface designed for efficiency, letting you create beautiful frames in minutes. +

+
+
+ + +
+
+ +
+

Custom Frames

+

+ Use our premium frame collection or upload your own custom frames for unique results. +

+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/admin/page.tsx b/app/admin/page.tsx new file mode 100644 index 0000000..316e7c2 --- /dev/null +++ b/app/admin/page.tsx @@ -0,0 +1,134 @@ +"use client"; + +import { useState } from "react"; +import { Upload, Settings, Save } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Separator } from "@/components/ui/separator"; +import { Slider } from "@/components/ui/slider"; +import { toast } from "sonner"; + +export default function Admin() { + const [frameImage, setFrameImage] = useState(null); + const [opacity, setOpacity] = useState([0.8]); + const [scale, setScale] = useState([1]); + + const handleFrameUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + if (!file.type.startsWith("image/")) { + toast.error("Please upload an image file"); + return; + } + + const reader = new FileReader(); + reader.onload = (event) => { + setFrameImage(event.target?.result as string); + toast.success("Frame uploaded successfully"); + }; + reader.readAsDataURL(file); + }; + + const saveSettings = () => { + // Save settings to localStorage + const settings = { + frameImage, + opacity: opacity[0], + scale: scale[0], + }; + localStorage.setItem("saazFramerSettings", JSON.stringify(settings)); + toast.success("Settings saved successfully"); + }; + + return ( +
+
+

Admin Settings

+ +
+ {/* Left Column - Settings */} + +

Frame Settings

+ +
+
+ + +
+ + + +
+
+ + +
+ +
+ + +
+
+ + +
+
+ + {/* Right Column - Preview */} + +

Frame Preview

+ +
+ {!frameImage ? ( +
+ +

+ Upload a frame to see preview +

+
+ ) : ( +
+ Frame Preview +
+ )} +
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..d19d21c --- /dev/null +++ b/app/contact/page.tsx @@ -0,0 +1,102 @@ +"use client"; + +import { Card } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { toast } from "sonner"; +import { Mail, MessageSquare, Send } from "lucide-react"; + +export default function Contact() { + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const data = { + name: formData.get('name'), + email: formData.get('email'), + message: formData.get('message'), + }; + + // Send email using mailto link + const subject = encodeURIComponent('SAAZ Framer'); + const body = encodeURIComponent(` +Name: ${data.name} +Email: ${data.email} + +Message: +${data.message} + `); + window.location.href = `mailto:sahalbuac@gmail.com?subject=${subject}&body=${body}`; + + toast.success("Opening your email client..."); + }; + + return ( +
+
+

Contact Us

+

+ Have questions or feedback? We'd love to hear from you. Send us a message and we'll respond as soon as possible. +

+ + +
+
+ + +
+ +
+ + +
+ +
+ +