Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alternateStyling #6

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

alternateStyling #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/components/MailChimpForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ function MailchimpForm() {
}

return (
<div className="flex flex-col md:flex-row sm:flex-col items-start mx-auto w-full md:w-4/5">
<div className="mc-field-group flex-grow mx-auto w-full md:mr-5 mb-3 md:mb-0">
<div className="flex flex-col md:flex-row sm:flex-col items-start mx-auto w-full md:w-4/5 justify-between">
<div className="mc-field-group flex-grow mx-auto w-full sm:w-[30rem] md:mr-5 mb-3 md:mb-0 ">
<input
type="email"
name="EMAIL"
Expand All @@ -90,13 +90,14 @@ function MailchimpForm() {
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder='Email address'

/>
<span className="text-red-500 text-xs">{!isValidEmail && 'Please enter a valid email address.'}</span>
</div>
<button
disabled={loading} // Disable button while loading
onClick={handleSubmit}
className="button bg-cacti-green hover:bg-green-700 py-2 px-4 rounded whitespace-nowrap mx-auto min-w-[215px]"
className="button bg-cacti-green hover:bg-green-700 py-2 px-4 rounded-full whitespace-nowrap mx-auto min-w-[215px]"
style={styles.submitButton}
>
{loading ? <div className="loading-spinner mx-auto"></div> : success ? "Subscribed!" : "Keep me in the loop"}
Expand Down
248 changes: 158 additions & 90 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,53 @@
import TopBar from "@/components/TopBar"
import { useRef, useEffect } from "react"
import { Roboto_Mono } from 'next/font/google'
import Image from 'next/image'
import FeatureCardMedia from '@/components/FeatureCardMedia'
import FeatureCardText from '@/components/FeatureCardText'
import CactiFooter from "@/components/CactiFooter"
import MailchimpForm from "@/components/MailChimpForm"
import TopBar from "@/components/TopBar";
import { useRef, useEffect } from "react";
import { Roboto_Mono } from "next/font/google";
import Image from "next/image";
import FeatureCardMedia from "@/components/FeatureCardMedia";
import FeatureCardText from "@/components/FeatureCardText";
import CactiFooter from "@/components/CactiFooter";
import MailchimpForm from "@/components/MailChimpForm";

const robotoMono = Roboto_Mono({ subsets: ['latin'] })
const robotoMono = Roboto_Mono({ subsets: ["latin"] });

export default function Home() {

const animationEl = useRef<HTMLSpanElement | null>(null);
const Typed = require('typed.js');
const Typed = require("typed.js");

useEffect(() => {

const typed = new Typed(animationEl.current, {
strings: ['Web3 Protocols','Smart Contracts', 'NFT Markets', 'Defi Protocols'],
strings: [
"Web3 Protocols",
"Smart Contracts",
"NFT Markets",
"Defi Protocols",
],
typeSpeed: 90,
loop: true
})
loop: true,
});

return () => {
typed.destroy();
}


}, [animationEl])
};
}, [animationEl]);

return (
<div>
<header className={`${robotoMono.className}`}>
<TopBar />

</header>
<main
className={`flex flex-col items-center overflow-scroll ${robotoMono.className} bg-cacti-dark-blue`}
className={`flex flex-col items-center overflow-scroll ${robotoMono.className} bg-cacti-dark-blue`}
>

{/* Top Panel */}
<div className="flex flex-col items-center justify-center mt-0 border-cacti-green border-y-2 w-full mx-0 sm:min-h-[80h] lg:min-h-[50vh] xl:min-h-[50vh]" style={{
background: `linear-gradient(
<div
className="
w-full
min-h-[80vh]
flex flex-col
justify-between
"
style={{
background: `linear-gradient(
70deg,
hsl(199deg 76% 5%) 0%,
hsl(194deg 85% 7%) 16%,
Expand All @@ -54,63 +60,103 @@ export default function Home() {
hsl(158deg 100% 16%) 92%,
hsl(151deg 100% 17%) 100%
)`,
// border: '1px solid rgba(46, 140, 135, 1)',
}}>
}}
>
<div className="flex flex-col flex-grow my-5 px-3 md:px-0 justify-center space-y-[50px]">
<div className="flex items-center text-center mx-auto">
<h1 className="text-4xl lg:text-6xl text-white">
🌵🌵 CACTI 🌵🌵
</h1>
</div>

<div className="flex flex-col my-5 mt-12 px-3 md:px-0">

<div className="md:text-3xl text-center text-primary w-full">
Use Natural language to Interact with{" "}
<div className="inline-block min-w-[215px] text-left">
<span ref={animationEl}>Web3 Protocols</span>
</div>
</div>

<div className="flex items-center text-center mx-auto">
<h1 className="text-4xl lg:text-6xl text-white">🌵🌵🌵 CACTI 🌵🌵🌵</h1>
<div className="flex items-center justify-center text-sm md:text-[16px] my-5 text-center text-white">
Built by&nbsp;
<a
href="https://yieldprotocol.com/"
target="_blank"
rel="noreferrer"
className="underline"
>
Yield
</a>
&nbsp;
<img
src={"/icons/yield-logo-white.svg"}
alt="icon"
className="icon w-[16px]"
/>
. Powered by OpenAI.
</div>
</div>

<div className="text-md md:text-[22px] mt-5 text-center text-white">
Use Natural language to Interact with <div className="inline-block min-w-[215px] text-left">
<span ref={animationEl}>Web3 Protocols</span>
<div className="flex flex-col w-full items-center justify-center z-10">
<div className="">
<MailchimpForm />
</div>
{/*
<div className="flex float-left my-10">
<a
href="https://github.com/yieldprotocol/cacti-backend"
target="_blank"
rel="noopener noreferrer"
className="mx-auto"
>
<button className="border border-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full mx-auto">
Show me the code 💻
</button>
</a>
</div> */}

<div className='pt-[50px]'>
<div className=" border border-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full mx-auto">
Discover more
</div>
</div>
</div>
<div className="flex items-center justify-center text-sm md:text-[16px] my-5 text-center text-white">
Built by&nbsp;<a href="https://yieldprotocol.com/" target="_blank" rel="noreferrer" className="underline">Yield</a>&nbsp;<img src={'/icons/yield-logo-white.svg'} alt="icon" className="icon w-[16px]" />. Powered by OpenAI.
</div>

<div className="flex items-center w-full">

<MailchimpForm />

</div>
<div className="flex items-center my-3">
<a href="https://github.com/yieldprotocol/cacti-backend" target="_blank" rel="noopener noreferrer" className="mx-auto">
<button className="border border-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mx-auto">
Show me the code 💻
</button>
</a>
</div>

</div>

</div>

{/* transition div - TODO - must be a better way to do this? */}
<div className="invisible sm:visible flex flex-col pointer-events-none w-full h-[200px] -mt-[200px] bg-gradient-to-t from-cacti-dark-blue z-0"></div>

{/* Panel 3 */}
<div className="flex flex-col container items-center justify-center mx-auto mt-12 mb-1 px-3 md:px-0 bg-fade-black-to-transparent min-h-[40vh] text-primary">
<p className="text-lg md:text-3xl lg:text-5xl">Trade Assets. Retrieve Data.</p>
<p className="text-lg md:text-3xl lg:text-5xl">Interact with Smart Contracts.</p>
<p className="text-lg md:text-3xl lg:text-5xl">
Trade Assets. Retrieve Data.
</p>
<p className="text-lg md:text-3xl lg:text-5xl">
Interact with Smart Contracts.
</p>
<div className="text-center pt-2">
<p className="text-sm md:text-lg text-white" style={{color: 'rgba(255, 255, 255, 0.8)'}}>The groundbreaking Cacti web-interface is in alpha development, with many protocols already integrated, and more on the way.</p>
<p
className="text-sm md:text-lg text-white"
style={{ color: "rgba(255, 255, 255, 0.8)" }}
>
The groundbreaking Cacti web-interface is in alpha development,
with many protocols already integrated, and more on the way.
</p>
</div>
</div>

{/* Panel 2 */}
<div className="flex flex-col items-center justify-center container mx-auto h-full w-5/6 md:w-2/4 border border-cacti-green rounded-md py-1 mb-10" style={{}}>
<video controls height="auto">
<source src="/videos/yieldVideoHighRes.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div
className="flex flex-col items-center justify-center container mx-auto h-full w-5/6 md:w-2/4 border border-cacti-green rounded-md py-1 mb-10"
style={{}}
>
<video controls height="auto">
<source src="/videos/yieldVideoHighRes.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>


{/* features */}
<div className="flex flex-col mx-auto h-full" style={{ }}>

<div className="flex flex-col mx-auto h-full" style={{}}>
{/* Uniswap commented out until video */}
{/* <div>
<FeatureCardMedia
Expand All @@ -135,70 +181,92 @@ export default function Home() {
videoPath="/videos/register-ens-and-set-avatar.mp4"
/>
</div>


</div>

{/* Panel 4 */}
<div className="flex flex-col items-center justify-center mx-auto min-h-[40vh] text-primary bg-fade-black-to-transparent">
<p className="text-lg md:text-3xl lg:text-5xl mb-5">Open source and built in Public</p>
<p className="text-lg md:text-3xl lg:text-5xl mb-5">
Open source and built in Public
</p>
<div className="text-center flex flex-col">
<p className="text-sm md:text-lg text-[28px] mb-3 text-white" style={{color: 'rgba(255, 255, 255, 0.8)'}}>
<p
className="text-sm md:text-lg text-[28px] mb-3 text-white"
style={{ color: "rgba(255, 255, 255, 0.8)" }}
>
We&apos;ve released Cacti under an AGPL license.
</p>
<p className="text-sm md:text-lg text-[28px] text-white" style={{color: 'rgba(255, 255, 255, 0.8)'}}>
<p
className="text-sm md:text-lg text-[28px] text-white"
style={{ color: "rgba(255, 255, 255, 0.8)" }}
>
Use our developer features and start building in the open with us.
</p>
</div>
</div>

{/* Feature cards - no images */}
<div className="container mx-auto px-12 py-8">

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">

<div className="p-0">
<FeatureCardText header="Natural Language Interactions" subHeader="Allow users to trade assets, manage NFTs, and more through simple text requests and responses." />
<FeatureCardText
header="Natural Language Interactions"
subHeader="Allow users to trade assets, manage NFTs, and more through simple text requests and responses."
/>
</div>
<div className="p-0">
<FeatureCardText header="Easy Integrations" subHeader="Seamlessly add web3 actions with Javascript on the frontend or Python on the backend." />
<FeatureCardText
header="Easy Integrations"
subHeader="Seamlessly add web3 actions with Javascript on the frontend or Python on the backend."
/>
</div>
<div className="p-0">
<FeatureCardText header="ReactJS Component Framework" subHeader="Our library lets you build your UI quickly with minimal frontend knowledge." />
<FeatureCardText
header="ReactJS Component Framework"
subHeader="Our library lets you build your UI quickly with minimal frontend knowledge."
/>
</div>
<div className="p-0">
<FeatureCardText header="Wallet based Authentication" subHeader="Ensure secure identification and transactions with user's wallets, powered by RainbowKit" />
<FeatureCardText
header="Wallet based Authentication"
subHeader="Ensure secure identification and transactions with user's wallets, powered by RainbowKit"
/>
</div>
<div className="p-0">
<FeatureCardText header="Flexible Evaluation Framework" subHeader="Test the performance of widgets with hard-coded testing, automatic evaluations, or manually annotated CSV samples." />
<FeatureCardText
header="Flexible Evaluation Framework"
subHeader="Test the performance of widgets with hard-coded testing, automatic evaluations, or manually annotated CSV samples."
/>
</div>
<div className="p-0">
<FeatureCardText header="Chat Context Management" subHeader="Build context from previous interactions for improved UX, and revisit past conversations with 1 click." />
<FeatureCardText
header="Chat Context Management"
subHeader="Build context from previous interactions for improved UX, and revisit past conversations with 1 click."
/>
</div>


</div>
</div>

{/* Panel 6 */}
<div className="flex flex-col items-center justify-center mx-auto text-primary bg-fade-black-to-transparent min-h-[40vh] w-5/6" >
{/* Panel 6 */}
<div className="flex flex-col items-center justify-center mx-auto text-primary bg-fade-black-to-transparent min-h-[40vh] w-5/6">
<p className="text-lg md:text-5xl mb-5">Come build with us</p>
<div className="text-center flex flex-col">
<div className="flex items-center">
<a href="https://github.com/yieldprotocol/cacti-backend" target="_blank" rel="noopener noreferrer">
<button className="border border-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mx-auto">
Show me the code 💻
</button>
</a>
<a
href="https://github.com/yieldprotocol/cacti-backend"
target="_blank"
rel="noopener noreferrer"
>
<button className="border border-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mx-auto">
Show me the code 💻
</button>
</a>
</div>
</div>
</div>
{/* FOOTER */}

{/* FOOTER */}
<CactiFooter />
</main>


</div>
)
);
}