diff --git a/src/components/AdvertiseForm.tsx b/src/components/AdvertiseForm.tsx new file mode 100644 index 000000000..7cd6faa0a --- /dev/null +++ b/src/components/AdvertiseForm.tsx @@ -0,0 +1,227 @@ +import React, { useState } from 'react'; +import { CheckIcon } from './ReactIcons/CheckIcon.tsx'; +import { pageProgressMessage } from '../stores/page.ts'; +import { httpPost } from '../lib/http.ts'; + +type InputProps = { + label: string; + name: string; + type: string; + value: string; + onChange: ( + e: React.ChangeEvent, + ) => void; + required?: boolean; + rows?: number; +}; + +function Input(props: InputProps) { + const { label, name, type, value, onChange, required, rows } = props; + return ( +
+ + {type === 'textarea' ? ( + + ) : ( + + )} +
+ ); +} + +export function AdvertiseForm() { + const [status, setStatus] = useState<'submitting' | 'submitted'>(); + const [error, setError] = useState(null); + + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + title: '', + company: '', + email: '', + phone: '', + message: '', + updates: false, + }); + + const handleInputChange = ( + e: React.ChangeEvent, + ) => { + const { name, value, type, checked } = e.target as any; + setFormData({ + ...formData, + [name]: type === 'checkbox' ? checked : value, + }); + }; + + async function handleSubmit(e: React.FormEvent) { + e.preventDefault(); + + pageProgressMessage.set('Please wait'); + + // Placeholder function to send data + console.log('Form data:', formData); + + const { response, error } = await httpPost( + `${import.meta.env.PUBLIC_API_URL}/v1-advertise`, + formData, + ); + if (!response || error) { + pageProgressMessage.set(''); + setError(error?.message || 'Something went wrong. Please try again.'); + return; + } + + setStatus('submitted'); + pageProgressMessage.set(''); + } + + if (status === 'submitted') { + return ( +
+ +

+ Thank you for your interest in advertising with roadmap.sh +

+

+ We will get back to you soon. +

+
+ ); + } + + return ( + <> +

+ Ready to learn more? Fill out the form below to get started! +

+ {error && ( +
+ {error} +
+ )} +
+
+ + +
+ +
+ + + +
+ +
+ + + +
+ + +
+
+ +
+
+ +
+
+ +
+ +
+
+ + ); +} diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 3eedaddfa..67d955327 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -35,8 +35,8 @@ import Icon from './AstroIcon.astro'; >

-
-
+
+

- Community created roadmaps, articles, resources and journeys to help + Community created roadmaps, best practices, projects, articles, resources and journeys to help you choose your path and grow in your career.

-
+
ThewNewStack

- The leading DevOps resource for Kubernetes, cloud-native computing, - and the latest in at-scale development, deployment, and management. + The top DevOps resource for Kubernetes, cloud-native computing, and large-scale development and deployment.

diff --git a/src/components/NavigationDropdown.tsx b/src/components/NavigationDropdown.tsx index 31e9978a5..cf608a10f 100644 --- a/src/components/NavigationDropdown.tsx +++ b/src/components/NavigationDropdown.tsx @@ -62,6 +62,12 @@ const links = [ Icon: Shirt, isExternal: true, }, + { + link: '/advertise', + label: 'Advertise', + description: 'Promote your product or service', + Icon: Menu, + }, ]; export function NavigationDropdown() { diff --git a/src/pages/advertise.astro b/src/pages/advertise.astro new file mode 100644 index 000000000..131d6c468 --- /dev/null +++ b/src/pages/advertise.astro @@ -0,0 +1,39 @@ +--- +import BaseLayout from '../layouts/BaseLayout.astro'; +import { getRepositoryRank } from '../lib/github.ts'; +import { AdvertiseForm } from '../components/AdvertiseForm'; +--- + + +

+
+
+
+

+ Advertise with roadmap.sh +

+

+ The best way to reach developers +

+
+
+ +

+ With hundreds of thousands of monthly visitors and over 1 million + registered users, roadmap.sh is the resource developers choose to skill + up and advance their careers. This community effort creates guides and + educational content where developers can choose their path to success. +

+ +

+ roadmap.sh also provides opportunities to + advertise to developers where your message stands out on our platform to + generate valuable results. Do more with your budget and achieve your marketing + goals by targeting your ideal segments of our developer audience. Don’t wait + to get your message in front of aspirational developers. +

+ + +
+
+