{"id":6,"date":"2026-03-08T02:59:29","date_gmt":"2026-03-08T02:59:29","guid":{"rendered":"https:\/\/sifoovideo.com\/?page_id=6"},"modified":"2026-03-09T03:27:12","modified_gmt":"2026-03-09T03:27:12","slug":"tisc-asessment","status":"publish","type":"page","link":"https:\/\/sifoovideo.com\/index.php\/tisc-asessment\/","title":{"rendered":"TISC Assesment"},"content":{"rendered":"\nimport React, { useState } from &#8216;react&#8217;;\nimport { ChevronRight, ChevronLeft, Check, Upload, Award, Target, Loader2, Sparkles } from &#8216;lucide-react&#8217;;\n\nconst StepWrapper = ({ children, title, subtitle }) => (\n  <div className=\"flex flex-col h-full animate-in fade-in slide-in-from-bottom-4 duration-500\">\n    <div className=\"mb-8 text-center\">\n      <h2 className=\"text-3xl font-bold text-[#c5a059] mb-2 uppercase tracking-tight\">{title}<\/h2>\n      {subtitle &#038;&#038; <p className=\"text-slate-300 text-sm md:text-base font-medium\">{subtitle}<\/p>}\n    <\/div>\n    <div className=\"flex-grow flex flex-col justify-center max-w-xl mx-auto w-full\">\n      {children}\n    <\/div>\n  <\/div>\n);\n\nconst App = () => {\n  const [step, setStep] = useState(0);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submitted, setSubmitted] = useState(false);\n  \n  const [formData, setFormData] = useState({\n    nama: &#8221;,\n    umur: &#8221;,\n    kerjaya: &#8221;,\n    industri: &#8221;,\n    pengalaman: &#8221;,\n    tujuan: [],\n    scales: {\n      confidence: 5,\n      clarity: 5,\n      influence: 5,\n      storytelling: 5,\n      publicSpeaking: 5,\n      emotionalRegulation: 5,\n      structuringThoughts: 5,\n      rapportBuilding: 5,\n      difficultConversations: 5,\n      selfImage: 5\n    },\n    diagnosis: {\n      cabaran: &#8221;,\n      struggle: &#8221;,\n      perubahan: &#8221;,\n      ketakutan: &#8221;\n    },\n    videoFile: null,\n    videoBase64: null,\n    videoMime: &#8221;\n  });\n\n  const goals = [\n    &#8220;Nak lebih yakin&#8221;, &#8220;Nak belajar influence&#8221;, &#8220;Nak improve public speaking&#8221;, \n    &#8220;Nak improve storytelling&#8221;, &#8220;Nak kurangkan rasa takut bercakap&#8221;, \n    &#8220;Nak jadi lebih charismatic&#8221;, &#8220;Nak jadi leader yang lebih berpengaruh&#8221;, \n    &#8220;Nak improve communication dalam bisnes\/kerjaya&#8221;\n  ];\n\n  const scaleQuestions = [\n    { key: &#8216;confidence&#8217;, label: &#8216;Confidence Level (Keyakinan)&#8217; },\n    { key: &#8216;clarity&#8217;, label: &#8216;Communication Clarity (Kejelasan idea)&#8217; },\n    { key: &#8216;influence&#8217;, label: &#8216;Influence Ability (Kebolehan mempengaruhi)&#8217; },\n    { key: &#8216;storytelling&#8217;, label: &#8216;Storytelling Skill&#8217; },\n    { key: &#8216;publicSpeaking&#8217;, label: &#8216;Public Speaking Skill&#8217; },\n    { key: &#8217;emotionalRegulation&#8217;, label: &#8216;Emotional Regulation (Takut\/Gugup)&#8217; },\n    { key: &#8216;structuringThoughts&#8217;, label: &#8216;Ability to Structure Thoughts&#8217; },\n    { key: &#8216;rapportBuilding&#8217;, label: &#8216;Rapport Building &#038; Connection&#8217; },\n    { key: &#8216;difficultConversations&#8217;, label: &#8216;Ability to Handle Difficult Conversations&#8217; },\n    { key: &#8216;selfImage&#8217;, label: &#8216;Self-Image as a Communicator (Identiti)&#8217; },\n  ];\n\n  const handleNext = () => setStep(s => s + 1);\n  const handleBack = () => setStep(s => s &#8211; 1);\n\n  const toggleGoal = (goal) => {\n    setFormData(prev => {\n      const newTujuan = prev.tujuan.includes(goal)\n        ? prev.tujuan.filter(t => t !== goal)\n        : prev.tujuan.length < 3 ? [...prev.tujuan, goal] : prev.tujuan;\n      return { ...prev, tujuan: newTujuan };\n    });\n  };\n\n  const handleVideoUpload = (e) => {\n    const file = e.target.files[0];\n    if (file) {\n      if (file.size > 25 * 1024 * 1024) {\n        alert(&#8220;Fail terlalu besar. Sila pastikan video bawah 25MB untuk kelancaran.&#8221;);\n        return;\n      }\n\n      const reader = new FileReader();\n      reader.onload = (event) => {\n        setFormData({\n          &#8230;formData,\n          videoFile: file,\n          videoBase64: event.target.result.split(&#8216;,&#8217;)[1],\n          videoMime: file.type\n        });\n      };\n      reader.readAsDataURL(file);\n    }\n  };\n\n  const handleSubmit = async () => {\n    if (!formData.nama || !formData.videoBase64) {\n      alert(&#8220;Sila pastikan Nama dan Video telah di-upload.&#8221;);\n      return;\n    }\n\n    setIsSubmitting(true);\n    \/\/ URL Web App dari Google Script anda\n    const GAS_URL = &#8220;https:\/\/script.google.com\/macros\/s\/AKfycbyTDbmhqZWgfQicoFhKZUtN6YFh0iqey5WCZ35bwOvwg77K6o_EVLWHzZhefr-WWxGU\/exec&#8221;; \n    \n    try {\n      await fetch(GAS_URL, {\n        method: &#8216;POST&#8217;,\n        mode: &#8216;no-cors&#8217;, \n        headers: { &#8216;Content-Type&#8217;: &#8216;application\/json&#8217; },\n        body: JSON.stringify(formData)\n      });\n      \n      \/\/ Memberi masa sedikit untuk proses di Drive\n      await new Promise(r => setTimeout(r, 5000));\n      setSubmitted(true);\n    } catch (error) {\n      console.error(error);\n      alert(&#8220;Ralat berlaku. Sila periksa sambungan internet atau URL Web App anda.&#8221;);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const progress = (step \/ 6) * 100;\n\n  if (submitted) {\n    return (\n      <div className=\"min-h-screen bg-[#0e3693] text-white flex items-center justify-center p-6\">\n        <div className=\"max-w-md w-full text-center space-y-6 animate-in zoom-in duration-500\">\n          <div className=\"w-24 h-24 bg-[#c5a059] rounded-full flex items-center justify-center mx-auto shadow-xl shadow-[#c5a059]\/20\">\n            <Check size={48} className=\"text-[#0e3693]\" \/>\n          <\/div>\n          <h1 className=\"text-3xl font-bold text-[#c5a059] uppercase tracking-tighter\">Assessment Berjaya!<\/h1>\n          <p className=\"text-slate-100 text-lg font-medium leading-relaxed\">Data anda telah selamat disimpan dalam sistem TIC. Sila tunggu maklum balas daripada pasukan kami.<\/p>\n          <button \n            onClick={() => window.location.reload()}\n            className=&#8221;bg-white text-[#0e3693] px-10 py-3 rounded-full hover:bg-[#c5a059] hover:text-white transition-all font-bold uppercase text-xs&#8221;\n          >\n            Hantar Borang Baru\n          <\/button>\n        <\/div>\n      <\/div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-screen bg-[#0e3693] text-white p-4 md:p-8 font-sans selection:bg-[#c5a059] selection:text-[#0e3693]\">\n      {\/* Header &#038; Progress Indicator *\/}\n      <div className=\"max-w-4xl mx-auto mb-8 md:mb-12\">\n        <div className=\"flex justify-between items-center mb-4\">\n          <div className=\"flex items-center gap-2\">\n             <Award className=\"text-[#c5a059]\" size={24} \/>\n             <span className=\"font-bold tracking-widest text-xs md:text-sm uppercase\">THE INFLUENTIAL CLUB<\/span>\n          <\/div>\n          <span className=\"text-xs text-[#c5a059] font-mono font-bold tracking-tighter\">{Math.round(progress)}% COMPLETED<\/span>\n        <\/div>\n        <div className=\"h-2 w-full bg-white\/20 rounded-full overflow-hidden\">\n          <div \n            className=\"h-full bg-[#c5a059] transition-all duration-700 ease-out shadow-[0_0_15px_#c5a059]\" \n            style={{ width: `${progress}%` }}\n          \/>\n        <\/div>\n      <\/div>\n\n      {\/* Form Container *\/}\n      <div className=\"max-w-2xl mx-auto bg-white\/5 border-2 border-[#c5a059] p-6 md:p-12 rounded-[2.5rem] shadow-2xl backdrop-blur-sm min-h-[550px] flex flex-col relative overflow-hidden\">\n        \n        {\/* Loading Overlay *\/}\n        {isSubmitting &#038;&#038; (\n          <div className=\"absolute inset-0 bg-[#0e3693]\/95 backdrop-blur-md z-50 flex flex-col items-center justify-center space-y-6\">\n            <Loader2 className=\"text-[#c5a059] animate-spin\" size={60} \/>\n            <div className=\"text-center px-6\">\n              <p className=\"text-[#c5a059] text-xl font-bold animate-pulse uppercase tracking-widest\">Menyambung ke Google Drive&#8230;<\/p>\n              <p className=\"text-white text-sm mt-2 font-mono italic\">Mohon jangan tutup paparan ini. Video anda sedang diproses.<\/p>\n            <\/div>\n          <\/div>\n        )}\n\n        {\/* Step 0: Welcome *\/}\n        {step === 0 &#038;&#038; (\n          <StepWrapper title=\"Welcome to TIC\" subtitle=\"6-Month Communication Transformation Assessment\">\n            <div className=\"text-center space-y-10\">\n              <div className=\"w-24 h-24 bg-white\/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-[#c5a059] text-[#c5a059] animate-pulse\">\n                <Target size={48} \/>\n              <\/div>\n              <p className=\"text-lg text-white font-medium leading-relaxed px-4\">Selamat datang, Communicator. Borang interaktif ini akan membantu kami memetakan potensi anda terus ke dalam pangkalan data TIC.<\/p>\n              <button \n                onClick={handleNext}\n                className=\"bg-[#c5a059] text-[#0e3693] px-12 py-5 rounded-full font-black text-sm uppercase tracking-[0.2em] hover:bg-white hover:text-[#0e3693] transition-all flex items-center gap-3 mx-auto group shadow-xl\"\n              >\n                Mula Sekarang <ChevronRight className=\"group-hover:translate-x-1 transition-transform\" \/>\n              <\/button>\n            <\/div>\n          <\/StepWrapper>\n        )}\n\n        {\/* Step 1: Info *\/}\n        {step === 1 &#038;&#038; (\n          <StepWrapper title=\"Maklumat Asas\" subtitle=\"Langkah pertama ke arah transformasi\">\n            <div className=\"space-y-6\">\n              <div className=\"relative group\">\n                <label className=\"text-[10px] text-[#c5a059] uppercase font-bold tracking-widest ml-1\">Nama Penuh<\/label>\n                <input \n                  className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 focus:bg-white\/15 focus:border-white outline-none transition-all text-xl rounded-t-lg\"\n                  placeholder=\"Taip nama penuh...\"\n                  value={formData.nama}\n                  onChange={e => setFormData({&#8230;formData, nama: e.target.value})}\n                \/>\n              <\/div>\n              <div className=\"flex gap-4\">\n                <div className=\"w-1\/3\">\n                  <label className=\"text-[10px] text-[#c5a059] uppercase font-bold tracking-widest ml-1\">Umur<\/label>\n                  <input \n                    className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 focus:bg-white\/15 focus:border-white outline-none transition-all text-xl rounded-t-lg\"\n                    placeholder=\"00\"\n                    type=\"number\"\n                    value={formData.umur}\n                    onChange={e => setFormData({&#8230;formData, umur: e.target.value})}\n                  \/>\n                <\/div>\n                <div className=\"w-2\/3\">\n                  <label className=\"text-[10px] text-[#c5a059] uppercase font-bold tracking-widest ml-1\">Kerjaya<\/label>\n                  <input \n                    className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 focus:bg-white\/15 focus:border-white outline-none transition-all text-xl rounded-t-lg\"\n                    placeholder=\"Jawatan \/ Sektor\"\n                    value={formData.kerjaya}\n                    onChange={e => setFormData({&#8230;formData, kerjaya: e.target.value})}\n                  \/>\n                <\/div>\n              <\/div>\n              <div>\n                <label className=\"text-[10px] text-[#c5a059] uppercase font-bold tracking-widest ml-1\">Industri<\/label>\n                <input \n                  className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 focus:bg-white\/15 focus:border-white outline-none transition-all text-xl rounded-t-lg\"\n                  placeholder=\"E.g. Perbankan, IT, Pendidikan\"\n                  value={formData.industri}\n                  onChange={e => setFormData({&#8230;formData, industri: e.target.value})}\n                \/>\n              <\/div>\n            <\/div>\n          <\/StepWrapper>\n        )}\n\n        {\/* Step 2: Matlamat *\/}\n        {step === 2 &#038;&#038; (\n          <StepWrapper title=\"Matlamat Anda\" subtitle=\"Pilih 3 matlamat utama yang ingin dicapai melalui TIC\">\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3 max-h-[350px] overflow-y-auto pr-2 custom-scrollbar\">\n              {goals.map(goal => (\n                <button\n                  key={goal}\n                  onClick={() => toggleGoal(goal)}\n                  className={`p-4 rounded-xl border-2 text-left text-xs font-bold transition-all flex items-center justify-between shadow-sm ${\n                    formData.tujuan.includes(goal) \n                    ? &#8216;border-white bg-[#c5a059] text-[#0e3693]&#8217; \n                    : &#8216;border-white\/10 bg-white\/5 hover:border-[#c5a059]\/50&#8217;\n                  }`}\n                >\n                  {goal}\n                  {formData.tujuan.includes(goal) &#038;&#038; <Check size={16} className=\"font-black\" \/>}\n                <\/button>\n              ))}\n            <\/div>\n          <\/StepWrapper>\n        )}\n\n        {\/* Step 3: Scales *\/}\n        {step === 3 &#038;&#038; (\n          <StepWrapper title=\"Self-Rated Scale\" subtitle=\"Rate diri anda dari 1 (Sangat Rendah) hingga 10 (Sangat Tinggi)\">\n             <div className=\"space-y-8 max-h-[400px] overflow-y-auto pr-4 custom-scrollbar text-white\">\n               {scaleQuestions.map(q => (\n                 <div key={q.key} className=\"space-y-3\">\n                   <div className=\"flex justify-between items-center\">\n                     <label className=\"text-sm font-bold text-white uppercase tracking-tight\">{q.label}<\/label>\n                     <span className=\"text-[#c5a059] font-black text-2xl\">{formData.scales[q.key]}\/10<\/span>\n                   <\/div>\n                   <input \n                    type=\"range\" min=\"1\" max=\"10\" \n                    className=\"w-full accent-[#c5a059] h-2 bg-white\/20 rounded-lg cursor-pointer transition-all\"\n                    value={formData.scales[q.key]}\n                    onChange={e => setFormData({\n                      &#8230;formData, \n                      scales: { &#8230;formData.scales, [q.key]: parseInt(e.target.value) }\n                    })}\n                   \/>\n                 <\/div>\n               ))}\n             <\/div>\n          <\/StepWrapper>\n        )}\n\n        {\/* Step 4: C. Self-Diagnosis *\/}\n        {step === 4 &#038;&#038; (\n          <StepWrapper title=\"C. Self-Diagnosis\" subtitle=\"Analisis jujur tentang situasi anda sekarang\">\n            <div className=\"space-y-5 max-h-[450px] overflow-y-auto pr-4 custom-scrollbar\">\n              <div className=\"space-y-2\">\n                <label className=\"text-[12px] text-[#c5a059] uppercase tracking-[0.2em] font-black ml-1\">Cabaran komunikasi terbesar?<\/label>\n                <textarea \n                  className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 rounded-t-lg focus:bg-white\/15 focus:border-white outline-none h-20 resize-none transition-all text-white font-medium\"\n                  value={formData.diagnosis.cabaran}\n                  onChange={e => setFormData({&#8230;formData, diagnosis: {&#8230;formData.diagnosis, cabaran: e.target.value}})}\n                  placeholder=&#8221;Ceritakan cabaran anda&#8230;&#8221;\n                \/>\n              <\/div>\n              <div className=\"space-y-2\">\n                <label className=\"text-[12px] text-[#c5a059] uppercase tracking-[0.2em] font-black ml-1\">Situasi paling struggle?<\/label>\n                <textarea \n                  className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 rounded-t-lg focus:bg-white\/15 focus:border-white outline-none h-20 resize-none transition-all text-white font-medium\"\n                  value={formData.diagnosis.struggle}\n                  onChange={e => setFormData({&#8230;formData, diagnosis: {&#8230;formData.diagnosis, struggle: e.target.value}})}\n                  placeholder=&#8221;E.g. Mesyuarat besar, depan CEO&#8230;&#8221;\n                \/>\n              <\/div>\n              <div className=\"space-y-2\">\n                <label className=\"text-[12px] text-[#c5a059] uppercase tracking-[0.2em] font-black ml-1 uppercase\">Ingin melihat perubahan dalam masa 6 bulan<\/label>\n                <textarea \n                  className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 rounded-t-lg focus:bg-white\/15 focus:border-white outline-none h-20 resize-none transition-all text-white font-medium\"\n                  value={formData.diagnosis.perubahan}\n                  onChange={e => setFormData({&#8230;formData, diagnosis: {&#8230;formData.diagnosis, perubahan: e.target.value}})}\n                  placeholder=&#8221;Nyatakan perubahan yang dikehendaki&#8230;&#8221;\n                \/>\n              <\/div>\n              <div className=\"space-y-2\">\n                <label className=\"text-[12px] text-[#c5a059] uppercase tracking-[0.2em] font-black ml-1\">Situasi paling ditakuti?<\/label>\n                <textarea \n                  className=\"w-full bg-white\/10 border-b-2 border-[#c5a059] p-4 rounded-t-lg focus:bg-white\/15 focus:border-white outline-none h-20 resize-none transition-all text-white font-medium\"\n                  value={formData.diagnosis.ketakutan}\n                  onChange={e => setFormData({&#8230;formData, diagnosis: {&#8230;formData.diagnosis, ketakutan: e.target.value}})}\n                  placeholder=&#8221;Apakah ketakutan terbesar anda?&#8221;\n                \/>\n              <\/div>\n            <\/div>\n          <\/StepWrapper>\n        )}\n\n        {\/* Step 5: Video Task *\/}\n        {step === 5 &#038;&#038; (\n          <StepWrapper title=\"Video Task\" subtitle=\"Langkah terakhir: Visual &#038; Vocal assessment\">\n            <div className=\"text-center space-y-6\">\n              <div className=\"p-10 border-2 border-dashed border-white\/30 rounded-[2rem] bg-white\/5 hover:border-[#c5a059] transition-all group cursor-pointer relative\">\n                <input \n                  type=\"file\" accept=\"video\/*\" \n                  className=\"absolute inset-0 opacity-0 cursor-pointer\"\n                  onChange={handleVideoUpload}\n                \/>\n                <div className=\"flex flex-col items-center gap-5\">\n                  <div className={`w-24 h-24 rounded-full flex items-center justify-center transition-all border-4 shadow-xl ${formData.videoFile ? 'bg-green-500\/20 border-green-500 scale-110' : 'bg-white border-[#c5a059] group-hover:scale-110'}`}>\n                    {formData.videoFile ? <Check className=\"text-green-500\" size={40} strokeWidth={3} \/> : <Upload className=\"text-[#0e3693]\" size={40} \/>}\n                  <\/div>\n                  <div>\n                    <p className=\"font-extrabold text-xl text-white uppercase tracking-tight\">{formData.videoFile ? formData.videoFile.name : &#8216;Muat Naik Video 1 Minit&#8217;}<\/p>\n                    <p className=\"text-white\/60 text-xs mt-1 uppercase tracking-widest font-bold italic\">Had saiz fail: 25MB<\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n              <div className=\"bg-[#c5a059]\/10 p-5 rounded-2xl flex items-start gap-4 text-left border border-[#c5a059]\/20 backdrop-blur-sm\">\n                <Sparkles size={24} className=\"text-[#c5a059] shrink-0 mt-1 animate-pulse\" \/>\n                <p className=\"text-xs text-white\/80 leading-relaxed font-medium\">Video ini sulit dan hanya diakses oleh trainer TIC untuk analisis tonasi suara, body language, dan struktur penyampaian anda.<\/p>\n              <\/div>\n            <\/div>\n          <\/StepWrapper>\n        )}\n\n        {\/* Step 6: Confirmation *\/}\n        {step === 6 &#038;&#038; (\n          <StepWrapper title=\"Submit Profile\" subtitle=\"Sedia untuk dihantar ke Google Drive TIC?\">\n            <div className=\"text-center space-y-10\">\n              <div className=\"flex flex-col items-center gap-3\">\n                <div className=\"w-24 h-24 bg-[#c5a059] rounded-full flex items-center justify-center shadow-2xl shadow-[#c5a059]\/30\">\n                  <Award size={48} className=\"text-[#0e3693]\" strokeWidth={2.5} \/>\n                <\/div>\n                <h3 className=\"text-2xl font-black uppercase tracking-tighter text-white\">Transformation Ready!<\/h3>\n              <\/div>\n              <div className=\"bg-white\/10 p-8 rounded-3xl text-left text-sm space-y-4 border border-white\/10 backdrop-blur-md shadow-inner\">\n                <div className=\"flex justify-between items-center border-b border-white\/10 pb-3\">\n                  <span className=\"text-white\/60 font-bold uppercase tracking-widest text-[10px]\">Nama Pelajar<\/span>\n                  <span className=\"text-white font-black text-lg\">{formData.nama || &#8216;Tiada&#8217;}<\/span>\n                <\/div>\n                <div className=\"flex justify-between items-center\">\n                  <span className=\"text-white\/60 font-bold uppercase tracking-widest text-[10px]\">Status Video<\/span>\n                  <span className={formData.videoFile ? \"text-green-400 font-black uppercase tracking-widest text-xs\" : \"text-red-400 font-black uppercase tracking-widest text-xs\"}>\n                    {formData.videoFile ? &#8216;READY TO SEND&#8217; : &#8216;VIDEO MISSING&#8217;}\n                  <\/span>\n                <\/div>\n              <\/div>\n              <button \n                disabled={isSubmitting}\n                className=\"w-full bg-white text-[#0e3693] py-5 rounded-[2rem] font-black text-xl hover:bg-[#c5a059] hover:text-white transition-all active:scale-95 disabled:opacity-50 uppercase tracking-[0.2em] shadow-2xl\"\n                onClick={handleSubmit}\n              >\n                HANTAR SEKARANG\n              <\/button>\n            <\/div>\n          <\/StepWrapper>\n        )}\n\n        {\/* Navigation *\/}\n        {step > 0 &#038;&#038; (\n          <div className=\"flex justify-between mt-auto pt-10 px-2\">\n            <button \n              disabled={isSubmitting}\n              onClick={handleBack}\n              className=\"flex items-center gap-2 text-white\/50 hover:text-white transition-colors font-black text-[10px] uppercase tracking-[0.3em] p-2\"\n            >\n              <ChevronLeft size={20} \/> Back\n            <\/button>\n            {step < 6 &#038;&#038; (\n              <button \n                onClick={handleNext}\n                className=\"flex items-center gap-2 bg-white text-[#0e3693] px-12 py-3 rounded-full hover:bg-[#c5a059] hover:text-white transition-all font-black text-[10px] uppercase tracking-[0.3em] shadow-xl\"\n              >\n                Next <ChevronRight size={20} \/>\n              <\/button>\n            )}\n          <\/div>\n        )}\n      <\/div>\n\n      <p className=\"text-center text-white\/40 text-[9px] mt-10 uppercase tracking-[0.5em] font-black\">\n        Proprietary Transformation System &copy; The Influential Club\n      <\/p>\n\n      <style>{`\n        .custom-scrollbar::-webkit-scrollbar { width: 5px; }\n        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }\n        .custom-scrollbar::-webkit-scrollbar-thumb { background: #c5a059; border-radius: 10px; }\n        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #f1c40f; }\n        input[type=\"range\"] {\n          -webkit-appearance: none;\n          width: 100%;\n          background: transparent;\n        }\n        input[type=\"range\"]::-webkit-slider-thumb {\n          -webkit-appearance: none;\n          height: 18px;\n          width: 18px;\n          border-radius: 50%;\n          background: #c5a059;\n          cursor: pointer;\n          margin-top: -8px;\n          box-shadow: 0 0 10px rgba(197, 160, 89, 0.5);\n        }\n        input[type=\"range\"]::-webkit-slider-runnable-track {\n          width: 100%;\n          height: 4px;\n          cursor: pointer;\n          background: rgba(255, 255, 255, 0.1);\n          border-radius: 2px;\n        }\n      `}<\/style>\n    <\/div>\n  );\n};\n\nexport default App;\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>import React, { useState } from &#8216;react&#8217;; import { ChevronRight, ChevronLeft, Check, Upload, Award, Target, Loader2, Sparkles } from &#8216;lucide-react&#8217;; const StepWrapper = ({ children, title, subtitle }) => ( {title} {subtitle &#038;&#038; {subtitle} } {children} ); const App = () => { const [step, setStep] = useState(0); const [isSubmitting, setIsSubmitting] = useState(false); const [submitted,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":7,"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/sifoovideo.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}