Refactor Draft page layout to enhance content structure and user inte…

…raction; added support section with contact information.
fwedwicc · Jan 4, 2025 · 85db9b8 · 85db9b8
1 parent 967d1f3
commit 85db9b8
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/src/pages/Draft.jsx b/src/pages/Draft.jsx
@@ -100,11 +100,24 @@ const Draft = () => {
             </div>
           </div>
           {/* Right Content */}
-          <div className='lg:col-span-2 md:col-span-2 md:pl-0 md:pt-4 pt-0 p-4 col-span-1 border flex flex-col justify-between'>
-            {/* Main Content */}
-            <div className='border'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda accusamus, itaque dolorum corporis quod nam culpa at! Inventore illo quam aut distinctio debitis, molestias, fuga sit ipsam nobis sed dignissimos.</div>
-            {/* Footer */}
-            <div className='border'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda accusamus, itaque dolorum corporis quod nam culpa at! Inventore illo quam aut distinctio debitis, molestias, fuga sit ipsam nobis sed dignissimos.</div>
+          <div className='lg:col-span-2 md:col-span-2 md:pl-0 md:pt-4 pt-0 p-4 col-span-1'>
+            <div className='flex flex-col justify-between h-full border border-neutral-700/40 rounded-lg md:p-6 p-4'>
+              {/* Main Content */}
+              <div className='border'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda accusamus, itaque dolorum corporis quod nam culpa at! Inventore illo quam aut distinctio debitis, molestias, fuga sit ipsam nobis sed dignissimos.</div>
+              {/* Footer */}
+              <div className='space-y-1'>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-9 text-neutral-300">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M16.712 4.33a9.027 9.027 0 0 1 1.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 0 0-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 0 1 0 9.424m-4.138-5.976a3.736 3.736 0 0 0-.88-1.388 3.737 3.737 0 0 0-1.388-.88m2.268 2.268a3.765 3.765 0 0 1 0 2.528m-2.268-4.796a3.765 3.765 0 0 0-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 0 1-1.388.88m2.268-2.268 4.138 3.448m0 0a9.027 9.027 0 0 1-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0-3.448-4.138m3.448 4.138a9.014 9.014 0 0 1-9.424 0m5.976-4.138a3.765 3.765 0 0 1-2.528 0m0 0a3.736 3.736 0 0 1-1.388-.88 3.737 3.737 0 0 1-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 0 1-1.652-1.306 9.027 9.027 0 0 1-1.306-1.652m0 0 4.138-3.448M4.33 16.712a9.014 9.014 0 0 1 0-9.424m4.138 5.976a3.765 3.765 0 0 1 0-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 0 1 1.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 0 0-1.652 1.306A9.025 9.025 0 0 0 4.33 7.288" />
+                </svg>
+                <p className="leading-relaxed text-neutral-200">
+                  Having Trouble?
+                </p>
+                <p className="leading-6 py-2 text-neutral-400 w-full max-w-xs">
+                  Feel free to contact us and we will always help you through the process.
+                </p>
+                <a href="#" className='underline text-sm text-neutral-300'>Contact Us</a>
+              </div>
+            </div>
           </div>
         </div>
       </main>