Frontend Web-App Integration

landing-page/src/components/Button.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const Button = ({ styles }) => (
   <button type="button" className={`py-4 px-6 font-poppins font-medium text-[18px] text-primary bg-blue-gradient rounded-[10px] outline-none ${styles}`}>
-    Get Started
+    <a href="https://raise-1.vercel.app/">Get Started</a>
   </button>
 );
 

web/components/Footer.js

@@ -0,0 +1,49 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+
+
+export default function Footer() {
+return (
+<>
+    <hr className='my-6 mx-20' />
+    <footer className={styles.footer}>
+
+    <div className='flex items-center justify-center space-x-4 cursor-pointer '>
+
+
+    <div className='transition ease-in-out delay-50 hover:-translate-y-1 cursor-pointer text-white font-mono font-bold text-lg'>
+
+    <a href='https://github.com/ayush035/raise-1'>
+    {/* <img src='/github-1.png'>
+        </img> */}
+        Github
+        </a>
+        </div>
+        <div className='text-gray-700 text-3xl'>
+        |
+        </div>
+
+
+
+
+    <div className='transition ease-in-out delay-50 hover:-translate-y-1 cursor-pointer text-white font-mono font-bold text-lg'>
+    <a href='https://twitter.com/'>
+
+    {/* <img src='/twitter-1.png'>
+        </img> */} Twitter
+        </a>
+
+    </div>
+    <div className='text-white my-4'>
+        Copyright © 2022 Raise Inc. All rights reserved
+        </div>
+
+    </div>
+
+
+    </footer>
+</>
+
+)
+}

web/components/Navbar.js

@@ -40,15 +40,35 @@ export default function Navbar() {
 //   }
 
   return (
-    <div className={styles.navbar}>
-      <Link href="/">Home</Link>
-      <Link href="/purchase">Create Grant</Link>
-      <Link href="/manage">Manage</Link>
-      <Link href="/fund">Fund</Link>
+    <>
+     <nav className=' flex justify-between h-12 text-green-400 bg-black   font-bold' >
+        <span className='mx-20 my-2 flex text-green-400 text-2xl	'><Link href={"/"}>RAISE</Link></span>
+        <ul className= 'px-2 py-3 flex space-x-10 mx-12 '>
+    {/* <div className='flex mx-16 '> */}
+      {/* <input className="px-4 h-8  rounded-lg  bg-gray-800 text-gray-400" type="text" placeholder="🔍 Search projects" /> */}
+{/* </div> */}
+
+<div className='hover:text-white delay-50  text-md font-semibold font-mono '>
+      <Link href="/">Home</Link></div>
+<div className='hover:text-white delay-50  text-md font-semibold font-mono'>
+
+      <Link href="/purchase">Create Grant</Link></div>
+<div className='hover:text-white delay-50  text-md font-semibold font-mono'>
+
+      <Link href="/manage">Manage</Link></div>
+<div className='hover:text-white delay-50 text-md font-semibold font-mono '>
+
+      <Link href="/fund">Fund</Link></div>
+      {/* <div className=' mx-2 my-2 '> */}
+<div className='hover:text-white delay-50  text-md font-semibold bg-green-400 text-black rounded-lg px-3 font-mono' >
       <button onClick={currentUser.addr ? logOut : logIn}>
         {currentUser.addr ? `${currentUser.addr}` : "Login"}
-      </button>
-    </div>
+      </button></div>
+      </ul>
+</nav>
+{/* <hr/> */}
+</>
+
   );
 }
 

web/pages/fund/index.js

@@ -3,6 +3,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import Navbar from "../../components/Navbar";
+import Footer from "@/components/Footer";
 import { useAuth } from "../../contexts/AuthContext";
 import { getMyGrantInfos } from "../../flow/scripts";
 import { initializeAccount } from "../../flow/transactions";
@@ -91,7 +92,9 @@ export default function Home() {
       <Navbar />
 
       <main className={styles.main}>
-        <h1>Your Registered Grants</h1>
+      <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+        <h1> Registered Grants </h1></div>
+
 
         {<>
 
@@ -143,7 +146,7 @@ export default function Home() {
 
 
             <div
-              className="block max-w-sm rounded-lg bg-white shadow-lg dark:bg-neutral-700" key={idx}>
+              className="block max-w-sm rounded-lg bg-gray-900 text-white font-mono" key={idx}>
               <a href="#!" data-te-ripple-init data-te-ripple-color="light">
                 <img
                   className="rounded-t-lg"
@@ -156,26 +159,28 @@ export default function Home() {
                   className="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
                 {di.name}
                 </h5></Link>
-                <p className="mb-1 text-base text-neutral-600 dark:text-neutral-200">
+                <p className="mb-1 text-base text-neutral-800 dark:text-neutral-200">
                   By {di.owner}
                 </p>
-                <p className="mb-4 text-base text-neutral-600 dark:text-neutral-200">
+                <p className="mb-4 text-base text-neutral-800 dark:text-neutral-200">
                   {di.bio.slice(0,64)}...
                 </p>
+                <hr className='my-4 mx-2'/>
                 <div className='flex flex-col pb-2'>
 
-                  <input type="text" placeholder="amount"
-                    className='px-4 py-2 focus:outline-none focus:border-[#38E8C6] focus:border-2 bg-gray-800 focus:border rounded-lg'
+                  <input type="text" placeholder="Amount $"
+                    className='px-4 py-2 focus:outline-none  bg-gray-800 rounded-lg'
                     onChange={e => setAmount(e.target.value)} />
                 </div>
+                <div className=' flex justify-center'>
 
                 <button type="button"
-                  className="inline-block rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
+                  className="inline-block rounded bg-green-600 px-6 pt-2.5 pb-2 text-md font-semibold uppercase leading-normal text-white  transition duration-150 ease-in-out my-2 py-2 hover:bg-green-400"
                   data-te-ripple-init
                   data-te-ripple-color="light" onClick={async () => {
                     const txId = await sendFlow(di.owner, amount);
                     await fcl.tx(txId).onceSealed();
-                  }} >Fund </button>
+                  }} >Fund </button></div>
 
               </div>
             </div>
@@ -185,6 +190,7 @@ export default function Home() {
         </>
         }
       </main>
+      <Footer />
     </div>
   );
 }

web/pages/index.js

@@ -5,6 +5,10 @@ import { useEffect, useState } from "react";
 import Navbar from "../components/Navbar";
 import { getAllGrantInfos ,getFlownsName} from "../flow/scripts";
 import styles from "../styles/Home.module.css";
+import b from'../public/b.jpg'
+import m from'../public/m.png'
+import e from'../public/e.jpg'
+import Footer from '../components/Footer'
 
 export default function Home() {
   // Create a state variable for all the GrantInfo structs
@@ -62,40 +66,72 @@ async function getFlowns(url){
 
       <Navbar />
 
+
+
+
+
+      <div className='grid grid-cols-2'>
+        <div className=' flex flex-col=-2'>
+      <div className ='my-20 mx-20 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105'>
+<Image 
+src={b}
+alt=''
+width="400"
+height="400"/>
+</div>
+</div>
+<div className=' flex flex-col'>
+<div className ='my-20 mx-20 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105'>
+<Image 
+src={m}
+alt=''
+width="350"
+height="400"/>
+</div>
+</div></div>
+<div className ='my-20 mx-20'>
+<Image 
+src={e}
+alt=''
+width="1100"
+height="400"/>
+
+</div>
       <main className={styles.main}>
-        <h1>All Registered Grants</h1>
+        <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+        <h1> Registered Grants </h1></div>
 
         <div className={styles.grantsContainer}>
         {grantInfos.length === 0 ? (
-              <p>You have not registered any FNS Grants yet</p>
+      <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+      <p>You have not registered any FNS Grants yet</p>
+              </div>
             ) : (
 
 
-              <div className="grid grid-cols-4 gap-8" >
+              <div className="grid grid-cols-4 gap-8 my-6 mx-2" >
              { grantInfos.map((di, idx) => (
 
 
 
             <div
-              className="block max-w-sm rounded-lg bg-white shadow-lg dark:bg-neutral-700" key={idx}>
+              className="block max-w-sm rounded-sm bg-gray-900 cursor-pointer font-mono text-white  hover:bg-green-600" key={idx}>
               <a href="#!" data-te-ripple-init data-te-ripple-color="light">
                <img
                   className="rounded-t-lg "
                   src={di.imgurl}
-                  alt="" />
+                  alt=""
+                  width="300" height="200" />
               </a>
-              <div className="p-6">
+              <div className="p-6 ease-in-out delay-100 hover:-translate-y-1">
                 <h5
-                  className="mb-[2px] text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
+                  className="mb-2 text-xl  text-white font-semibold">
                 {di.name}
                 </h5>
-                <div className="mb-1 text-xs text-neutral-600 dark:text-neutral-200">
-                  By <p className="text-red-100" on={ async ()=>{ 
-const name = await getFlownsName(di.owner);
-setName(name);
-                  }} >{name}</p>
-                </div>
-                <p className="mb-4 text-base text-neutral-600 dark:text-neutral-200">
+                <p className="mb-1 text-base text-neutral-600 dark:text-neutral-100">
+                  By {di.owner}
+                </p>
+                <p className="mb-4 text-base text-neutral-600 dark:text-neutral-100">
                   {di.bio.slice(0,64)}...
                 </p>
                 {/* <div className='flex flex-col pb-2'>
@@ -123,6 +159,7 @@ setName(name);
             )}
         </div>
       </main>
+      <Footer />
     </div>
   );
 }