changes

src/components/pages/claim/hero/form.jsx

@@ -1,8 +1,8 @@
-import { getNames } from 'country-list';
-import moment from 'moment';
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useFormContext } from 'react-hook-form';
+import moment from 'moment';
+import { getNames } from 'country-list';
 
 import Input from '../../../shared/button/input';
 import Select from '../../../shared/button/select';
@@ -12,12 +12,13 @@ const Form = ({ info }) => {
     register,
     formState: { errors, isSubmitSuccessful },
   } = useFormContext();
+
   return (
     <>
       <div>
         Select Prizes to claim:
         {info.map((winner) => (
-          <div className="mt-2 flex">
+          <div className="mt-2 flex" key={winner.id}>
             <div>
               <input
                 disabled={isSubmitSuccessful}
@@ -69,8 +70,7 @@ const Form = ({ info }) => {
         placeHolder="+972"
         extra={{
           required: true,
-          pattern:
-            /\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{1,14}$/i,
+          pattern: /\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{1,14}$/i,
         }}
       />
       <Input
@@ -88,8 +88,10 @@ const Form = ({ info }) => {
       />
       <Select label="Country" name="shipping_country">
         <option value="">-- Choose Country --</option>
-        {getNames().map((c) => (
-          <option value={c}>{c}</option>
+        {getNames().map((c, index) => (
+          <option key={index} value={c}>
+            {c}
+          </option>
         ))}
       </Select>
       <Input extra={{ required: true }} label="State" type="text" name="shipping_state" />
@@ -105,9 +107,7 @@ const Form = ({ info }) => {
       <button
         type="submit"
         disabled={isSubmitSuccessful}
-        className={`${
-          isSubmitSuccessful && 'pointer-events-none opacity-50'
-        } cta-btn-animation relative flex max-w-full cursor-pointer items-center justify-center leading-none`}
+        className={`${isSubmitSuccessful ? 'pointer-events-none opacity-50' : ''} cta-btn-animation relative flex max-w-full cursor-pointer items-center justify-center leading-none`}
       >
         <svg
           className="cta-btn-animation-border xs:w-full"
@@ -128,7 +128,7 @@ const Form = ({ info }) => {
 };
 
 Form.propTypes = {
-  info: PropTypes.object,
+  info: PropTypes.array,
 };
 
 export default Form;

src/components/pages/no-win/hero/hero.jsx

@@ -1,24 +1,21 @@
-import Image from 'next/future/image';
 import React from 'react';
-
 import Socials from 'components/shared/socials';
-
 import bg from './images/bg.jpg';
 
-const title = '>>Oh no!';
+const title = '>> Oh no!';
 const description = (
   <p className="text-left">
-    You can't claim the Novu Swag, there might be a few problems:
+    You can't claim the Novu Swag due to a few potential problems:
     <br />
     <ul className="text-left">
-      <li>- You have already claimed your swag</li>
-      <li>- You have just joined the HackSquad system - you will have to wait 1 hour</li>
+      <li>- You may have already claimed your swag.</li>
+      <li>- If you've just joined the HackSquad system, you'll need to wait for 1 hour.</li>
       <li>
-        - You haven't contributed <strong>3 MERGED PRs</strong> to Novu
+        - You haven't contributed <strong>3 MERGED PRs</strong> to Novu.
       </li>
     </ul>
     <br />
-    If you think there is a problem here, please contact [email protected]
+    If you believe there's an issue, please contact [email protected].
   </p>
 );
 
@@ -33,13 +30,13 @@ const Hero = () => (
       <Socials className="absolute bottom-20 md:bottom-12" />
     </div>
 
-    <Image
+    <img
       className="absolute top-0 left-1/2 min-h-screen w-full min-w-[1920px] -translate-x-1/2 md:min-w-[1230px]"
       src={bg}
+      alt="Background"
+      loading="eager"
       width={1920}
       height={1080}
-      loading="eager"
-      alt=""
       priority
       aria-hidden
     />