From 3c97a401f8e3d9ff204f9b5e54acb531743829f0 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 8 Mar 2024 04:49:47 -0500
Subject: [PATCH] highlight video feature

---
 frontend/src/components/ImageUpload.tsx | 10 +++++++++-
 frontend/src/urls.ts                    |  4 ++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/urls.ts

diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx
index 520f595..f5f5fc7 100644
--- a/frontend/src/components/ImageUpload.tsx
+++ b/frontend/src/components/ImageUpload.tsx
@@ -3,6 +3,8 @@ import { useState, useEffect, useMemo } from "react";
 import { useDropzone } from "react-dropzone";
 // import { PromptImage } from "../../../types";
 import { toast } from "react-hot-toast";
+import { URLS } from "../urls";
+import { Badge } from "./ui/badge";
 
 const baseStyle = {
   flex: 1,
@@ -157,10 +159,16 @@ function ImageUpload({ setReferenceImages }: Props) {
         <input {...getInputProps()} />
         <p className="text-slate-700 text-lg">
           Drag & drop a screenshot here, <br />
-          or paste from clipboard, <br />
           or click to upload
         </p>
       </div>
+      <div className="text-center text-sm text-slate-800 mt-4">
+        <Badge>New!</Badge> Upload a screen recording in .mp4 or .mov format to
+        clone a whole app (experimental).{" "}
+        <a className="underline" href={URLS["intro-to-video"]} target="_blank">
+          Learn more.
+        </a>
+      </div>
     </section>
   );
 }
diff --git a/frontend/src/urls.ts b/frontend/src/urls.ts
new file mode 100644
index 0000000..1c74cab
--- /dev/null
+++ b/frontend/src/urls.ts
@@ -0,0 +1,4 @@
+export const URLS = {
+  "intro-to-video":
+    "https://github.com/abi/screenshot-to-code/blob/main/blog/video-to-app.md",
+};