feat: signup form initial setup

Author: tikagan

components/signup-card.vue

@@ -4,11 +4,9 @@
     :style="cardStyles">
     <div class="content">
 
-      <img v-if="type !== 'vertical' && image" :src="image" class="image" />
+      <div class="text">
 
-      <div v-if="type !== 'logo'" class="text">
-
-        <PieChartIcon />
+        <IconPieChartIcon />
 
         <div v-if="title" class="title">
           {{ title }}
@@ -20,14 +18,81 @@
 
       </div>
 
+      <div class="signup-form">
+
+        <div class="name-fields">
+          <input
+            class="first-name form-field"
+            type="text"
+            :placeholder="firstName.placeholder"
+            required="true" />
+          <input
+            class="last-name form-field"
+            type="text"
+            :placeholder="lastName.placeholder"
+            required="true" />
+        </div>
+
+        <input
+          class="email form-field"
+          type="email"
+          :placeholder="email.placeholder"
+          required="true" />
+
+        <input
+          class="org form-field"
+          :placeholder="org.placeholder"
+          type="text"
+          required="true" />
+
+        <ZeroDropdown class="country form-field" :display-selected="true">
+          <template #toggle-button="{ togglePanel }">
+            <div class="toggle-button" @click="togglePanel">
+              <p class="toggle-button-label">
+                Country
+              </p>
+            </div>
+          </template>
+          <template #dropdown-panel>
+            <div class="dropdown-panel">
+              <div
+                v-for="option in country.options"
+                :key="option.code"
+                class="country-option">
+                <p class="country-label" v-html="option.label" />
+              </div>
+            </div>
+          </template>
+        </ZeroDropdown>
+
+        <ZeroDropdown class="familiarity" :display-selected="true">
+          <template #toggle-button="{ togglePanel }">
+            <h3 class="dropdown-label" v-html="familiarity.label" />
+            <div class="toggle-button form-field" @click="togglePanel">
+              <p class="toggle-button-label">
+                Select an option
+              </p>
+            </div>
+          </template>
+          <template #dropdown-panel>
+            <div class="dropdown-panel">
+              <div
+                v-for="(option, index) in familiarity.options"
+                :key="index"
+                class="country-option">
+                <p class="country-label" v-html="option" />
+              </div>
+            </div>
+          </template>
+        </ZeroDropdown>
+
+      </div>
+
     </div>
   </div>
 </template>
 
 <script setup>
-// ===================================================================== Imports
-const PieChartIcon = resolveComponent('icon/pie-chart-icon')
-
 // ======================================================================= Props
 const props = defineProps({
   signupCard: {
@@ -49,6 +114,18 @@ const cardStyles = computed(() => {
   return null
 })
 
+const firstName = computed(() => { return props.signupCard.signup_form.first_name })
+
+const lastName = computed(() => { return props.signupCard.signup_form.last_name })
+
+const email = computed(() => { return props.signupCard.signup_form.email })
+
+const org = computed(() => { return props.signupCard.signup_form.org })
+
+const country = computed(() => { return props.signupCard.signup_form.country })
+
+const familiarity = computed(() => { return props.signupCard.signup_form.filecoin_familiarity })
+
 
 </script>
 
@@ -78,4 +155,14 @@ const cardStyles = computed(() => {
     margin-bottom: toRem(22);
   }
 }
+
+// //////////////////////////////////////////////////////////////////////// Form
+.form-field {
+  border: var(--brand-color) 1px solid;
+  border-radius: toRem(5);
+  &:is(:not(.first-name, .last-name, :last-child)) {
+    margin-bottom: toRem(24);
+  }
+}
+
 </style>

content/core/index.json

@@ -24,7 +24,7 @@
         "ctas": [
           {
             "text": "Sign up",
-            "to": "/",
+            "to": "/signup",
             "tag": "nuxt-link",
             "theme": "primary"
           },
@@ -174,7 +174,7 @@
                     "text": "View all 30+ compatible storage services",
                     "tag": "a",
                     "to": "https://example.com",
-                    "theme": "secondary" 
+                    "theme": "secondary"
                   }
                 ]
               }

content/core/signup.json

@@ -14,7 +14,28 @@
       "signup_card": {
         "title": "Register for Singularity app preview",
         "description": "With Singularity, we aim to revolutionize your data management experience with our comprehensive tool, adept at handling PiB scale data effortlessly. We're crafting an intuitive drag-and-drop interface. Stay updated and be among the first to know when the Singularity app launches in the upcoming months. Meanwhile, explore more on our website.",
-        "borderGradientAngle": "315deg"
+        "borderGradientAngle": "315deg",
+        "signup_form": {
+          "first_name": {
+            "placeholder": "First name"
+          },
+          "last_name": {
+            "placeholder": "Last name"
+          },
+          "email": {
+            "placeholder": "Email"
+          },
+          "org": {
+            "placeholder": "Organization"
+          },
+          "country": {
+            "options": [{"label":"Afghanistan","code":"AF"},{"label":"Albania","code":"AL"},{"label":"Algeria","code":"DZ"},{"label":"American Samoa","code":"AS"},{"label":"Andorra","code":"AD"},{"label":"Angola","code":"AO"},{"label":"Anguilla","code":"AI"},{"label":"Antarctica","code":"AQ"},{"label":"Antigua and Barbuda","code":"AG"},{"label":"Argentina","code":"AR"},{"label":"Armenia","code":"AM"},{"label":"Aruba","code":"AW"},{"label":"Australia","code":"AU"},{"label":"Austria","code":"AT"},{"label":"Azerbaijan","code":"AZ"},{"label":"Bahamas","code":"BS"},{"label":"Bahrain","code":"BH"},{"label":"Bangladesh","code":"BD"},{"label":"Barbados","code":"BB"},{"label":"Belarus","code":"BY"},{"label":"Belgium","code":"BE"},{"label":"Belize","code":"BZ"},{"label":"Benin","code":"BJ"},{"label":"Bermuda","code":"BM"},{"label":"Bhutan","code":"BT"},{"label":"Bolivia","code":"BO"},{"label":"Bonaire","code":"BQ"},{"label":"Bosnia and Herzegovina","code":"BA"},{"label":"Botswana","code":"BW"},{"label":"Bouvet Island","code":"BV"},{"label":"Brazil","code":"BR"},{"label":"British Indian Ocean Territory","code":"IO"},{"label":"British Virgin Islands","code":"VG"},{"label":"Brunei","code":"BN"},{"label":"Bulgaria","code":"BG"},{"label":"Burkina Faso","code":"BF"},{"label":"Burundi","code":"BI"},{"label":"Cambodia","code":"KH"},{"label":"Cameroon","code":"CM"},{"label":"Canada","code":"CA"},{"label":"Cape Verde","code":"CV"},{"label":"Cayman Islands","code":"KY"},{"label":"Central African Republic","code":"CF"},{"label":"Chad","code":"TD"},{"label":"Chile","code":"CL"},{"label":"China","code":"CN"},{"label":"Christmas Island","code":"CX"},{"label":"Cocos Islands","code":"CC"},{"label":"Colombia","code":"CO"},{"label":"Comoros","code":"KM"},{"label":"Congo DRC","code":"CG"},{"label":"Congo Republic","code":"CD"},{"label":"Cook Islands","code":"CK"},{"label":"Coral Sea Islands Territory","code":"AU"},{"label":"Costa Rica","code":"CR"},{"label":"Croatia","code":"HR"},{"label":"Cuba","code":"CU"},{"label":"Curaçao","code":"CW"},{"label":"Cyprus","code":"CY"},{"label":"Czech Republic","code":"CZ"},{"label":"Denmark","code":"DK"},{"label":"Djibouti","code":"DJ"},{"label":"Dominica","code":"DM"},{"label":"Dominican Republic","code":"DO"},{"label":"Timor-Leste","code":"TL"},{"label":"Ecuador","code":"EC"},{"label":"Egypt","code":"EG"},{"label":"El Salvador","code":"SV"},{"label":"Equatorial Guinea","code":"GQ"},{"label":"Eritrea","code":"ER"},{"label":"Estonia","code":"EE"},{"label":"Eswatini","code":"SZ"},{"label":"Ethiopia","code":"ET"},{"label":"Falkland Islands","code":"FK"},{"label":"Faroe Islands","code":"FO"},{"label":"Fiji Islands","code":"FJ"},{"label":"Finland","code":"FI"},{"label":"France","code":"FR"},{"label":"French Guiana","code":"GF"},{"label":"French Polynesia","code":"PF"},{"label":"French Southern Lands","code":"TF"},{"label":"Gabon","code":"GA"},{"label":"Gambia","code":"GM"},{"label":"Georgia","code":"GE"},{"label":"Germany","code":"DE"},{"label":"Ghana","code":"GH"},{"label":"Gibraltar","code":"GI"},{"label":"Greece","code":"GR"},{"label":"Greenland","code":"GL"},{"label":"Grenada","code":"GD"},{"label":"Guadeloupe","code":"GP"},{"label":"Guam","code":"GU"},{"label":"Guatemala","code":"GT"},{"label":"Guernsey","code":"GG"},{"label":"Guinea","code":"GN"},{"label":"Guinea-Bissau","code":"GW"},{"label":"Guyana","code":"GY"},{"label":"Haiti","code":"HT"},{"label":"Heard and McDonald Islands","code":"HM"},{"label":"Honduras","code":"HN"},{"label":"Hong Kong","code":"HK"},{"label":"Hungary","code":"HU"},{"label":"Iceland","code":"IS"},{"label":"India","code":"IN"},{"label":"Indonesia","code":"ID"},{"label":"Iran","code":"IR"},{"label":"Iraq","code":"IQ"},{"label":"Ireland","code":"IE"},{"label":"Isle of Man","code":"IM"},{"label":"Israel","code":"IL"},{"label":"Italy","code":"IT"},{"label":"Ivory Coast","code":"CI"},{"label":"Jamaica","code":"JM"},{"label":"Jan Mayen","code":"SJ"},{"label":"Japan","code":"JP"},{"label":"Jersey","code":"JE"},{"label":"Jordan","code":"JO"},{"label":"Kazakhstan","code":"KZ"},{"label":"Kenya","code":"KE"},{"label":"Kiribati","code":"KI"},{"label":"Kosovo","code":"XK"},{"label":"Kuwait","code":"KW"},{"label":"Kyrgyzstan","code":"KG"},{"label":"Laos","code":"LA"},{"label":"Latvia","code":"LV"},{"label":"Lebanon","code":"LB"},{"label":"Lesotho","code":"LS"},{"label":"Liberia","code":"LR"},{"label":"Libya","code":"LY"},{"label":"Liechtenstein","code":"LI"},{"label":"Lithuania","code":"LT"},{"label":"Luxembourg","code":"LU"},{"label":"Macau","code":"MO"},{"label":"Madagascar","code":"MG"},{"label":"Malawi","code":"MW"},{"label":"Malaysia","code":"MY"},{"label":"Maldives","code":"MV"},{"label":"Mali","code":"ML"},{"label":"Malta","code":"MT"},{"label":"Marshall Islands","code":"MH"},{"label":"Martinique","code":"MQ"},{"label":"Mauritania","code":"MR"},{"label":"Mauritius","code":"MU"},{"label":"Mayotte","code":"YT"},{"label":"Mexico","code":"MX"},{"label":"Micronesia","code":"FM"},{"label":"Moldova","code":"MD"},{"label":"Monaco","code":"MC"},{"label":"Mongolia","code":"MN"},{"label":"Montenegro","code":"ME"},{"label":"Montserrat","code":"MS"},{"label":"Morocco","code":"MA"},{"label":"Mozambique","code":"MZ"},{"label":"Myanmar","code":"MM"},{"label":"Namibia","code":"NA"},{"label":"Nauru","code":"NR"},{"label":"Navassa","code":"UM"},{"label":"Nepal","code":"NP"},{"label":"Netherlands","code":"NL"},{"label":"New Caledonia","code":"NC"},{"label":"New Zealand","code":"NZ"},{"label":"Nicaragua","code":"NI"},{"label":"Niger","code":"NE"},{"label":"Nigeria","code":"NG"},{"label":"Niue","code":"NU"},{"label":"Norfolk Island","code":"NF"},{"label":"North Korea","code":"KP"},{"label":"North Macedonia","code":"MK"},{"label":"Northern Marianas","code":"MP"},{"label":"Norway","code":"NO"},{"label":"Oman","code":"OM"},{"label":"Pakistan","code":"PK"},{"label":"Palau","code":"PW"},{"label":"Palestinian Authority","code":"PS"},{"label":"Panama","code":"PA"},{"label":"Papua New Guinea","code":"PG"},{"label":"Paraguay","code":"PY"},{"label":"Peru","code":"PE"},{"label":"Philippines","code":"PH"},{"label":"Pitcairn Island","code":"PN"},{"label":"Poland","code":"PL"},{"label":"Portugal","code":"PT"},{"label":"Puerto Rico","code":"PR"},{"label":"Qatar","code":"QA"},{"label":"Reunion","code":"RE"},{"label":"Romania","code":"RO"},{"label":"Russia","code":"RU"},{"label":"Rwanda","code":"RW"},{"label":"Saba","code":"BQ"},{"label":"Saint Barthelemy","code":"BL"},{"label":"Saint Helena, Ascension, Tristan da Cunha","code":"SH"},{"label":"Saint Kitts and Nevis","code":"KN"},{"label":"Saint Lucia","code":"LC"},{"label":"Saint Martin","code":"MF"},{"label":"Saint Pierre and Miquelon","code":"PM"},{"label":"Saint Vincent and the Grenadines","code":"VC"},{"label":"Samoa","code":"WS"},{"label":"San Marino","code":"SM"},{"label":"Sao Tome and Principe","code":"ST"},{"label":"Saudi Arabia","code":"SA"},{"label":"Senegal","code":"SN"},{"label":"Serbia","code":"CS"},{"label":"Seychelles","code":"SC"},{"label":"Sierra Leone","code":"SL"},{"label":"Singapore","code":"SG"},{"label":"Sint Eustatius","code":"BQ"},{"label":"Sint Maarten","code":"SX"},{"label":"Slovakia","code":"SK"},{"label":"Slovenia","code":"SI"},{"label":"Solomon Islands","code":"SB"},{"label":"Somalia","code":"SO"},{"label":"South Africa","code":"ZA"},{"label":"South Georgia","code":"GS"},{"label":"South Korea","code":"KR"},{"label":"South Sudan","code":"SS"},{"label":"Spain","code":"ES"},{"label":"Sri Lanka","code":"LK"},{"label":"Sudan","code":"SD"},{"label":"Suriname","code":"SR"},{"label":"Svalbard","code":"SJ"},{"label":"Sweden","code":"SE"},{"label":"Switzerland","code":"CH"},{"label":"Syria","code":"SY"},{"label":"Taiwan","code":"TW"},{"label":"Tajikistan","code":"TJ"},{"label":"Tanzania","code":"TZ"},{"label":"Thailand","code":"TH"},{"label":"Togo","code":"TG"},{"label":"Tokelau","code":"TK"},{"label":"Tonga","code":"TO"},{"label":"Trinidad and Tobago","code":"TT"},{"label":"Tunisia","code":"TN"},{"label":"Turkey","code":"TR"},{"label":"Turkmenistan","code":"TM"},{"label":"Turks and Caicos Islands","code":"TC"},{"label":"Tuvalu","code":"TV"},{"label":"U.S. Minor Pacific Islands","code":"UM"},{"label":"U.S. Virgin Islands","code":"VI"},{"label":"Uganda","code":"UG"},{"label":"Ukraine","code":"UA"},{"label":"United Arab Emirates","code":"AE"},{"label":"United Kingdom","code":"GB"},{"label":"United States","code":"US"},{"label":"Uruguay","code":"UY"},{"label":"Uzbekistan","code":"UZ"},{"label":"Vanuatu","code":"VU"},{"label":"Vatican City","code":"VA"},{"label":"Venezuela","code":"VE"},{"label":"Vietnam","code":"VN"},{"label":"Wallis and Futuna","code":"WF"},{"label":"Western Sahara","code":"EH"},{"label":"Yemen","code":"YE"},{"label":"Zambia","code":"ZM"},{"label":"Zimbabwe","code":"ZW"}]
+          },
+          "filecoin_familiarity": {
+            "label": "How familiar are you with Filecoin?",
+            "options": ["New to Filecoin", "Some experience with Filecoin", "A lot of experience with Filecoin"]
+          }
+        }
       }
     }
   ]

pages/signup.vue

@@ -25,9 +25,6 @@ const content = computed(() => {
   return signup.page_content[0]
 })
 
-// eslint-disable-next-line no-console
-console.log('content ', content)
-
 </script>
 
 <style lang="scss" scoped>