403WebShell

403Webshell
Server IP : 45.32.152.128 / Your IP : 216.73.216.91
Web Server : nginx/1.24.0
System : Linux stage-vultr 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64
User : forge ( 1000)
PHP Version : 8.2.14
Disable Function : NONE
MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON
Directory : /home/forge/spin-robotics.com/resources/js/Pages/
Upload File :
[ Back ]
Current File : /home/forge/spin-robotics.com/resources/js/Pages/career.tsx
import Button from '@/Components/Buttons/Button'
import InvertedButton from '@/Components/Buttons/InvertedButton'
import Checkbox from '@/Components/Forms/Checkbox'
import FileInput from '@/Components/Forms/FileInput'
import Form from '@/Components/Forms/Form'
import Select from '@/Components/Forms/Select'
import Submit from '@/Components/Forms/Submit'
import TextField from '@/Components/Forms/TextField'
import Icon from '@/Components/Icon'
import Img from '@/Components/Image'
import Layout from '@/Layouts/Layout'
import { MODALS, ModalsContext } from '@/Layouts/ModalsContext'
import { ScreenContext } from '@/contexts/ScreenContext'
import { CareerType } from '@/types/Career'
import { DistributorType } from '@/types/DistributorType'
import { ProductType } from '@/types/ProductType'
import { useForm } from '@inertiajs/react'
import React, { useContext, useEffect, useState } from 'react'


interface QuestionProps {
    question: string
    answers: Array<{
        text: string
        name: string
        photo?: string
        role: string
    }>
}

function QuestionCarousel(props: QuestionProps) {
    const { question, answers } = props

    let [carIndex, setCarIndex] = useState(0)

    function previous() {
        if (carIndex == 0) {
            setCarIndex(answers.length - 1)
        } else {
            setCarIndex((p) => p - 1)
        }
    }

    function next() {
        if (carIndex == answers.length - 1) {
            setCarIndex(0)
        } else {
            setCarIndex((p) => p + 1)
        }
    }
    return (
        <div>
            <div className='font-bold'>{question}</div>
            <div className='mt-10px'>


                <div>
                    <div>{answers[carIndex]?.text}</div>
                    <div className='flex justify-between mt-10px items-center'>
                        <div className='flex gap-x-16px '>
                            {
                                answers[carIndex]?.photo ?
                                    <img className='w-55px h-55px rounded-full' src={`/assets/img/${answers[carIndex]?.photo}`} alt="Answer photo" />
                                    :
                                    <div className='w-55px h-55px bg-bege flex items-center justify-center rounded-full'>
                                        <Icon name="person" />
                                    </div>
                            }
                            <div>
                                <div>{answers[carIndex]?.name}</div>
                                <div className='text-12'>{answers[carIndex]?.role}</div>
                            </div>
                        </div>
                        <div className='flex '>
                            <div onClick={previous} className='w-55px h-55px flex items-center justify-center cursor-pointer'>
                                <Icon className={`transform rotate-180`} name="arrow-right" />
                            </div>
                            <div onClick={next} className='w-55px h-55px bg-darkBrandColor flex items-center justify-center text-white cursor-pointer'>
                                <Icon name="arrow-right" />
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    )
}


interface Props {
    
    distributors: Array<DistributorType>
    careers: Array<CareerType>
}

function Career(props: Props) {
    const { distributors, careers } = props
    const form = useForm({
        agree: true,
    });
    const { data, post, transform } = form;
    const { open } = useContext(ModalsContext)

    const submit = (e) => {
        e.preventDefault()
        console.log(data)
        transform((data) => ({ ...data, phone: data["code"] + data["phone"], code: undefined }))
        post(route("career"), {
            preserveScroll: true,
            preserveState: true,
            onSuccess: () => {
                open(MODALS.SUCCESS, true, {})
            }
        })
    }
    const { isMobile, setLocale, locale, t } = useContext(ScreenContext);


    let [showDetail, setShowDetail] = useState(null as unknown as number)

    useEffect(() => {
        careers.push({
            id: 0,
            name: "Not listed",
            obligation: "not important",
            description: "not important",
            sub: "sub",
            slug: "slug",
            show: false,
        })
    }, [])


    return (
        <Layout fixed >
            <div className="flex border-b border-lightGray mobile:flex-col pt-40px mobile:pt-85px">
                <div className="w-full flex items-center">
                    <div className="ml-160px mr-110px mobile:ml-16px mobile:mr-16px">
                        
                        <h1 className="font-extrabold text-h32 mb-24px">{t("Build the future of assembly with us")}</h1>
                        <h2>{t("Join Spin Robotics, a Danish robotics company dedicated to expanding the robotics market with end-of-arm-tooling (EOAT) for assembly tasks. You will be part of a diverse, international team of dedicated employees and an informal work environment making our growth journey as fun as possible.")}</h2>
                        <Button className="mt-16px mobile:mb-24px mobile:w-full" href="#positions">{t("See open positions")}</Button>
                    </div>
                </div>
                <div className="w-full">
                    <Img className="w-full object-cover" src="/assets/img/careers-main-img.png" alt='Career' />
                </div>
            </div>
            <div className="px-160px mobile:px-16px mt-85px pb-85px border-b border-lightGray mobile:border-b-0 mobile:mt-24px">
                <h2 className="text-24 font-semibold mb-48px">{t("What people love about working at Spin Robotics?")}</h2>
                <div className="grid grid-cols-2 mobile:grid-cols-1 gap-x-125px gap-y-32px mobile:gap-32px">
                    <div className="mobile:border-b border-lightGray mobile:pb-24px">
                        <h3 className="mb-16px text-18 font-semibold mobile:hidden">{t("Courage")}</h3>
                        <div className="flex mobile:flex-col">
                            <div>
                                <Icon className="mobile:mx-auto w-63px" name="freedom" />
                                <div className="mb-16px text-18 font-semibold nMob:hidden text-center mobile:mt-32px mobile:mb-16px">{t("Courage")}</div>
                            </div>
                            <div className="ml-32px mobile:ml-0 mobile:text-center">{t("The robotics industry is constantly changing and working in the ever-changing environment encourages us to strive for the best collaborative screwdriving solutions.")}</div>
                        </div>
                    </div>
                    <div className="mobile:border-b border-lightGray mobile:pb-24px">
                        <h3 className="mb-16px text-18 font-semibold mobile:hidden">{t("Passion")}</h3>
                        <div className="flex mobile:flex-col">
                            <div>
                                <Icon className="mobile:mx-auto w-63px" name="passion" />
                                <div className="mb-16px text-18 font-semibold nMob:hidden text-center mobile:mt-32px mobile:mb-16px">{t("Passion")}</div>
                            </div>
                            <div className="ml-32px mobile:ml-0 mobile:text-center">{t("We are all united through our passion for innovation. We believe that the world can be a better place with people and cobots working side by side.")}</div>
                        </div>
                    </div>
                    <div className="mobile:border-b border-lightGray mobile:pb-24px">
                        <h3 className="mb-16px text-18 font-semibold mobile:hidden">{t("Open communication")}</h3>
                        <div className="flex mobile:flex-col">
                            <div>
                                <Icon className="mobile:mx-auto w-63px" name="group" />
                                <div className="mb-16px text-18 font-semibold nMob:hidden text-center mobile:mt-32px mobile:mb-16px">{t("Open communication")}</div>
                            </div>
                            <div className="ml-32px mobile:ml-0 mobile:text-center">{t("Our work environment meets everyone on the same eye level. We believe in individual freedom as a part of the journey")}</div>
                        </div>
                    </div>
                    <div className="mobile:border-b border-lightGray mobile:pb-24px">
                        <h3 className="mb-16px text-18 font-semibold mobile:hidden">{t("Team Spirit")}</h3>
                        <div className="flex mobile:flex-col">
                            <div>
                                <Icon className="mobile:mx-auto w-63px" name="communication" />
                                <div className="mb-16px text-18 font-semibold nMob:hidden text-center mobile:mt-32px mobile:mb-16px">{t("Team Spirit")}</div>
                            </div>
                            <div className="ml-32px mobile:ml-0 mobile:text-center">{t("We are a group of individuals with diverse backgrounds making up for a great team full of creativity, individuality, and support.")}</div>
                        </div>
                    </div>

                </div>
            </div>
            <div id='positions' className="px-160px mobile:px-0 ">
                <div className="transform translate-y-110px mobile:-mt-200px">
                    <div className="flex mobile:flex-col-reverse mb-40px">
                        <div className="w-full flex items-center">
                            <div className="mr-110px mobile:mr-0 mobile:px-16px">
                                <h3 className="font-semibold text-24 mb-24px mobile:mt-24px">{t("Open Positions")}</h3>
                                <div>{t("Ready to start a career at Spin Robotics? Check Open positions below or send us an unsolicited application.")}</div>
                            </div>
                        </div>
                        <div className="w-full ">
                            <Img className="w-full object-cover" src="/assets/img/ficak-placeholder.png" alt='Ficak' />
                        </div>
                    </div>
                    {
                        careers.length > 0 &&
                        careers?.filter((c) => c.show == true)?.map((c) =>
                            <div className="border border-lightGray p-24px bg-white mobile:mx-16px mb-32px">
                                <div className="py-8px px-12px bg-lightBlue text-white inline-block">{c.obligation}</div>
                                <div className="mt-20px mb-8px font-semibold text-18">{c.name}</div>
                                {

                                    <div className='font-bold mb-8px'>{c.sub}</div>
                                }
                                <div className={`mb-16px markdown-body ${showDetail == c.id ? "h-full" : "h-70px overflow-hidden"}`} dangerouslySetInnerHTML={{ __html: c.description }}></div>
                                {
                                    (showDetail != c.id) &&
                                    <InvertedButton onClick={(e) => { e.preventDefault(); setShowDetail(c.id) }} color="darkBrandColor" className="text-darkBrandColor border-darkBrandColor" href="#">{t("Read detail")}</InvertedButton>
                                }

                                {
                                    (showDetail == c.id) &&
                                    <InvertedButton onClick={(e) => { e.preventDefault(); setShowDetail(null as unknown as number) }} color="darkBrandColor" className="text-darkBrandColor border-darkBrandColor" href="#">{t("Hide detail")}</InvertedButton>
                                }
                            </div>
                        )
                    }
                    {/* <div className="border border-lightGray p-24px bg-white mobile:mx-16px">
                        <div className="py-8px px-12px bg-lightBlue text-white inline-block">FULL - TIME</div>
                        <div className="mt-20px mb-8px font-semibold text-18">Project Manager</div>
                        <div className="mb-16px">Maecenas sollicitudin. Suspendisse sagittis ultrices augue. Nunc tincidunt ante vitae massa. Aliquam ornare wisi eu metus.</div>
                        <InvertedButton color="darkBrandColor" className="text-darkBrandColor border-darkBrandColor" href="#">Read detail</InvertedButton>
                    </div>
                    <div className="border border-lightGray p-24px mt-32px bg-white mobile:mx-16px">
                        <div className="py-8px px-12px  inline-block"></div>
                        <div className="mt-20px mb-8px font-semibold text-18">Project Manager</div>
                        <div className="mb-16px">Maecenas sollicitudin. Suspendisse sagittis ultrices augue. Nunc tincidunt ante vitae massa. Aliquam ornare wisi eu metus.</div>
                        <InvertedButton color="darkBrandColor" className="text-darkBrandColor border-darkBrandColor" href="#">Read detail</InvertedButton>
                    </div> */}
                </div>
            </div>
            <div className="pt-187px pb-340px mobile:pb-48px mobile:pt-130px bg-pink">
                <h4 className="font-semibold text-18 text-center w-1/2 mobile:w-full mx-auto mb-8px">{t("Did not you find the position you were looking for?")}</h4>
                <div className="text-center w-1/2 mobile:w-full mx-auto">{t("If you believe you could create great value for our customers, please leave us a message on")} <a className='underline' href="mailto:work@spin-robotics.com">work@spin-robotics.com</a></div>
            </div>
            <div className="px-160px mobile:px-0 flex mobile:flex-col transform -translate-y-50% mobile:translate-y-0">
                <div className="w-full">
                    <Img className="object-cover w-full h-450px mobile:h-250px" src="/assets/img/child-with-robot.png" alt="Child with robot" />
                </div>
                <div className="w-full flex justify-center items-center bg-darkBrandColor text-white mobile:px-16px mobile:py-24px">
                    <div className="w-1/2 mobile:w-full">
                        <h4 className="font-semibold text-24 mobile:text-center">{t("We envision the future where humans work alongside robots")}</h4>
                        <div className="mt-16px mb-24px">{t("The world of robotics is constantly changing, and we’re always thinking about how to improve the future of assembly. Do you want to be a part of our exciting journey?")}</div>
                        <Button className="mobile:w-full bg-white" reverse href={route('about_us')}>{t("Discover our mission")}</Button>
                    </div>
                </div>
            </div>
            <div className="px-160px mobile:px-16px flex mobile:flex-col transform -translate-y-85px mobile:translate-y-0">
                <Form className="w-full mobile:mt-24px" form={form} onSubmit={submit}>
                    <div className="mr-125px mobile:mr-0">
                        <h3 className="font-extrabold text-h32 mb-24px">{t("Let’s create the future of assembly together")}</h3>
                        <TextField name="name" placeholder={t("Your Name")} label={(<span>{t("Full Name")} <span className="text-red">*</span></span>)} />
                        <TextField label={(<span>{t("Email")} <span className="text-red">*</span></span>)} name="email" placeholder="your@email.com" />
                        <div className="flex items-end mt-12px">
                            {/* <Select 
                                name="code"
                                placeholder="+44 🇬🇧"
                                label={(<span>Phone <span className="text-red">*</span></span>)}
                                containerClassName="mr-12px"
                                options={selectOptions}
                            /> */}
                            <TextField wraperClassName="max-w-125px" label={(<span>{t("Phone")} <span className="text-red">*</span></span>)} name="code" placeholder="+000" />
                            <div className="w-20px h-2px"></div>
                            <TextField className="" name="phone" placeholder={t("your phone number")} />
                        </div>

                        <TextField name="linked_in" placeholder={t("Link to your LinkedIn profile")}label={(<span>{t("Your LinkedIn")} <span className="text-red">*</span></span>)} />
                        <Select
                            name="position"
                            placeholder={t("Choose a Position")}
                            label={(<span>{t("Position")}<span className="text-red">*</span></span>)}
                            defaultValue={t("Not listed")}
                            options={
                                careers?.map(c => ({ text: c.name, value: c.name }))
                            }
                        />
                        <FileInput name="cv_file" label={t("We would love to read your CV")} />
                        {/* <Checkbox name="consent" label="I consent to the communication of my personal information to a local partner of Spin Robotics to an extent necessary to respond to my request" /> */}
                        {/* <Checkbox name="agree" label={<span>I agree with the <span className="underline font-medium">Terms & Conditions and GDPR </span></span>} /> */}

                        <div className='text-darkBrandColor my-12px'>{t("By clicking Send, you agree with")} <a target="_blank" href={route("gdpr")} className='underline'>{t("Terms & Conditions and Processing of Personal Data")}</a></div>
                        <Checkbox name="newsletter" label={t("Subscribe to Newsletter")}/>
                        <Submit value={t("Submit")} className="mobile:w-full mt-24px" />
                        {/* <div className='text-white mt-12px'>{t("By clicking Send, you agree with")} <a target="_blank" href={route("gdpr")} className='underline'>{t("Terms & Conditions and Processing of Personal Data")}</a></div> */}
                    </div>

                </Form>
                <div className="w-full flex flex-col justify-center gap-y-48px mobile:py-24px">
                    {/* <TSlideContainer defaultOpen titleStyles="font-bold" containerStyles="border border-darkBrandColor p-16px rounded-sm mt-10px" title="Aenean vel massa quis?">
                        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ipsum. Curabitur vitae diam non enim vestibulum interdum. Morbi scelerisque luctus velit. Suspendisse sagittis ultrices augue.</div>
                    </TSlideContainer>
                    <TSlideContainer defaultOpen titleStyles="font-bold" containerStyles="border border-darkBrandColor p-16px rounded-sm mt-16px" title="Aenean vel massa quis?">
                        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ipsum. Curabitur vitae diam non enim vestibulum interdum. Morbi scelerisque luctus velit. Suspendisse sagittis ultrices augue.</div>
                    </TSlideContainer>
                    <TSlideContainer defaultOpen titleStyles="font-bold" containerStyles="border border-darkBrandColor p-16px rounded-sm mt-16px" title="Aenean vel massa quis?">
                        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ipsum. Curabitur vitae diam non enim vestibulum interdum. Morbi scelerisque luctus velit. Suspendisse sagittis ultrices augue.</div>
                    </TSlideContainer> */}
                    <QuestionCarousel
                        question={t('What are your personal highlights from working at Spin Robotics?')}
                        answers={[
                            { name: "Sune Straarup Jensen", role: t("Firmware Engineer at Spin Robotics"), text: t("Being able to use my knowledge and expertise in code design and code quality to deliver software that has had immediate and noticeable effects on the team’s ability to develop software faster and with a higher degree of robustness and maintainability."), photo: "sune-rounded.png" },
                            { name: "Sune Straarup Jensen", role: t("Firmware Engineer at Spin Robotics"), text: t("Working with a dedicated team of engineers from various branches of engineering."), photo: "sune-rounded.png" },
                            { name: "Julian Petersen", role: t("Former software Intern and Student Helper at Spin Robotics"), text: t("My personal highlight was to be such a big part part of Spin Robotics and see how the product and the company grows."), photo: "julian-rounded.png" },
                            { name: "Alex Munk Jensen", role: t("Robot Engineer Intern and Student helper at Spin Robotics"), text: t("I’m able to work in development for things that actually make a difference."), photo: "alex-rounded.png" },
                            { name: "Darren Matthew Pedersen", role: t("Electronic Engineer Intern at Spin Robotics"), text: t("Everyone is very relaxed and approachable which creates a great working environment"), photo: "darren-rounded.png" }
                        ]}
                    />
                    <QuestionCarousel
                        question={t('What is the most valuable thing you have learned in your work?')}
                        answers={[
                            { name: "Alex Munk Jensen", role: t("Robot Engineer Intern and Student helper at Spin Robotics"), text: t("How good teamwork and good planning can help you do more than you thought you where able to."), photo: "alex-rounded.png" },
                            { name: "Sune Straarup Jensen", role: t("Firmware Engineer at Spin Robotics"), text: t("The importance and difficulty of balancing the wish for perfect technical solution to all problems and the need for delivering solutions quickly to the end customer. The ability to choose compromises, which do not impact the agility and effectiveness of future development negatively, is a very important and difficult skill."), photo: "sune-rounded.png" },
                            { name: "Julian Petersen", role: t("Former software Intern and Student Helper at Spin Robotics"), text: t("The most valuable thing about working at Spin Robotics was to work professionally as a software developer in a start up, and later on see it grow into a bigger company with daily stand-up meetings, sprints and monthly meeting with every department of the company to share knowledge."), photo: "julian-rounded.png" },

                            { name: "Darren Matthew Pedersen", role: t("Electronic Engineer Intern at Spin Robotics"), text: t("Most valuable thing I learned is how much good communication really matters in the workplace."), photo: "darren-rounded.png" },
                        ]}
                    />
                    <QuestionCarousel
                        question={t('Why would you recommend others to apply at Spin Robotics?')}
                        answers={[
                            { name: "Julian Petersen", role: t("Former software Intern and Student Helper at Spin Robotics"), text: t("I would recommend it to other students, because it’s a place to learn new things and has freedom to develop not the quickest but the best solution possible. On top of it, interns/students are on equal footing from day one and participating in dailies and other meetings."), photo: "julian-rounded.png" },
                            { name: "Sune Straarup Jensen", role: t("Firmware Engineer at Spin Robotics"), text: t("At Spin Robotics you will have a great amount of influence and responsibility as to how work is done. You will have the opportunity to show your competences and improve on both products and workflow through your expertise. This is the place for you to work if you like to have a great deal of freedom and authority over your work, but also feel committed to learn and improve your competences to deliver high quality solutions."), photo: "sune-rounded.png" },

                            { name: "Alex Munk Jensen", role: t("Robot Engineer Intern and Student helper at Spin Robotics"), text: t("Because it’s a great work environment and we have amazing colleagues."), photo: "alex-rounded.png" },
                            { name: "Darren Matthew Pedersen", role: t("Electronic Engineer Intern at Spin Robotics"), text: t("I would recommend others to apply at Spin Robotics because the company is only getting bigger and better."), photo: "darren-rounded.png" },
                        ]}
                    />
                </div>
            </div>
        </Layout>
    )
}

export default Career
Youez - 2016 - github.com/yon3zu
LinuXploit