adds launch announcement

jonfriesen · Aug 21, 2024 · 210df05 · 210df05
1 parent 43011b9
commit 210df05
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/web/src/app/page.mdx b/web/src/app/page.mdx
@@ -1,10 +1,45 @@
 import { SparkleIcon } from '@/components/SparkleIcon'
 import { YouTubeVideoButton } from '@/components/YouTubeVideoButton'
+import { Button } from '@/components/Button'
+import {IconChrome} from '@/components/IconChrome'
+import Link from 'next/link'
 
 export { Layout as default } from '@/components/Layout'
 
 ---
 
+[![](@/images/launched.png)]()
+
+## It's Alive! Our Chrome Extension Has Escaped the Lab {{ date: '2024-08-21T00:00Z' }}
+
+After countless nights of coding, an unhealthy amount of caffeine, and more "it works on my machine" moments than we'd care to admit, our Chrome extension is finally out in the wild!
+
+
+<Link href="https://chromewebstore.google.com/detail/quickcite/bdkbkefnpcenapogkehakcgmffjbbkif" target='_blank'>
+    <div className="flex justify-center items-center ">
+        <IconChrome className="h-5 w-auto flex-none mr-2" />
+        <span className="mr-2">Add to Chrome</span>
+    </div>
+</Link>
+
+### <SparkleIcon /> What's the Big Deal?
+
+- Multi-site Support: GitHub, LinkedIn, Instagram - we're playing the field, baby!
+- Customizable Prefixes: Because sometimes you need that emoji flair in your links.
+- Theme Options: Dark, light, or synthwave - choose your fighter!
+- User-Configurable Settings: Turn sites on/off faster than you can say "feature creep".
+- Slick UI: Buttons so pretty, you'll want to click them even when you don't need to.
+
+### <SparkleIcon /> How to Get It
+
+1. Head over to the <Link href="https://chromewebstore.google.com/detail/quickcite/bdkbkefnpcenapogkehakcgmffjbbkif" target='_blank'>Chrome Store</Link>
+2. Click "Add to Chrome" faster than you can say "take my data"
+3. Enjoy your newfound formatted link sharing superpowers!
+
+Is this extension going to change the world? Probably not. Will it save you a few seconds and make you feel like a tech ninja? Absolutely!
+
+---
+
 [![](@/images/product-tour-video.png)](https://www.youtube.com/watch?v=CCF5vnF3Dmw)
 
 ## Lights, Camera, Extension! {{ date: '2024-08-19T00:00Z' }}

diff --git a/web/src/components/IconChrome.jsx b/web/src/components/IconChrome.jsx
@@ -0,0 +1,11 @@
+export function IconChrome(props) {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+			<circle cx="12" cy="12" r="10" />
+			<circle cx="12" cy="12" r="4" />
+			<line x1="21.17" x2="12" y1="8" y2="8" />
+			<line x1="3.95" x2="8.54" y1="6.06" y2="14" />
+			<line x1="10.88" x2="15.46" y1="21.94" y2="14" />
+		</svg>
+	)
+}
diff --git a/web/src/components/Intro.jsx b/web/src/components/Intro.jsx
@@ -3,9 +3,11 @@
 import Link from 'next/link'
 
 import { IconLink } from '@/components/IconLink'
+import { IconChrome } from '@/components/IconChrome'
 import { Logo } from '@/components/Logo'
 import { FeedbackForm } from '@/components/FeedbackForm'
-import { IconLoading } from '@/components/IconLoading'
+// import { IconLoading } from '@/components/IconLoading'
+import { Button } from '@/components/Button'
 import { YouTubeVideoButton } from '@/components/YouTubeVideoButton'
 
 function BookIcon(props) {
@@ -24,17 +26,17 @@ function GitHubIcon(props) {
 	)
 }
 
-function FeedIcon(props) {
-	return (
-		<svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" {...props}>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M2.5 3a.5.5 0 0 1 .5-.5h.5c5.523 0 10 4.477 10 10v.5a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5v-.5A8.5 8.5 0 0 0 3.5 4H3a.5.5 0 0 1-.5-.5V3Zm0 4.5A.5.5 0 0 1 3 7h.5A5.5 5.5 0 0 1 9 12.5v.5a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5v-.5a4 4 0 0 0-4-4H3a.5.5 0 0 1-.5-.5v-.5Zm0 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
-			/>
-		</svg>
-	)
-}
+// function FeedIcon(props) {
+// 	return (
+// 		<svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" {...props}>
+// 			<path
+// 				fillRule="evenodd"
+// 				clipRule="evenodd"
+// 				d="M2.5 3a.5.5 0 0 1 .5-.5h.5c5.523 0 10 4.477 10 10v.5a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5v-.5A8.5 8.5 0 0 0 3.5 4H3a.5.5 0 0 1-.5-.5V3Zm0 4.5A.5.5 0 0 1 3 7h.5A5.5 5.5 0 0 1 9 12.5v.5a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5v-.5a4 4 0 0 0-4-4H3a.5.5 0 0 1-.5-.5v-.5Zm0 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
+// 			/>
+// 		</svg>
+// 	)
+// }
 
 function XIcon(props) {
 	return (
@@ -76,10 +78,8 @@ export function Intro() {
 					<AnimatedGradientText>QuickCite</AnimatedGradientText>
 				</Link>
 			</div>
-			{/* <h1 className="mt-14 font-display text-4xl/tight font-light text-white">
-				A Chrome extension to build <span className="text-sky-300">context rich links</span>
-			</h1> */}
-			<h1 className="mt-14 font-display text-4xl/tight font-light text-white">
+
+			<h1 className="mt-14 mb-6 font-display text-4xl/tight font-light text-white">
 				A{' '}
 				<span className="font-sans font-semibold tracking-tight">
 					<span className="text-blue-500">C</span>
@@ -91,20 +91,29 @@ export function Intro() {
 				</span>{' '}
 				extension to build <span className="text-sky-300">context rich links</span>
 			</h1>
-			<div className="mt-6 mb-6 bg-blue-600 border-l-4 border-blue-400 text-blue-200 p-4 rounded">
+			{/* <div className="mt-6 mb-6 bg-blue-600 border-l-4 border-blue-400 text-blue-200 p-4 rounded">
 				<div className="flex items-center">
 					<IconLoading className="mr-2 h-4 w-4 flex-none text-blue-400" />
 					<p className="font-bold">Extension Under Review</p>
 				</div>
 				<p className="text-sm">
 					The QuickCite Chrome extension is stuck in Google&apos;s review limbo. We&apos;re eager to get it live—thanks for your patience while Google takes its time!
 				</p>
-			</div>
+			</div> */}
 
-			<div className="flex justify-center items-center">
+			<div className="flex gap-6 justify-center items-center">
 				<YouTubeVideoButton videoUrl="https://www.youtube.com/watch?v=CCF5vnF3Dmw" />
+				<Button
+					className="transition duration-300 flex items-center"
+					arrow
+					href="https://chromewebstore.google.com/detail/quickcite/bdkbkefnpcenapogkehakcgmffjbbkif"
+					target="_blank">
+					<IconChrome className="h-5 w-auto flex-none mr-2" />
+					<span className="mr-2">Add to Chrome</span>
+				</Button>
 			</div>
-			<p className="mt-4 text-sm/6 text-gray-300">
+
+			<p className="mt-6 text-sm/6 text-gray-300">
 				QuickCite is a chrome extension designed to enhance productivity by allowing users to quickly copy formatted information from various websites, including GitHub, LinkedIn,
 				and Instagram.
 			</p>

diff --git a/web/src/images/launched.png b/web/src/images/launched.png