diff --git a/index.html b/index.html index 0f09005..c8eac63 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - geomind2 + GeoMind
diff --git a/package.json b/package.json index 2e7897f..b8af9af 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "geomind2", + "name": "geomind", "private": true, "version": "0.0.0", "type": "module", diff --git a/public/iconG.png b/public/iconG.png new file mode 100644 index 0000000..fa08be8 Binary files /dev/null and b/public/iconG.png differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 983470b..270922a 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,4 +1,6 @@ +import { useState } from 'react'; import { Link } from 'react-router-dom'; +import ContactForm from '../ui/ContactForm'; const footerLinksColumn1 = [ { label: 'About', to: '/about' }, @@ -8,11 +10,11 @@ const footerLinksColumn1 = [ const footerLinksColumn2 = [ { label: 'Manual', to: '/manual' }, - { label: 'Support', to: '/support' }, { label: 'Privacy', to: '/privacy' }, ]; export const Footer = () => { + const [isContactFormOpen, setIsContactFormOpen] = useState(false); const year = new Date().getFullYear(); return ( @@ -39,6 +41,12 @@ export const Footer = () => { {label} ))} + @@ -47,6 +55,12 @@ export const Footer = () => { © {year}. Built on Geomind. All rights reserved. + setIsContactFormOpen(false)} + title="Get Support" + formType="contact" + /> ); }; diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index d61bc0b..7d617bc 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -3,6 +3,7 @@ import { Link, NavLink, useLocation } from 'react-router-dom'; import { motion, AnimatePresence } from 'framer-motion'; import { cn } from '../../lib/cn'; import { buttonBaseClass } from '../../lib/buttonStyles'; +import ContactForm from '../ui/ContactForm'; const navItems = [ { label: 'About', to: '/about' }, @@ -13,6 +14,7 @@ const navItems = [ export const Header = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [hoveredNav, setHoveredNav] = useState(null); + const [isContactFormOpen, setIsContactFormOpen] = useState(false); const location = useLocation(); const isHome = location.pathname === '/'; @@ -69,12 +71,12 @@ export const Header = () => { ))} - setIsContactFormOpen(true)} className={cn(buttonBaseClass, 'px-4 py-2')} > GET IN TOUCH - + )} + setIsContactFormOpen(false)} + title="Get in Touch" + formType="contact" + /> ); }; diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 3dc90d9..a6770ce 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -15,6 +15,8 @@ export const Layout = ({ children }: LayoutProps) => { const darkRoutes = ['/about', '/technology', '/usecases']; const isDarkPage = darkRoutes.some((route) => pathname.startsWith(route)); + const isAbout = pathname.startsWith('/about'); + return (
{ 'relative z-10', isHome ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-mandatory' - : 'mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32', + : cn( + 'pb-24 pt-28 lg:pt-32', + isAbout ? 'w-full px-0' : 'mx-auto max-w-6xl px-6 lg:px-8', + ), )} > {children} diff --git a/src/components/ui/ContactForm.tsx b/src/components/ui/ContactForm.tsx new file mode 100644 index 0000000..4a1475a --- /dev/null +++ b/src/components/ui/ContactForm.tsx @@ -0,0 +1,199 @@ +import { motion, AnimatePresence } from 'framer-motion'; +import { useState } from 'react'; +import { X, Send, CheckCircle } from 'lucide-react'; + +interface ContactFormProps { + isOpen: boolean; + onClose: () => void; + title?: string; + formType?: 'investor' | 'partner' | 'contact' | 'deploy' | 'offtake'; +} + +export default function ContactForm({ isOpen, onClose, title = "Get in Touch", formType }: ContactFormProps) { + const [formData, setFormData] = useState({ + name: '', + email: '', + company: '', + message: '', + }); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isSubmitted, setIsSubmitted] = useState(false); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value, + })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + + // TODO: Add emailjs integration later + // Simulate API call + setTimeout(() => { + console.log('Form submitted:', { ...formData, formType }); + setIsSubmitted(true); + setTimeout(() => { + setIsSubmitted(false); + setFormData({ name: '', email: '', company: '', message: '' }); + onClose(); + }, 3000); + setIsSubmitting(false); + }, 1000); + }; + + const getPlaceholderMessage = () => { + switch (formType) { + case 'investor': + return "Tell us about your investment interests and how we can collaborate."; + case 'partner': + return "Tell us about your partnership interests and how we can work together."; + case 'deploy': + return "Tell us about your deployment capacity plans and requirements."; + case 'offtake': + return "Tell us about your capacity offtake requirements."; + default: + return "Let us know how we can help."; + } + }; + + return ( + + {isOpen && ( + + e.stopPropagation()} + > + {/* Header */} +
+

+ {title} +

+ +
+ + {/* Form */} +
+ {isSubmitted ? ( + + +

+ Thank you! +

+

+ We'll get back to you soon. +

+ + ) : ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +