mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +03:00
Updates partner gallery for new supabase ui
This commit is contained in:
Alaister Young committed
1 parent
a7d61f8fa0
commit
d1253fef92
5 files changed
+550
-484
No files matched your search
@@ -1,401 +1,490 @@
|
||||
import { SupabaseClient } from '@supabase/supabase-js'
|
||||
import { Select, Typography, Input, InputNumber, Button } from '@supabase/ui'
|
||||
import { useState } from 'react'
|
||||
import { Partner, PartnerContact } from '~/types/partners'
|
||||
import { Button, Form, Input, InputNumber, Select } from '@supabase/ui'
|
||||
import { FormEventHandler, useState } from 'react'
|
||||
import { PartnerContact } from '~/types/partners'
|
||||
|
||||
const INITIAL_VALUES = {
|
||||
type: 'expert',
|
||||
first: '',
|
||||
last: '',
|
||||
company: '',
|
||||
size: '',
|
||||
title: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
country: 'Singapore',
|
||||
details: '',
|
||||
}
|
||||
|
||||
const validate = (values: any) => {
|
||||
const errors: any = {}
|
||||
|
||||
if (!values.first) {
|
||||
errors.first = 'Required'
|
||||
}
|
||||
|
||||
if (!values.last) {
|
||||
errors.last = 'Required'
|
||||
}
|
||||
|
||||
if (!values.email) {
|
||||
errors.email = 'Required'
|
||||
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
|
||||
errors.email = 'Invalid email address'
|
||||
}
|
||||
|
||||
return errors
|
||||
}
|
||||
|
||||
export default function BecomeAPartner({ supabase }: { supabase: SupabaseClient }) {
|
||||
const [formSubmitted, setFormSubmitted] = useState<boolean>(false)
|
||||
|
||||
const handleFormSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
|
||||
e.preventDefault()
|
||||
var formData = new FormData(document.getElementsByTagName('form')[0])
|
||||
const handleFormSubmit = async (values: any) => {
|
||||
const { error } = await supabase.from<PartnerContact>('partner_contacts').insert(
|
||||
[
|
||||
{
|
||||
type: formData.get('type') as 'expert' | 'technology',
|
||||
first: formData.get('first') as string,
|
||||
last: formData.get('last') as string,
|
||||
company: formData.get('company') as string,
|
||||
size: Number(formData.get('size')),
|
||||
title: formData.get('title') as string,
|
||||
email: formData.get('email') as string,
|
||||
website: (formData.get('email') as string).split('@')[1],
|
||||
phone: formData.get('phone') as string,
|
||||
country: formData.get('country') as string,
|
||||
details: formData.get('details') as string,
|
||||
type: values.type,
|
||||
first: values.first,
|
||||
last: values.last,
|
||||
company: values.company,
|
||||
size: Number(values.size),
|
||||
title: values.title,
|
||||
email: values.email,
|
||||
website: values.email.split('@')[1],
|
||||
phone: values.phone,
|
||||
country: values.country,
|
||||
details: values.details,
|
||||
},
|
||||
],
|
||||
{ returning: 'minimal' }
|
||||
)
|
||||
console.log(error)
|
||||
|
||||
// TODO: handle error
|
||||
console.log('error:', error)
|
||||
|
||||
setFormSubmitted(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="become-a-partner" className="space-y-8">
|
||||
<Typography.Title level={2}>Become a Partner</Typography.Title>
|
||||
<form onSubmit={handleFormSubmit} className="space-y-4">
|
||||
<Select
|
||||
name="type"
|
||||
className="font-sans"
|
||||
label="What type of partner are you?"
|
||||
layout="vertical"
|
||||
>
|
||||
<option value="expert" selected={true}>
|
||||
Expert (Agency & Consulting)
|
||||
</option>
|
||||
<option value="technology">Technology</option>
|
||||
</Select>
|
||||
<div className="w-full md:flex md:space-x-6">
|
||||
<Input
|
||||
label="First Name *"
|
||||
name="first"
|
||||
layout="vertical"
|
||||
placeholder="Jane"
|
||||
className="md:w-1/2"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Last Name *"
|
||||
name="last"
|
||||
layout="vertical"
|
||||
placeholder="Doe"
|
||||
className="md:w-1/2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full md:flex md:space-x-6">
|
||||
<Input
|
||||
label="Company Name"
|
||||
name="company"
|
||||
layout="vertical"
|
||||
placeholder="Supa Inc."
|
||||
className="md:w-1/2"
|
||||
/>
|
||||
<InputNumber
|
||||
label="Company Size"
|
||||
name="size"
|
||||
layout="vertical"
|
||||
placeholder="1"
|
||||
className="md:w-1/2"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full md:flex md:space-x-6">
|
||||
<Input
|
||||
label="Job Title"
|
||||
name="title"
|
||||
layout="vertical"
|
||||
placeholder="CEO"
|
||||
className="md:w-1/2"
|
||||
/>
|
||||
<Input
|
||||
label="Business email *"
|
||||
name="email"
|
||||
layout="vertical"
|
||||
placeholder="janedoe@example.sg"
|
||||
className="md:w-1/2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full md:flex md:space-x-6">
|
||||
<Input
|
||||
label="Phone Number"
|
||||
name="phone"
|
||||
layout="vertical"
|
||||
placeholder="+65 1234 1234"
|
||||
className="md:w-1/2"
|
||||
/>
|
||||
<Select
|
||||
label="Country / Main Timezone"
|
||||
name="country"
|
||||
layout="vertical"
|
||||
className="md:w-1/2"
|
||||
>
|
||||
<option value="Afghanistan">Afghanistan</option>
|
||||
<option value="Albania">Albania</option>
|
||||
<option value="Algeria">Algeria</option>
|
||||
<option value="American Samoa">American Samoa</option>
|
||||
<option value="Andorra">Andorra</option>
|
||||
<option value="Angola">Angola</option>
|
||||
<option value="Anguilla">Anguilla</option>
|
||||
<option value="Antarctica">Antarctica</option>
|
||||
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Armenia">Armenia</option>
|
||||
<option value="Aruba">Aruba</option>
|
||||
<option value="Australia">Australia</option>
|
||||
<option value="Austria">Austria</option>
|
||||
<option value="Azerbaijan">Azerbaijan</option>
|
||||
<option value="Bahamas">Bahamas</option>
|
||||
<option value="Bahrain">Bahrain</option>
|
||||
<option value="Bangladesh">Bangladesh</option>
|
||||
<option value="Barbados">Barbados</option>
|
||||
<option value="Belarus">Belarus</option>
|
||||
<option value="Belgium">Belgium</option>
|
||||
<option value="Belize">Belize</option>
|
||||
<option value="Benin">Benin</option>
|
||||
<option value="Bermuda">Bermuda</option>
|
||||
<option value="Bhutan">Bhutan</option>
|
||||
<option value="Bolivia">Bolivia</option>
|
||||
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
|
||||
<option value="Botswana">Botswana</option>
|
||||
<option value="Bouvet Island">Bouvet Island</option>
|
||||
<option value="Brazil">Brazil</option>
|
||||
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
|
||||
<option value="Brunei Darussalam">Brunei Darussalam</option>
|
||||
<option value="Bulgaria">Bulgaria</option>
|
||||
<option value="Burkina Faso">Burkina Faso</option>
|
||||
<option value="Burundi">Burundi</option>
|
||||
<option value="Cambodia">Cambodia</option>
|
||||
<option value="Cameroon">Cameroon</option>
|
||||
<option value="Canada">Canada</option>
|
||||
<option value="Cape Verde">Cape Verde</option>
|
||||
<option value="Cayman Islands">Cayman Islands</option>
|
||||
<option value="Central African Republic">Central African Republic</option>
|
||||
<option value="Chad">Chad</option>
|
||||
<option value="Chile">Chile</option>
|
||||
<option value="China">China</option>
|
||||
<option value="Christmas Island">Christmas Island</option>
|
||||
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
|
||||
<option value="Colombia">Colombia</option>
|
||||
<option value="Comoros">Comoros</option>
|
||||
<option value="Congo">Congo</option>
|
||||
<option value="Congo, the Democratic Republic of the">
|
||||
Congo, the Democratic Republic of the
|
||||
</option>
|
||||
<option value="Cook Islands">Cook Islands</option>
|
||||
<option value="Costa Rica">Costa Rica</option>
|
||||
<option value="Cote D'Ivoire">Cote D'Ivoire</option>
|
||||
<option value="Croatia">Croatia</option>
|
||||
<option value="Cuba">Cuba</option>
|
||||
<option value="Cyprus">Cyprus</option>
|
||||
<option value="Czech Republic">Czech Republic</option>
|
||||
<option value="Denmark">Denmark</option>
|
||||
<option value="Djibouti">Djibouti</option>
|
||||
<option value="Dominica">Dominica</option>
|
||||
<option value="Dominican Republic">Dominican Republic</option>
|
||||
<option value="Ecuador">Ecuador</option>
|
||||
<option value="Egypt">Egypt</option>
|
||||
<option value="El Salvador">El Salvador</option>
|
||||
<option value="Equatorial Guinea">Equatorial Guinea</option>
|
||||
<option value="Eritrea">Eritrea</option>
|
||||
<option value="Estonia">Estonia</option>
|
||||
<option value="Ethiopia">Ethiopia</option>
|
||||
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
|
||||
<option value="Faroe Islands">Faroe Islands</option>
|
||||
<option value="Fiji">Fiji</option>
|
||||
<option value="Finland">Finland</option>
|
||||
<option value="France">France</option>
|
||||
<option value="French Guiana">French Guiana</option>
|
||||
<option value="French Polynesia">French Polynesia</option>
|
||||
<option value="French Southern Territories">French Southern Territories</option>
|
||||
<option value="Gabon">Gabon</option>
|
||||
<option value="Gambia">Gambia</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Germany">Germany</option>
|
||||
<option value="Ghana">Ghana</option>
|
||||
<option value="Gibraltar">Gibraltar</option>
|
||||
<option value="Greece">Greece</option>
|
||||
<option value="Greenland">Greenland</option>
|
||||
<option value="Grenada">Grenada</option>
|
||||
<option value="Guadeloupe">Guadeloupe</option>
|
||||
<option value="Guam">Guam</option>
|
||||
<option value="Guatemala">Guatemala</option>
|
||||
<option value="Guinea">Guinea</option>
|
||||
<option value="Guinea-Bissau">Guinea-Bissau</option>
|
||||
<option value="Guyana">Guyana</option>
|
||||
<option value="Haiti">Haiti</option>
|
||||
<option value="Heard Island and Mcdonald Islands">
|
||||
Heard Island and Mcdonald Islands
|
||||
</option>
|
||||
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
|
||||
<option value="Honduras">Honduras</option>
|
||||
<option value="Hong Kong">Hong Kong</option>
|
||||
<option value="Hungary">Hungary</option>
|
||||
<option value="Iceland">Iceland</option>
|
||||
<option value="India">India</option>
|
||||
<option value="Indonesia">Indonesia</option>
|
||||
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
|
||||
<option value="Iraq">Iraq</option>
|
||||
<option value="Ireland">Ireland</option>
|
||||
<option value="Israel">Israel</option>
|
||||
<option value="Italy">Italy</option>
|
||||
<option value="Jamaica">Jamaica</option>
|
||||
<option value="Japan">Japan</option>
|
||||
<option value="Jordan">Jordan</option>
|
||||
<option value="Kazakhstan">Kazakhstan</option>
|
||||
<option value="Kenya">Kenya</option>
|
||||
<option value="Kiribati">Kiribati</option>
|
||||
<option value="North Korea">North Korea</option>
|
||||
<option value="South Korea">South Korea</option>
|
||||
<option value="Kuwait">Kuwait</option>
|
||||
<option value="Kyrgyzstan">Kyrgyzstan</option>
|
||||
<option value="Lao People's Democratic Republic">
|
||||
Lao People's Democratic Republic
|
||||
</option>
|
||||
<option value="Latvia">Latvia</option>
|
||||
<option value="Lebanon">Lebanon</option>
|
||||
<option value="Lesotho">Lesotho</option>
|
||||
<option value="Liberia">Liberia</option>
|
||||
<option value="Libya">Libya</option>
|
||||
<option value="Liechtenstein">Liechtenstein</option>
|
||||
<option value="Lithuania">Lithuania</option>
|
||||
<option value="Luxembourg">Luxembourg</option>
|
||||
<option value="Macao">Macao</option>
|
||||
<option value="Madagascar">Madagascar</option>
|
||||
<option value="Malawi">Malawi</option>
|
||||
<option value="Malaysia">Malaysia</option>
|
||||
<option value="Maldives">Maldives</option>
|
||||
<option value="Mali">Mali</option>
|
||||
<option value="Malta">Malta</option>
|
||||
<option value="Marshall Islands">Marshall Islands</option>
|
||||
<option value="Martinique">Martinique</option>
|
||||
<option value="Mauritania">Mauritania</option>
|
||||
<option value="Mauritius">Mauritius</option>
|
||||
<option value="Mayotte">Mayotte</option>
|
||||
<option value="Mexico">Mexico</option>
|
||||
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
|
||||
<option value="Moldova, Republic of">Moldova, Republic of</option>
|
||||
<option value="Monaco">Monaco</option>
|
||||
<option value="Mongolia">Mongolia</option>
|
||||
<option value="Montserrat">Montserrat</option>
|
||||
<option value="Morocco">Morocco</option>
|
||||
<option value="Mozambique">Mozambique</option>
|
||||
<option value="Myanmar">Myanmar</option>
|
||||
<option value="Namibia">Namibia</option>
|
||||
<option value="Nauru">Nauru</option>
|
||||
<option value="Nepal">Nepal</option>
|
||||
<option value="Netherlands">Netherlands</option>
|
||||
<option value="New Caledonia">New Caledonia</option>
|
||||
<option value="New Zealand">New Zealand</option>
|
||||
<option value="Nicaragua">Nicaragua</option>
|
||||
<option value="Niger">Niger</option>
|
||||
<option value="Nigeria">Nigeria</option>
|
||||
<option value="Niue">Niue</option>
|
||||
<option value="Norfolk Island">Norfolk Island</option>
|
||||
<option value="North Macedonia, Republic of">North Macedonia, Republic of</option>
|
||||
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
|
||||
<option value="Norway">Norway</option>
|
||||
<option value="Oman">Oman</option>
|
||||
<option value="Pakistan">Pakistan</option>
|
||||
<option value="Palau">Palau</option>
|
||||
<option value="State of Palestine">State of Palestine</option>
|
||||
<option value="Panama">Panama</option>
|
||||
<option value="Papua New Guinea">Papua New Guinea</option>
|
||||
<option value="Paraguay">Paraguay</option>
|
||||
<option value="Peru">Peru</option>
|
||||
<option value="Philippines">Philippines</option>
|
||||
<option value="Pitcairn">Pitcairn</option>
|
||||
<option value="Poland">Poland</option>
|
||||
<option value="Portugal">Portugal</option>
|
||||
<option value="Puerto Rico">Puerto Rico</option>
|
||||
<option value="Qatar">Qatar</option>
|
||||
<option value="Reunion">Reunion</option>
|
||||
<option value="Romania">Romania</option>
|
||||
<option value="Russian Federation">Russian Federation</option>
|
||||
<option value="Rwanda">Rwanda</option>
|
||||
<option value="Saint Helena">Saint Helena</option>
|
||||
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
|
||||
<option value="Saint Lucia">Saint Lucia</option>
|
||||
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
|
||||
<option value="Saint Vincent and the Grenadines">
|
||||
Saint Vincent and the Grenadines
|
||||
</option>
|
||||
<option value="Samoa">Samoa</option>
|
||||
<option value="San Marino">San Marino</option>
|
||||
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
|
||||
<option value="Saudi Arabia">Saudi Arabia</option>
|
||||
<option value="Senegal">Senegal</option>
|
||||
<option value="Seychelles">Seychelles</option>
|
||||
<option value="Sierra Leone">Sierra Leone</option>
|
||||
<option value="Singapore" selected>
|
||||
Singapore
|
||||
</option>
|
||||
<option value="Slovakia">Slovakia</option>
|
||||
<option value="Slovenia">Slovenia</option>
|
||||
<option value="Solomon Islands">Solomon Islands</option>
|
||||
<option value="Somalia">Somalia</option>
|
||||
<option value="South Africa">South Africa</option>
|
||||
<option value="South Georgia and the South Sandwich Islands">
|
||||
South Georgia and the South Sandwich Islands
|
||||
</option>
|
||||
<option value="Spain">Spain</option>
|
||||
<option value="Sri Lanka">Sri Lanka</option>
|
||||
<option value="Sudan">Sudan</option>
|
||||
<option value="Suriname">Suriname</option>
|
||||
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
|
||||
<option value="Eswatini">Eswatini</option>
|
||||
<option value="Sweden">Sweden</option>
|
||||
<option value="Switzerland">Switzerland</option>
|
||||
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
|
||||
<option value="Taiwan">Taiwan</option>
|
||||
<option value="Tajikistan">Tajikistan</option>
|
||||
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
|
||||
<option value="Thailand">Thailand</option>
|
||||
<option value="Timor-Leste">Timor-Leste</option>
|
||||
<option value="Togo">Togo</option>
|
||||
<option value="Tokelau">Tokelau</option>
|
||||
<option value="Tonga">Tonga</option>
|
||||
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
|
||||
<option value="Tunisia">Tunisia</option>
|
||||
<option value="Turkey">Turkey</option>
|
||||
<option value="Turkmenistan">Turkmenistan</option>
|
||||
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
|
||||
<option value="Tuvalu">Tuvalu</option>
|
||||
<option value="Uganda">Uganda</option>
|
||||
<option value="Ukraine">Ukraine</option>
|
||||
<option value="United Arab Emirates">United Arab Emirates</option>
|
||||
<option value="United Kingdom">United Kingdom</option>
|
||||
<option value="United States of America">United States of America</option>
|
||||
<option value="United States Minor Outlying Islands">
|
||||
United States Minor Outlying Islands
|
||||
</option>
|
||||
<option value="Uruguay">Uruguay</option>
|
||||
<option value="Uzbekistan">Uzbekistan</option>
|
||||
<option value="Vanuatu">Vanuatu</option>
|
||||
<option value="Venezuela">Venezuela</option>
|
||||
<option value="Vietnam">Vietnam</option>
|
||||
<option value="Virgin Islands, British">Virgin Islands, British</option>
|
||||
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
|
||||
<option value="Wallis and Futuna">Wallis and Futuna</option>
|
||||
<option value="Western Sahara">Western Sahara</option>
|
||||
<option value="Yemen">Yemen</option>
|
||||
<option value="Zambia">Zambia</option>
|
||||
<option value="Zimbabwe">Zimbabwe</option>
|
||||
<option value="Åland Islands">Åland Islands</option>
|
||||
<option value="Bonaire, Sint Eustatius and Saba">
|
||||
Bonaire, Sint Eustatius and Saba
|
||||
</option>
|
||||
<option value="Curaçao">Curaçao</option>
|
||||
<option value="Guernsey">Guernsey</option>
|
||||
<option value="Isle of Man">Isle of Man</option>
|
||||
<option value="Jersey">Jersey</option>
|
||||
<option value="Montenegro">Montenegro</option>
|
||||
<option value="Saint Barthélemy">Saint Barthélemy</option>
|
||||
<option value="Saint Martin (French part)">Saint Martin (French part)</option>
|
||||
<option value="Serbia">Serbia</option>
|
||||
<option value="Sint Maarten (Dutch part)">Sint Maarten (Dutch part)</option>
|
||||
<option value="South Sudan">South Sudan</option>
|
||||
<option value="Kosovo">Kosovo</option>
|
||||
</Select>
|
||||
</div>
|
||||
<Input.TextArea
|
||||
name="details"
|
||||
label="Additional Details"
|
||||
labelOptional="2000 character limit"
|
||||
placeholder="Tell us about your projects, clients, and technology…"
|
||||
limit={2000}
|
||||
rows={10}
|
||||
/>
|
||||
<div className="flex flex-row-reverse w-full">
|
||||
<Button size="xlarge" disabled={formSubmitted}>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{formSubmitted && (
|
||||
<Typography.Title level={3}>Thanks, we'll reach out to you shortly 👁⚡️👁</Typography.Title>
|
||||
)}
|
||||
<div id="become-a-partner" className="max-w-2xl pt-20 mx-auto space-y-8">
|
||||
<h2 className="h2">Become a Partner</h2>
|
||||
|
||||
<Form initialValues={INITIAL_VALUES} validate={validate} onSubmit={handleFormSubmit}>
|
||||
{({ isSubmitting }: any) => (
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1">
|
||||
<div className="h-24 col-span-2">
|
||||
<Select
|
||||
id="type"
|
||||
name="type"
|
||||
className="font-sans"
|
||||
label="What type of partner are you?"
|
||||
layout="vertical"
|
||||
>
|
||||
<Select.Option value="expert" selected={true}>
|
||||
Expert (Agency & Consulting)
|
||||
</Select.Option>
|
||||
<Select.Option value="technology">Technology</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<Input
|
||||
label="First Name *"
|
||||
id="first"
|
||||
name="first"
|
||||
layout="vertical"
|
||||
placeholder="Jane"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<Input
|
||||
label="Last Name *"
|
||||
id="last"
|
||||
name="last"
|
||||
layout="vertical"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<Input
|
||||
label="Company Name"
|
||||
id="company"
|
||||
name="company"
|
||||
layout="vertical"
|
||||
placeholder="Supa Inc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<InputNumber
|
||||
label="Company Size"
|
||||
id="size"
|
||||
name="size"
|
||||
layout="vertical"
|
||||
placeholder="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<Input
|
||||
label="Job Title"
|
||||
id="title"
|
||||
name="title"
|
||||
layout="vertical"
|
||||
placeholder="CEO"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<Input
|
||||
label="Business email *"
|
||||
id="email"
|
||||
name="email"
|
||||
layout="vertical"
|
||||
placeholder="janedoe@example.sg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<Input
|
||||
label="Phone Number"
|
||||
id="phone"
|
||||
name="phone"
|
||||
layout="vertical"
|
||||
placeholder="+65 1234 1234"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-24">
|
||||
<Select label="Country / Main Timezone" id="country" name="country" layout="vertical">
|
||||
<Select.Option value="Afghanistan">Afghanistan</Select.Option>
|
||||
<Select.Option value="Albania">Albania</Select.Option>
|
||||
<Select.Option value="Algeria">Algeria</Select.Option>
|
||||
<Select.Option value="American Samoa">American Samoa</Select.Option>
|
||||
<Select.Option value="Andorra">Andorra</Select.Option>
|
||||
<Select.Option value="Angola">Angola</Select.Option>
|
||||
<Select.Option value="Anguilla">Anguilla</Select.Option>
|
||||
<Select.Option value="Antarctica">Antarctica</Select.Option>
|
||||
<Select.Option value="Antigua and Barbuda">Antigua and Barbuda</Select.Option>
|
||||
<Select.Option value="Argentina">Argentina</Select.Option>
|
||||
<Select.Option value="Armenia">Armenia</Select.Option>
|
||||
<Select.Option value="Aruba">Aruba</Select.Option>
|
||||
<Select.Option value="Australia">Australia</Select.Option>
|
||||
<Select.Option value="Austria">Austria</Select.Option>
|
||||
<Select.Option value="Azerbaijan">Azerbaijan</Select.Option>
|
||||
<Select.Option value="Bahamas">Bahamas</Select.Option>
|
||||
<Select.Option value="Bahrain">Bahrain</Select.Option>
|
||||
<Select.Option value="Bangladesh">Bangladesh</Select.Option>
|
||||
<Select.Option value="Barbados">Barbados</Select.Option>
|
||||
<Select.Option value="Belarus">Belarus</Select.Option>
|
||||
<Select.Option value="Belgium">Belgium</Select.Option>
|
||||
<Select.Option value="Belize">Belize</Select.Option>
|
||||
<Select.Option value="Benin">Benin</Select.Option>
|
||||
<Select.Option value="Bermuda">Bermuda</Select.Option>
|
||||
<Select.Option value="Bhutan">Bhutan</Select.Option>
|
||||
<Select.Option value="Bolivia">Bolivia</Select.Option>
|
||||
<Select.Option value="Bosnia and Herzegovina">Bosnia and Herzegovina</Select.Option>
|
||||
<Select.Option value="Botswana">Botswana</Select.Option>
|
||||
<Select.Option value="Bouvet Island">Bouvet Island</Select.Option>
|
||||
<Select.Option value="Brazil">Brazil</Select.Option>
|
||||
<Select.Option value="British Indian Ocean Territory">
|
||||
British Indian Ocean Territory
|
||||
</Select.Option>
|
||||
<Select.Option value="Brunei Darussalam">Brunei Darussalam</Select.Option>
|
||||
<Select.Option value="Bulgaria">Bulgaria</Select.Option>
|
||||
<Select.Option value="Burkina Faso">Burkina Faso</Select.Option>
|
||||
<Select.Option value="Burundi">Burundi</Select.Option>
|
||||
<Select.Option value="Cambodia">Cambodia</Select.Option>
|
||||
<Select.Option value="Cameroon">Cameroon</Select.Option>
|
||||
<Select.Option value="Canada">Canada</Select.Option>
|
||||
<Select.Option value="Cape Verde">Cape Verde</Select.Option>
|
||||
<Select.Option value="Cayman Islands">Cayman Islands</Select.Option>
|
||||
<Select.Option value="Central African Republic">
|
||||
Central African Republic
|
||||
</Select.Option>
|
||||
<Select.Option value="Chad">Chad</Select.Option>
|
||||
<Select.Option value="Chile">Chile</Select.Option>
|
||||
<Select.Option value="China">China</Select.Option>
|
||||
<Select.Option value="Christmas Island">Christmas Island</Select.Option>
|
||||
<Select.Option value="Cocos (Keeling) Islands">
|
||||
Cocos (Keeling) Islands
|
||||
</Select.Option>
|
||||
<Select.Option value="Colombia">Colombia</Select.Option>
|
||||
<Select.Option value="Comoros">Comoros</Select.Option>
|
||||
<Select.Option value="Congo">Congo</Select.Option>
|
||||
<Select.Option value="Congo, the Democratic Republic of the">
|
||||
Congo, the Democratic Republic of the
|
||||
</Select.Option>
|
||||
<Select.Option value="Cook Islands">Cook Islands</Select.Option>
|
||||
<Select.Option value="Costa Rica">Costa Rica</Select.Option>
|
||||
<Select.Option value="Cote D'Ivoire">Cote D'Ivoire</Select.Option>
|
||||
<Select.Option value="Croatia">Croatia</Select.Option>
|
||||
<Select.Option value="Cuba">Cuba</Select.Option>
|
||||
<Select.Option value="Cyprus">Cyprus</Select.Option>
|
||||
<Select.Option value="Czech Republic">Czech Republic</Select.Option>
|
||||
<Select.Option value="Denmark">Denmark</Select.Option>
|
||||
<Select.Option value="Djibouti">Djibouti</Select.Option>
|
||||
<Select.Option value="Dominica">Dominica</Select.Option>
|
||||
<Select.Option value="Dominican Republic">Dominican Republic</Select.Option>
|
||||
<Select.Option value="Ecuador">Ecuador</Select.Option>
|
||||
<Select.Option value="Egypt">Egypt</Select.Option>
|
||||
<Select.Option value="El Salvador">El Salvador</Select.Option>
|
||||
<Select.Option value="Equatorial Guinea">Equatorial Guinea</Select.Option>
|
||||
<Select.Option value="Eritrea">Eritrea</Select.Option>
|
||||
<Select.Option value="Estonia">Estonia</Select.Option>
|
||||
<Select.Option value="Ethiopia">Ethiopia</Select.Option>
|
||||
<Select.Option value="Falkland Islands (Malvinas)">
|
||||
Falkland Islands (Malvinas)
|
||||
</Select.Option>
|
||||
<Select.Option value="Faroe Islands">Faroe Islands</Select.Option>
|
||||
<Select.Option value="Fiji">Fiji</Select.Option>
|
||||
<Select.Option value="Finland">Finland</Select.Option>
|
||||
<Select.Option value="France">France</Select.Option>
|
||||
<Select.Option value="French Guiana">French Guiana</Select.Option>
|
||||
<Select.Option value="French Polynesia">French Polynesia</Select.Option>
|
||||
<Select.Option value="French Southern Territories">
|
||||
French Southern Territories
|
||||
</Select.Option>
|
||||
<Select.Option value="Gabon">Gabon</Select.Option>
|
||||
<Select.Option value="Gambia">Gambia</Select.Option>
|
||||
<Select.Option value="Georgia">Georgia</Select.Option>
|
||||
<Select.Option value="Germany">Germany</Select.Option>
|
||||
<Select.Option value="Ghana">Ghana</Select.Option>
|
||||
<Select.Option value="Gibraltar">Gibraltar</Select.Option>
|
||||
<Select.Option value="Greece">Greece</Select.Option>
|
||||
<Select.Option value="Greenland">Greenland</Select.Option>
|
||||
<Select.Option value="Grenada">Grenada</Select.Option>
|
||||
<Select.Option value="Guadeloupe">Guadeloupe</Select.Option>
|
||||
<Select.Option value="Guam">Guam</Select.Option>
|
||||
<Select.Option value="Guatemala">Guatemala</Select.Option>
|
||||
<Select.Option value="Guinea">Guinea</Select.Option>
|
||||
<Select.Option value="Guinea-Bissau">Guinea-Bissau</Select.Option>
|
||||
<Select.Option value="Guyana">Guyana</Select.Option>
|
||||
<Select.Option value="Haiti">Haiti</Select.Option>
|
||||
<Select.Option value="Heard Island and Mcdonald Islands">
|
||||
Heard Island and Mcdonald Islands
|
||||
</Select.Option>
|
||||
<Select.Option value="Holy See (Vatican City State)">
|
||||
Holy See (Vatican City State)
|
||||
</Select.Option>
|
||||
<Select.Option value="Honduras">Honduras</Select.Option>
|
||||
<Select.Option value="Hong Kong">Hong Kong</Select.Option>
|
||||
<Select.Option value="Hungary">Hungary</Select.Option>
|
||||
<Select.Option value="Iceland">Iceland</Select.Option>
|
||||
<Select.Option value="India">India</Select.Option>
|
||||
<Select.Option value="Indonesia">Indonesia</Select.Option>
|
||||
<Select.Option value="Iran, Islamic Republic of">
|
||||
Iran, Islamic Republic of
|
||||
</Select.Option>
|
||||
<Select.Option value="Iraq">Iraq</Select.Option>
|
||||
<Select.Option value="Ireland">Ireland</Select.Option>
|
||||
<Select.Option value="Israel">Israel</Select.Option>
|
||||
<Select.Option value="Italy">Italy</Select.Option>
|
||||
<Select.Option value="Jamaica">Jamaica</Select.Option>
|
||||
<Select.Option value="Japan">Japan</Select.Option>
|
||||
<Select.Option value="Jordan">Jordan</Select.Option>
|
||||
<Select.Option value="Kazakhstan">Kazakhstan</Select.Option>
|
||||
<Select.Option value="Kenya">Kenya</Select.Option>
|
||||
<Select.Option value="Kiribati">Kiribati</Select.Option>
|
||||
<Select.Option value="North Korea">North Korea</Select.Option>
|
||||
<Select.Option value="South Korea">South Korea</Select.Option>
|
||||
<Select.Option value="Kuwait">Kuwait</Select.Option>
|
||||
<Select.Option value="Kyrgyzstan">Kyrgyzstan</Select.Option>
|
||||
<Select.Option value="Lao People's Democratic Republic">
|
||||
Lao People's Democratic Republic
|
||||
</Select.Option>
|
||||
<Select.Option value="Latvia">Latvia</Select.Option>
|
||||
<Select.Option value="Lebanon">Lebanon</Select.Option>
|
||||
<Select.Option value="Lesotho">Lesotho</Select.Option>
|
||||
<Select.Option value="Liberia">Liberia</Select.Option>
|
||||
<Select.Option value="Libya">Libya</Select.Option>
|
||||
<Select.Option value="Liechtenstein">Liechtenstein</Select.Option>
|
||||
<Select.Option value="Lithuania">Lithuania</Select.Option>
|
||||
<Select.Option value="Luxembourg">Luxembourg</Select.Option>
|
||||
<Select.Option value="Macao">Macao</Select.Option>
|
||||
<Select.Option value="Madagascar">Madagascar</Select.Option>
|
||||
<Select.Option value="Malawi">Malawi</Select.Option>
|
||||
<Select.Option value="Malaysia">Malaysia</Select.Option>
|
||||
<Select.Option value="Maldives">Maldives</Select.Option>
|
||||
<Select.Option value="Mali">Mali</Select.Option>
|
||||
<Select.Option value="Malta">Malta</Select.Option>
|
||||
<Select.Option value="Marshall Islands">Marshall Islands</Select.Option>
|
||||
<Select.Option value="Martinique">Martinique</Select.Option>
|
||||
<Select.Option value="Mauritania">Mauritania</Select.Option>
|
||||
<Select.Option value="Mauritius">Mauritius</Select.Option>
|
||||
<Select.Option value="Mayotte">Mayotte</Select.Option>
|
||||
<Select.Option value="Mexico">Mexico</Select.Option>
|
||||
<Select.Option value="Micronesia, Federated States of">
|
||||
Micronesia, Federated States of
|
||||
</Select.Option>
|
||||
<Select.Option value="Moldova, Republic of">Moldova, Republic of</Select.Option>
|
||||
<Select.Option value="Monaco">Monaco</Select.Option>
|
||||
<Select.Option value="Mongolia">Mongolia</Select.Option>
|
||||
<Select.Option value="Montserrat">Montserrat</Select.Option>
|
||||
<Select.Option value="Morocco">Morocco</Select.Option>
|
||||
<Select.Option value="Mozambique">Mozambique</Select.Option>
|
||||
<Select.Option value="Myanmar">Myanmar</Select.Option>
|
||||
<Select.Option value="Namibia">Namibia</Select.Option>
|
||||
<Select.Option value="Nauru">Nauru</Select.Option>
|
||||
<Select.Option value="Nepal">Nepal</Select.Option>
|
||||
<Select.Option value="Netherlands">Netherlands</Select.Option>
|
||||
<Select.Option value="New Caledonia">New Caledonia</Select.Option>
|
||||
<Select.Option value="New Zealand">New Zealand</Select.Option>
|
||||
<Select.Option value="Nicaragua">Nicaragua</Select.Option>
|
||||
<Select.Option value="Niger">Niger</Select.Option>
|
||||
<Select.Option value="Nigeria">Nigeria</Select.Option>
|
||||
<Select.Option value="Niue">Niue</Select.Option>
|
||||
<Select.Option value="Norfolk Island">Norfolk Island</Select.Option>
|
||||
<Select.Option value="North Macedonia, Republic of">
|
||||
North Macedonia, Republic of
|
||||
</Select.Option>
|
||||
<Select.Option value="Northern Mariana Islands">
|
||||
Northern Mariana Islands
|
||||
</Select.Option>
|
||||
<Select.Option value="Norway">Norway</Select.Option>
|
||||
<Select.Option value="Oman">Oman</Select.Option>
|
||||
<Select.Option value="Pakistan">Pakistan</Select.Option>
|
||||
<Select.Option value="Palau">Palau</Select.Option>
|
||||
<Select.Option value="State of Palestine">State of Palestine</Select.Option>
|
||||
<Select.Option value="Panama">Panama</Select.Option>
|
||||
<Select.Option value="Papua New Guinea">Papua New Guinea</Select.Option>
|
||||
<Select.Option value="Paraguay">Paraguay</Select.Option>
|
||||
<Select.Option value="Peru">Peru</Select.Option>
|
||||
<Select.Option value="Philippines">Philippines</Select.Option>
|
||||
<Select.Option value="Pitcairn">Pitcairn</Select.Option>
|
||||
<Select.Option value="Poland">Poland</Select.Option>
|
||||
<Select.Option value="Portugal">Portugal</Select.Option>
|
||||
<Select.Option value="Puerto Rico">Puerto Rico</Select.Option>
|
||||
<Select.Option value="Qatar">Qatar</Select.Option>
|
||||
<Select.Option value="Reunion">Reunion</Select.Option>
|
||||
<Select.Option value="Romania">Romania</Select.Option>
|
||||
<Select.Option value="Russian Federation">Russian Federation</Select.Option>
|
||||
<Select.Option value="Rwanda">Rwanda</Select.Option>
|
||||
<Select.Option value="Saint Helena">Saint Helena</Select.Option>
|
||||
<Select.Option value="Saint Kitts and Nevis">Saint Kitts and Nevis</Select.Option>
|
||||
<Select.Option value="Saint Lucia">Saint Lucia</Select.Option>
|
||||
<Select.Option value="Saint Pierre and Miquelon">
|
||||
Saint Pierre and Miquelon
|
||||
</Select.Option>
|
||||
<Select.Option value="Saint Vincent and the Grenadines">
|
||||
Saint Vincent and the Grenadines
|
||||
</Select.Option>
|
||||
<Select.Option value="Samoa">Samoa</Select.Option>
|
||||
<Select.Option value="San Marino">San Marino</Select.Option>
|
||||
<Select.Option value="Sao Tome and Principe">Sao Tome and Principe</Select.Option>
|
||||
<Select.Option value="Saudi Arabia">Saudi Arabia</Select.Option>
|
||||
<Select.Option value="Senegal">Senegal</Select.Option>
|
||||
<Select.Option value="Seychelles">Seychelles</Select.Option>
|
||||
<Select.Option value="Sierra Leone">Sierra Leone</Select.Option>
|
||||
<Select.Option value="Singapore">Singapore</Select.Option>
|
||||
<Select.Option value="Slovakia">Slovakia</Select.Option>
|
||||
<Select.Option value="Slovenia">Slovenia</Select.Option>
|
||||
<Select.Option value="Solomon Islands">Solomon Islands</Select.Option>
|
||||
<Select.Option value="Somalia">Somalia</Select.Option>
|
||||
<Select.Option value="South Africa">South Africa</Select.Option>
|
||||
<Select.Option value="South Georgia and the South Sandwich Islands">
|
||||
South Georgia and the South Sandwich Islands
|
||||
</Select.Option>
|
||||
<Select.Option value="Spain">Spain</Select.Option>
|
||||
<Select.Option value="Sri Lanka">Sri Lanka</Select.Option>
|
||||
<Select.Option value="Sudan">Sudan</Select.Option>
|
||||
<Select.Option value="Suriname">Suriname</Select.Option>
|
||||
<Select.Option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</Select.Option>
|
||||
<Select.Option value="Eswatini">Eswatini</Select.Option>
|
||||
<Select.Option value="Sweden">Sweden</Select.Option>
|
||||
<Select.Option value="Switzerland">Switzerland</Select.Option>
|
||||
<Select.Option value="Syrian Arab Republic">Syrian Arab Republic</Select.Option>
|
||||
<Select.Option value="Taiwan">Taiwan</Select.Option>
|
||||
<Select.Option value="Tajikistan">Tajikistan</Select.Option>
|
||||
<Select.Option value="Tanzania, United Republic of">
|
||||
Tanzania, United Republic of
|
||||
</Select.Option>
|
||||
<Select.Option value="Thailand">Thailand</Select.Option>
|
||||
<Select.Option value="Timor-Leste">Timor-Leste</Select.Option>
|
||||
<Select.Option value="Togo">Togo</Select.Option>
|
||||
<Select.Option value="Tokelau">Tokelau</Select.Option>
|
||||
<Select.Option value="Tonga">Tonga</Select.Option>
|
||||
<Select.Option value="Trinidad and Tobago">Trinidad and Tobago</Select.Option>
|
||||
<Select.Option value="Tunisia">Tunisia</Select.Option>
|
||||
<Select.Option value="Turkey">Turkey</Select.Option>
|
||||
<Select.Option value="Turkmenistan">Turkmenistan</Select.Option>
|
||||
<Select.Option value="Turks and Caicos Islands">
|
||||
Turks and Caicos Islands
|
||||
</Select.Option>
|
||||
<Select.Option value="Tuvalu">Tuvalu</Select.Option>
|
||||
<Select.Option value="Uganda">Uganda</Select.Option>
|
||||
<Select.Option value="Ukraine">Ukraine</Select.Option>
|
||||
<Select.Option value="United Arab Emirates">United Arab Emirates</Select.Option>
|
||||
<Select.Option value="United Kingdom">United Kingdom</Select.Option>
|
||||
<Select.Option value="United States of America">
|
||||
United States of America
|
||||
</Select.Option>
|
||||
<Select.Option value="United States Minor Outlying Islands">
|
||||
United States Minor Outlying Islands
|
||||
</Select.Option>
|
||||
<Select.Option value="Uruguay">Uruguay</Select.Option>
|
||||
<Select.Option value="Uzbekistan">Uzbekistan</Select.Option>
|
||||
<Select.Option value="Vanuatu">Vanuatu</Select.Option>
|
||||
<Select.Option value="Venezuela">Venezuela</Select.Option>
|
||||
<Select.Option value="Vietnam">Vietnam</Select.Option>
|
||||
<Select.Option value="Virgin Islands, British">
|
||||
Virgin Islands, British
|
||||
</Select.Option>
|
||||
<Select.Option value="Virgin Islands, U.S.">Virgin Islands, U.S.</Select.Option>
|
||||
<Select.Option value="Wallis and Futuna">Wallis and Futuna</Select.Option>
|
||||
<Select.Option value="Western Sahara">Western Sahara</Select.Option>
|
||||
<Select.Option value="Yemen">Yemen</Select.Option>
|
||||
<Select.Option value="Zambia">Zambia</Select.Option>
|
||||
<Select.Option value="Zimbabwe">Zimbabwe</Select.Option>
|
||||
<Select.Option value="Åland Islands">Åland Islands</Select.Option>
|
||||
<Select.Option value="Bonaire, Sint Eustatius and Saba">
|
||||
Bonaire, Sint Eustatius and Saba
|
||||
</Select.Option>
|
||||
<Select.Option value="Curaçao">Curaçao</Select.Option>
|
||||
<Select.Option value="Guernsey">Guernsey</Select.Option>
|
||||
<Select.Option value="Isle of Man">Isle of Man</Select.Option>
|
||||
<Select.Option value="Jersey">Jersey</Select.Option>
|
||||
<Select.Option value="Montenegro">Montenegro</Select.Option>
|
||||
<Select.Option value="Saint Barthélemy">Saint Barthélemy</Select.Option>
|
||||
<Select.Option value="Saint Martin (French part)">
|
||||
Saint Martin (French part)
|
||||
</Select.Option>
|
||||
<Select.Option value="Serbia">Serbia</Select.Option>
|
||||
<Select.Option value="Sint Maarten (Dutch part)">
|
||||
Sint Maarten (Dutch part)
|
||||
</Select.Option>
|
||||
<Select.Option value="South Sudan">South Sudan</Select.Option>
|
||||
<Select.Option value="Kosovo">Kosovo</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<Input.TextArea
|
||||
id="details"
|
||||
name="details"
|
||||
label="Additional Details"
|
||||
placeholder="Tell us about your projects, clients, and technology..."
|
||||
rows={10}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row-reverse w-full col-span-2 pt-4">
|
||||
<Button
|
||||
size="xlarge"
|
||||
disabled={formSubmitted}
|
||||
loading={isSubmitting}
|
||||
htmlType="submit"
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
|
||||
{formSubmitted && <h3 className="h3">Thanks, we'll reach out to you shortly 👁⚡️👁</h3>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import { Card, Space, Typography } from '@supabase/ui'
|
||||
import Link from 'next/link'
|
||||
import { Partner } from '~/types/partners'
|
||||
|
||||
@@ -11,29 +10,23 @@ export default function TileGrid({
|
||||
<>
|
||||
{Object.keys(partnersByCategory).map((category) => (
|
||||
<div key={category} id={category.toLowerCase()} className="space-y-8">
|
||||
<Typography.Title level={2}>{category}</Typography.Title>
|
||||
<h2 className="h2">{category}</h2>
|
||||
<div className="grid max-w-lg gap-5 mx-auto lg:grid-cols-3 lg:max-w-none">
|
||||
{partnersByCategory[category].map((p) => (
|
||||
<Link key={p.slug} href={`/partners/${p.slug}`}>
|
||||
<a>
|
||||
<Card key={`partner_${p.slug}`} hoverable>
|
||||
<Space className="justify-between h-30" direction="vertical">
|
||||
<div className="flex justify-between w-full space-x-6">
|
||||
<div>
|
||||
<Typography.Text small type="secondary">
|
||||
{p.category}
|
||||
</Typography.Text>
|
||||
<Typography.Title level={3}>{p.title}</Typography.Title>
|
||||
</div>
|
||||
<img
|
||||
className="flex-shrink-0 w-10 h-10 bg-gray-300 rounded-full"
|
||||
src={p.logo}
|
||||
alt={p.title}
|
||||
/>
|
||||
</div>
|
||||
<Typography.Text type="default">{p.description}</Typography.Text>
|
||||
</Space>
|
||||
</Card>
|
||||
<a className="flex flex-col w-full h-full p-4 transition-all border rounded-lg shadow border-scale-300 bg-scale-400 hover:-translate-y-1 hover:shadow-lg">
|
||||
<div className="flex justify-between w-full space-x-6">
|
||||
<div>
|
||||
<span className="text-sm text-scale-1100">{p.category}</span>
|
||||
<h3 className="h3">{p.title}</h3>
|
||||
</div>
|
||||
<img
|
||||
className="flex-shrink-0 w-10 h-10 bg-gray-300 rounded-full"
|
||||
src={p.logo}
|
||||
alt={p.title}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-scale-1200">{p.description}</span>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
import { IconChevronLeft, IconExternalLink, Typography } from '@supabase/ui'
|
||||
import { IconChevronLeft, IconExternalLink } from '@supabase/ui'
|
||||
import { marked } from 'marked'
|
||||
import { GetStaticPaths, GetStaticProps } from 'next'
|
||||
import { NextSeo } from 'next-seo'
|
||||
@@ -34,39 +34,40 @@ function Partner({ partner }: { partner: Partner }) {
|
||||
],
|
||||
}}
|
||||
/>
|
||||
|
||||
<DefaultLayout>
|
||||
<SectionContainer>
|
||||
<div className="col-span-12 mb-2 space-y-12 lg:col-span-2">
|
||||
<div className="max-w-5xl col-span-12 mx-auto mb-2 space-y-12 lg:col-span-2">
|
||||
{/* Back button */}
|
||||
<Typography.Text type="secondary">
|
||||
<Link
|
||||
href={`/partners/${partner.type === 'technology' ? 'integrations' : 'experts'}`}
|
||||
>
|
||||
<a className="flex items-center cursor-pointer hover:text-gray-900 dark:hover:text-white">
|
||||
<IconChevronLeft style={{ padding: 0 }} />
|
||||
Back
|
||||
</a>
|
||||
</Link>
|
||||
</Typography.Text>
|
||||
<Link href={`/partners/${partner.type === 'technology' ? 'integrations' : 'experts'}`}>
|
||||
<a className="flex items-center transition-colors cursor-pointer text-scale-1200 hover:text-scale-1000">
|
||||
<IconChevronLeft style={{ padding: 0 }} />
|
||||
Back
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<img
|
||||
className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-f0"
|
||||
className="rounded-full bg-scale-400 w-14 h-14 flex-shrink-f0"
|
||||
src={partner.logo}
|
||||
alt={partner.title}
|
||||
/>
|
||||
<Typography.Title className="mb-0">{partner.title}</Typography.Title>
|
||||
<h1 className="text-6xl font-semibold text-scale-1200" style={{ marginBottom: 0 }}>
|
||||
{partner.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="p-4 bg-dark-100 dark:bg-dark-700"
|
||||
className="py-6 bg-scale-400"
|
||||
style={{ marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)' }}
|
||||
>
|
||||
<Swiper
|
||||
initialSlide={3}
|
||||
initialSlide={0}
|
||||
spaceBetween={0}
|
||||
slidesPerView={4}
|
||||
speed={300}
|
||||
// slidesOffsetBefore={300}
|
||||
centerInsufficientSlides={true}
|
||||
breakpoints={{
|
||||
320: {
|
||||
slidesPerView: 1,
|
||||
@@ -99,65 +100,62 @@ function Partner({ partner }: { partner: Partner }) {
|
||||
|
||||
<div className="grid gap-3 lg:grid-cols-4">
|
||||
<div className="lg:col-span-3">
|
||||
<Typography.Title
|
||||
level={2}
|
||||
className="mt-8 mb-4 font-bold"
|
||||
style={{ fontSize: '1.5rem' }}
|
||||
<h2
|
||||
className="mt-8 font-bold text-scale-1200"
|
||||
style={{ fontSize: '1.5rem', marginBottom: '1rem' }}
|
||||
>
|
||||
Overview
|
||||
</Typography.Title>
|
||||
</h2>
|
||||
|
||||
<div
|
||||
className="prose dark:prose-invert"
|
||||
dangerouslySetInnerHTML={{ __html: partner.overview }}
|
||||
/>
|
||||
<div className="prose" dangerouslySetInnerHTML={{ __html: partner.overview }} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography.Title
|
||||
level={2}
|
||||
className="mt-8 mb-4 font-bold"
|
||||
style={{ fontSize: '1.5rem' }}
|
||||
<h2
|
||||
className="mt-8 font-bold text-scale-1200"
|
||||
style={{ fontSize: '1.5rem', marginBottom: '1rem' }}
|
||||
>
|
||||
Details
|
||||
</Typography.Title>
|
||||
</h2>
|
||||
|
||||
<div className="divide-y">
|
||||
<div className="divide-y text-scale-1200">
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<Typography.Text strong>Developer</Typography.Text>
|
||||
<Typography.Text>{partner.developer}</Typography.Text>
|
||||
<strong>Developer</strong>
|
||||
<span>{partner.developer}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<Typography.Text strong>Category</Typography.Text>
|
||||
<strong>Category</strong>
|
||||
<Link
|
||||
href={`/partners/${
|
||||
partner.type === 'technology' ? 'integrations' : 'experts'
|
||||
}#${partner.category.toLowerCase()}`}
|
||||
>
|
||||
<a className="text-brand-700 hover:text-brand-800">{partner.category}</a>
|
||||
<a className="transition-colors text-brand-900 hover:text-brand-800">
|
||||
{partner.category}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<Typography.Text strong>Website</Typography.Text>
|
||||
<strong>Website</strong>
|
||||
<a
|
||||
href={partner.website}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
className="transition-colors text-brand-900 hover:text-brand-800"
|
||||
>
|
||||
{new URL(partner.website).host}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<Typography.Text strong>Documentation</Typography.Text>
|
||||
<strong>Documentation</strong>
|
||||
<a
|
||||
href={partner.docs}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
className="transition-colors text-brand-900 hover:text-brand-800"
|
||||
>
|
||||
<span className="flex items-center space-x-1">
|
||||
<span>Read</span>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
import { IconArrowRight, IconSearch, Input, Select, Typography } from '@supabase/ui'
|
||||
import { IconArrowRight, IconSearch, Input, Select } from '@supabase/ui'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
@@ -66,38 +66,30 @@ function ExpertPartnersPage(props: Props) {
|
||||
<SectionContainer className="space-y-12">
|
||||
{/* Horizontal link menu */}
|
||||
<div className="flex flex-col items-start justify-between w-full space-y-3 md:space-y-0 md:flex-row md:items-center">
|
||||
<Typography.Title level={3} className="mb-0">
|
||||
<h3 className="h3" style={{ marginBottom: 0 }}>
|
||||
Partners
|
||||
</Typography.Title>
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-col space-y-1 sm:flex-row sm:space-y-0 sm:space-x-6">
|
||||
<Link href={`/partners/integrations`}>
|
||||
<a>
|
||||
<Typography.Title level={5} className="mb-0">
|
||||
<span className="text-brand-700 hover:text-brand-800">INTEGRATIONS</span>
|
||||
</Typography.Title>
|
||||
<a className="transition-colors text-brand-900 hover:text-brand-800">
|
||||
INTEGRATIONS
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={`/partners/experts`}>
|
||||
<a>
|
||||
<Typography.Title level={5} className="mb-0">
|
||||
EXPERTS
|
||||
</Typography.Title>
|
||||
</a>
|
||||
<a className="text-scale-1200">EXPERTS</a>
|
||||
</Link>
|
||||
<Link href={`/partners/experts#become-a-partner`}>
|
||||
<a className="text-brand-700 hover:text-brand-800">
|
||||
<Typography.Title level={5} className="mb-0">
|
||||
<span className="flex text-brand-700 hover:text-brand-800">
|
||||
BECOME A PARTNER <IconArrowRight />
|
||||
</span>
|
||||
</Typography.Title>
|
||||
<Link href={`/partners/integrations#become-a-partner`}>
|
||||
<a className="flex items-center space-x-1 transition-colors text-brand-900 hover:text-brand-800">
|
||||
BECOME A PARTNER <IconArrowRight />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<Typography.Title className="text-center">Find an Expert</Typography.Title>
|
||||
<h1 className="text-center h1">Find an Expert</h1>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="w-full space-y-3 md:space-y-0 md:flex md:space-x-6">
|
||||
<Input
|
||||
@@ -123,14 +115,16 @@ function ExpertPartnersPage(props: Props) {
|
||||
<option value="become-a-partner">Become a partner</option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Partner Tiles */}
|
||||
<div className="grid">
|
||||
{partners.length ? (
|
||||
<TileGrid partnersByCategory={partnersByCategory} />
|
||||
) : (
|
||||
<Typography.Title level={2}>No Experts Found</Typography.Title>
|
||||
<h2 className="h2">No Partners Found</h2>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Become a partner form */}
|
||||
<BecomeAPartner supabase={supabase} />
|
||||
</SectionContainer>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
import { IconArrowRight, IconLoader, IconSearch, Input, Select, Typography } from '@supabase/ui'
|
||||
import { IconArrowRight, IconLoader, IconSearch, Input, Select } from '@supabase/ui'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
@@ -117,38 +117,28 @@ function IntegrationPartnersPage(props: Props) {
|
||||
<SectionContainer className="space-y-12">
|
||||
{/* Horizontal link menu */}
|
||||
<div className="flex flex-col items-start justify-between w-full space-y-3 md:space-y-0 md:flex-row md:items-center">
|
||||
<Typography.Title level={3} className="mb-0">
|
||||
<h3 className="h3" style={{ marginBottom: 0 }}>
|
||||
Partners
|
||||
</Typography.Title>
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-col space-y-1 sm:flex-row sm:space-y-0 sm:space-x-6">
|
||||
<Link href={`/partners/integrations`}>
|
||||
<a>
|
||||
<Typography.Title level={5} className="mb-0">
|
||||
INTEGRATIONS
|
||||
</Typography.Title>
|
||||
</a>
|
||||
<a className="text-scale-1200">INTEGRATIONS</a>
|
||||
</Link>
|
||||
<Link href={`/partners/experts`}>
|
||||
<a>
|
||||
<Typography.Title level={5} className="mb-0">
|
||||
<span className="text-brand-700 hover:text-brand-800">EXPERTS</span>
|
||||
</Typography.Title>
|
||||
</a>
|
||||
<a className="transition-colors text-brand-900 hover:text-brand-800">EXPERTS</a>
|
||||
</Link>
|
||||
<Link href={`/partners/integrations#become-a-partner`}>
|
||||
<a className="text-brand-700 hover:text-brand-800">
|
||||
<Typography.Title level={5} className="mb-0">
|
||||
<span className="flex text-brand-700 hover:text-brand-800">
|
||||
BECOME A PARTNER <IconArrowRight />
|
||||
</span>
|
||||
</Typography.Title>
|
||||
<a className="flex items-center space-x-1 transition-colors text-brand-900 hover:text-brand-800">
|
||||
BECOME A PARTNER <IconArrowRight />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<Typography.Title className="text-center">Find an Integration</Typography.Title>
|
||||
<h1 className="text-center h1">Find an Integration</h1>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="w-full space-y-3 md:space-y-0 md:flex md:space-x-6">
|
||||
<Input
|
||||
@@ -183,14 +173,16 @@ function IntegrationPartnersPage(props: Props) {
|
||||
<option value="become-a-partner">Become a partner</option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Partner Tiles */}
|
||||
<div className="grid space-y-10">
|
||||
{partners.length ? (
|
||||
<TileGrid partnersByCategory={partnersByCategory} />
|
||||
) : (
|
||||
<Typography.Title level={2}>No Partners Found</Typography.Title>
|
||||
<h2 className="h2">No Partners Found</h2>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Become a partner form */}
|
||||
<BecomeAPartner supabase={supabase} />
|
||||
</SectionContainer>
|
||||
|
||||
Reference in new issue
Block a user