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/case_story_detail.tsx
import React, { useContext, useState } from 'react'
import { CaseStoryCard } from './case_stories';
import { ProductType } from '@/types/ProductType';
import { StoryType } from '@/types/StoryType';
import { ScreenContext } from '@/contexts/ScreenContext';
import { MODALS, ModalsContext } from '@/Layouts/ModalsContext';
import { Link, useForm } from '@inertiajs/react';
import Layout from '@/Layouts/Layout';
import Img from '@/Components/Image';
import ResponsiveImage from '@/Components/ResponsiveImage';
import Icon from '@/Components/Icon';
import Button from '@/Components/Buttons/Button';
import Form from '@/Components/Forms/Form';
import TextField from '@/Components/Forms/TextField';
import Checkbox from '@/Components/Forms/Checkbox';
import SubscribeComponent from '@/Components/SubscribeComponent';

interface Props {
    case_story: StoryType,
    case_stories: Array<StoryType>
}

function Case_story_detail(props: Props) {
    const { case_story, case_stories } = props
    const { isMobile, setLocale, locale, t } = useContext(ScreenContext);
    const { open } = useContext(ModalsContext)
    const form = useForm({});
    const { data, post, reset } = form;


    const [clicked, setClicked] = useState(false)

    const submit = (e) => {
        e.preventDefault();
        post(route('contact-newsletter'), {
            preserveScroll: true,
            preserveState: true,
            onSuccess: (res) => { reset(); console.log("Newsletter success", res) }
        })
    }

    function videoId(url) {
        if (url) {
            return url.split('=')[1]
        }
        else {
            return null
        }
    }

    return (
        <Layout SEO={case_story?.SEO} fixed >
            <div className="pt-85px mobile:pt-24px">
                <div className="py-85px mobile:px-0 px-160px border-b border-lightGray">
                    
                    <h1 className="text-h32 mobile:mx-16px font-semibold">{case_story.headline}</h1>
                    <div className="font-semibold mobile:mx-16px text-18 mt-24px">{case_story.sub}</div>
                    <div className="w-full mobile:flex-col flex mt-85px mobile:mt-40px">
                        <div className="w-full">
                            <Img src={case_story.headline_img} alt="headline img" />
                        </div>
                        <div className="w-full flex items-center justify-center flex-col">
                            <div className=" pl-110px mobile:px-16px mobile:mt-24px">
                                <div className="text-24 font-semibold mb-24px">{t("About the Company")}</div>
                                <div>{case_story.about}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="flex  flex-col ">
                    <div className="mobile:px-16px px-300px w-full py-85px mobile:py-24px border-lightGray">
                        <div className="mobile:pr-0 ">
                            <div className="text-24 font-semibold mb-24px">{t("The Challenge")}</div>
                            <div>{case_story.challenge}</div>
                        </div>
                    </div>
                    <div className="mobile:px-16px px-300px w-full py-85px mobile:py-24px border-t border-lightGray">
                        <div className="mobile:pl-0 ">
                            <div className="text-24 font-semibold mb-24px">{t("The Solution")}</div>
                            <div>{case_story.solution}</div>
                        </div>
                    </div>
                </div>
                <div className="w-full mobile:px-0 px-160px pb-85px mobile:pb-40px">
                    {case_story?.video_url ?
                        <div className="w-full h-300px md:h-550px relative cursor-pointer" onClick={() => setClicked(true)}>
                            {clicked &&
                                <iframe width="100%" height="100%" className="absolute top-0 left-0 bottom-0 right-0" src={`https://www.youtube.com/embed/${videoId(case_story.video_url)}?autoplay=1`} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
                            }
                            {!clicked &&
                                <>
                                    <ResponsiveImage src={case_story?.thumbnail} layout="fill" objectFit="cover" />
                                    <div className="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center">
                                        <div className="bg-lightBlue text-center hover:bg-darkBrandColor cursor-pointer text-white text-16 px-24px h-55px flex items-center">
                                            <Icon name="play" />
                                            <div className="ml-16px">{t('Play video')}</div>
                                        </div>
                                    </div>
                                </>
                            }

                        </div>
                        :
                        <Img className="mx-auto w-full" src={case_story?.thumbnail} alt="main img" />
                    }


                    {/* <div className="w-85px h-85px bg-darkBrandColor rounded-full hidden mobile:block mx-auto mt-48px"></div> */}
                    {case_story?.quote &&
                        <>
                            <div className="mt-60px mobile:mt-24px text-center mobile:mx-16px">{case_story.quote}</div>
                            <div className="my-24px w-80px h-1px bg-lightGray mx-auto"></div>
                            <div className="flex w-full justify-center mobile:flex-col">
                                <div className="mx-auto flex items-center">
                                    {/* <div className="w-85px h-85px bg-darkBrandColor rounded-full mobile:hidden">
                                <Img className="w-85px h-85px rounded-full mobile:hidden" src={`/storage/${case_story.leader}`} alt="leader img" />
                            </div> */}
                                    <div className="/ml-24px text-center mobile:ml-0">
                                        <div className="font-bold">{case_story.leader_name}</div>
                                        <div>{case_story.leader_position}</div>
                                    </div>
                                </div>
                            </div>
                        </>
                    }

                </div>
                <div className="w-full bg-pink px-160px flex py-85px mobile:py-24px mobile:flex-col mobile:px-16px">
                    <div className="w-full border-r mobile:border-r-0 mobile:border-b border-darkBrandColor mobile:pb-40px">
                        <div className="font-semibold text-24 mb-24px">{t("Challenges Solved")}</div>
                        {


                            Object?.values(case_story.challenges).map((value) =>

                                <div className="flex items-center mb-8px ">
                                    <img src="/assets/icons/tick_sm.svg" alt='tick' />
                                    <div className="ml-22px ">{value.text}</div>
                                </div>
                            )

                        }
                    </div>
                    <div className="w-full">
                        <div className="mobile:pl-0 pl-110px mobile:mt-40px">
                            <div className="font-semibold text-24 mb-24px">{t("Key Value Drivers")}</div>
                            {


                                Object?.values(case_story.key_values).map((value) =>

                                    <div className="flex items-center mb-8px">
                                        <img src="/assets/icons/tick_sm.svg" alt='tick' />
                                        <div className="ml-22px ">{value.text}</div>
                                    </div>
                                )

                            }
                        </div>
                    </div>
                </div>
                {
                    case_story.similar_cases &&
                    <div className="px-160px py-85px border-b mobile:px-0 mobile:py-24px border-lightGray">
                        <div className="font-semibold text-24 mx-auto text-center mb-32px">{t("Similar cases")}</div>
                        <div className="grid grid-cols-2">
                            {

                                case_story.similar_cases.map((s) =>
                                    case_stories.filter((cs) => cs.id == s).map((c) =>
                                        <CaseStoryCard text={c.card_text} field={c.field} logo={c.logo} headline={c.card_headline} slug={c.slug} />
                                    )
                                )
                            }
                        </div>
                    </div>
                }
                {/* <div className="px-160px py-85px border-b mobile:px-0 mobile:py-24px border-lightGray">
                    <div className="font-semibold text-24 mx-auto text-center mb-32px">Similar cases</div>
                    <div className="flex mobile:flex-col gap-32px">
                        <div className="flex border border-lightGray mobile:border-t-0 mobile:border-l-0 mobile:border-r-0 w-full mobile:flex-col-reverse">
                            <div className="border-r border-lightGray pl-24px py-24px mobile:pr-24px">
                                <div className="flex">
                                    <div className="bg-lightBlue px-12px py-8px text-white">Aeronautics</div>
                                </div>
                                <div className="text-18 font-semibold mt-8px mb-8px">Tesla Motors Inc.</div>
                                <div>SpaceX uses our cobots for screw-driving in space</div>
                                <Button reverse className="mt-16px mobile:w-full" href="/noJS">View the case</Button>
                            </div>
                            <div className="flex items-center justify-center p-24px">
                                <Icon className="w-200px" name="spacex" />
                            </div>
                        </div>
                        <div className="flex mobile:flex-col-reverse border border-lightGray mobile:border-t-0 mobile:border-l-0 mobile:border-r-0 w-full">
                            <div className="border-r border-lightGray pl-24px py-24px mobile:pr-24px">
                                <div className="flex">
                                    <div className="bg-lightBlue px-12px py-8px text-white">Aeronautics</div>
                                </div>
                                <div className="text-18 font-semibold mt-8px mb-8px">Tesla Motors Inc.</div>
                                <div>SpaceX uses our cobots for screw-driving in space</div>
                                <Button reverse className="mt-16px mobile:w-full" href="/noJS">View the case</Button>
                            </div>
                            <div className="flex items-center justify-center p-24px">
                                <Icon className="w-200px" name="spacex" />
                            </div>
                        </div>
                    </div>
                    <div className="flex justify-center flex-col mt-32px items-center text-cente">
                        <div>Showing 12 of 36</div>
                        <div className="mt-24px">
                            <Button href="/noJS">Discover all case stories</Button>
                        </div>
                    </div>
                </div> */}
                {/* <div className="pt-45px px-160px mobile:px-16px">
                    <div className="grid grid-cols-5 mobile:grid-cols-3">
                        <div className="mobile:hidden">
                            <Icon name="placeholder" />
                            <Icon className="ml-85px w-30px" name="placeholder" />
                            <Icon className="ml-30px w-20px" name="placeholder" />
                        </div>
                        <div className="col-span-3 flex flex-col justify-center text-center mb-85px mobile:mb-24px">
                            <div className="text-24 font-semibold">Are you interested in the return of your investment?</div>
                            <div className="my-24px">Every investment needs to provide a solid return. Calculate your return on 
investment on the collaborative screwdriver products with our simple ROI 
calculator.</div>
                            <div className="">
                                <Button reverse className="mx-auto" href="/noJS">Get started</Button>
                            </div>
                            <div className="flex items-center mx-auto mt-24px">
                                <Icon className="w-24px h-24px" name="info" />
                                <div className="text-14 ml-16px">{t("Without any obligation to provide your e-mail adress.")}</div>
                            </div>
                        </div>
                        <div className="flex justify-end mobile:hidden">
                            <div className="flex flex-col justify-end items-end">
                                <Icon className="w-20px mr-30px" name="placeholder" />
                                <Icon className="mr-85px w-30px" name="placeholder" />
                                <Icon name="placeholder" />
                            </div>
                        </div>
                    </div>
                </div> */}
                <div className=" flex justify-center">
                    <div className="flex w-full  mobile:flex-col">
                        <div className="w-full mobile:pl-0 pl-160px mobile:py-0 py-60px background-half">
                            <Img className="w-full object-cover min-h-1/2vh" src="/assets/img/fotorameno.png" alt="robotic arm" />
                        </div>
                        <div className="w-full mobile:pr-0 pr-160px mobile:py-0 py-60px">
                            <div className="bg-darkBrandColor w-full h-full flex justify-center items-center text-white">
                                <div className="w-2/3 mobile:w-full mobile:flex mobile:flex-col mobile:px-16px mobile:py-24px">
                                    <div className="text-24 font-semibold mobile:text-center">{t("Ready to increase profit margins and production quality?")}</div>
                                    <Button reverse className="mx-auto mobile:w-full my-24px bg-white" onClick={(e) => { e.preventDefault(); open(MODALS.QUOTE) }} href="#">{t("Get a Quote")}</Button>
                                    <div className="flex items-center">
                                        <Icon className="w-24px h-24px" name="info" />
                                        <div className="text-14 ml-16px">{t("Need more info? Just ")}<Link href="/demo"><span className="underline font-medium">{t("Book a Live Demo.")}</span></Link></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="flex mobile:flex-col ">
                    <div className="bg-pink w-full mobile:px-16px pl-160px  mobile:pt-24px pt-30px overflow-y-hidden">
                        <div className="w-5/6 mobile:w-full grid">
                            <div className="w-full pr-30px mobile:w-full mobile:flex mobile:flex-col row-start-1 col-start-1">
                                <div className="text-24 mb-24px font-semibold mobile:text-center">{t("Are you interested in the return of your investment?")}</div>
                                <div className="text-16 mb-16px text-center nMob:text-left">
                                    {t("Every investment needs to provide a solid return. Calculate your return on investment on the collaborative screwdriver products with our simple ROI calculator.")}
                                </div>
                                <Button reverse className="mx-auto mobile:w-full bg-pink border-black text-black hover:text-black hover:border-black" onClick={(e) => { e.preventDefault(); }} href={route('calculator')}>{t("Get started")}</Button>
                                <div className="flex items-center text-darkBrandColor my-24px">
                                    <Icon className="w-24px h-24px" name="info" />
                                    <div className="text-14 ml-16px">{t('Without any obligation to provide your e-mail adress.')}</div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <SubscribeComponent />
                </div>
            </div>
        </Layout>
    )
}

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