feat: add videos to the page

atoma-network · Jan 22, 2025 · d541fd4 · d541fd4
1 parent ee05fcf
commit d541fd4
Showing 1 changed file with 60 additions and 10 deletions.
diff --git a/components/guide-view.tsx b/components/guide-view.tsx
@@ -1,10 +1,45 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { ExternalLink } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ExternalLink } from "lucide-react";
 
 export function GuideView() {
   return (
     <div className="space-y-6">
       <Card className="bg-white dark:bg-[#1E2028] border-purple-100 dark:border-purple-800/30">
+        <div className="flex flex-row flex-wrap justify-left gap-4 p-4">
+          <div>
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube.com/embed/eZLvswmoN_M?si=sX8EP3E6XokUKyRc&rel=0&fs=1"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            ></iframe>
+          </div>
+          <div>
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube.com/embed/zmsgrzqPviw?si=qnTOARgdByvJ1-mn&rel=0&fs=1"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            ></iframe>
+          </div>
+          <div>
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube.com/embed/I0t0Q01ageM?si=vPthq8F9OnglXDvI&rel=0&fs=1"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            ></iframe>
+          </div>
+        </div>
         <CardHeader>
           <CardTitle className="text-2xl font-bold text-gray-900 dark:text-white">Atoma Devnet Guide</CardTitle>
           <CardDescription className="text-gray-500 dark:text-gray-400">
@@ -31,37 +66,52 @@ export function GuideView() {
           <div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Step 2:</h3>
             <p className="text-gray-700 dark:text-gray-300">
-              Visit <a href="https://discord.gg/sui" target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 inline-flex items-center">
+              Visit
+              <a
+                href="https://discord.gg/sui"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 inline-flex items-center"
+              >
                 https://discord.gg/sui <ExternalLink className="ml-1 h-4 w-4" />
-              </a> and enter the testnet-faucet channel and type in the command: !faucet insert_wallet_address
+              </a>
+              and enter the testnet-faucet channel and type in the command: !faucet insert_wallet_address
             </p>
           </div>
 
           <div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Step 3:</h3>
             <p className="text-gray-700 dark:text-gray-300">
-              Visit <a href="https://faucet.circle.com/" target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 inline-flex items-center">
+              Visit
+              <a
+                href="https://faucet.circle.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 inline-flex items-center"
+              >
                 https://faucet.circle.com/ <ExternalLink className="ml-1 h-4 w-4" />
-              </a> to claim Sui Testnet USDC
+              </a>
+              to claim Sui Testnet USDC
             </p>
           </div>
 
           <div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Step 4:</h3>
             <p className="text-gray-700 dark:text-gray-300">
-              Visit Developer Portal -&gt; Billing: Click Add Funds and proceed with prompted instructions to send your Testnet USDC to top up your account balance
+              Visit Developer Portal -&gt; Billing: Click Add Funds and proceed with prompted instructions to send your
+              Testnet USDC to top up your account balance
             </p>
           </div>
 
           <div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Step 5:</h3>
             <p className="text-gray-700 dark:text-gray-300">
-              Begin using Atoma! Simply plug into our API or SDK's (Visit Documentation for more information) and you are ready to go!
+              Begin using Atoma! Simply plug into our API or SDK's (Visit Documentation for more information) and you
+              are ready to go!
             </p>
           </div>
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }
-