Skip to content

Instantly share code, notes, and snippets.

@btg5679

btg5679/reactHomePage.tsx

Created March 25, 2023 15:24
Show Gist options
  • Save btg5679/f05787aca87b8c73f0fbd62e30638f35 to your computer and use it in GitHub Desktop.
Save btg5679/f05787aca87b8c73f0fbd62e30638f35 to your computer and use it in GitHub Desktop.
Download ZIP
reactjs homepage with a lot of classes
Raw
reactHomePage.tsx
import jumpSvg from "../../images/jump.svg";
import NavBar from "../../components/NavBar/navbar";
import AmazonSvg from "../../images/check-green.svg";
import NewSvg from "../../images/new.svg";
import BookSvg from "../../images/book.svg";
import HomePillContainer from "../../components/HomePillComponent/homePillComponent";
const HomePage = () => {
return (
<body className="flex flex-col justify-center m-0 p-0 overflow-hidden">
<div className="pointer-events-none flex fixed inset-0">
<div className="user-select-none flex-grow flex w-full h-full flex-col justify-start">
<NavBar />
<main className="pointer-events-auto flex absolute w-full z-50 inset-0 top-[71px] items-center justify-center bg-white pt-6 overflow-y-auto overflow-x-hidden">
<div className="h-full w-full sm:w-[1100px] max-w-auto sm:max-w-[1100px] flex flex-col items-center justify-start sm:justify-space-between py-0 px-4 sm:p-0">
<div className="h-full w-full sm:min-w-[744px] max-w-auto sm:max-w-[910px] flex flex-col sm:flex-row justify-start sm:justify-space-between py-0 px-4 sm:p-0">
<div className="relative sm:fixed flex box-content justify-center flex-col items-center p-0 sm:px-2 w-full sm:w-[287px]">
<div className="hidden sm:flex flex-col items-center w-full m-5 mb-2 pb-3 border-b border-gray-300">
<HomePillContainer />
<a
className="link-button-item box-border sm:box-content font-semibold text-[14px] sm:text-[16px] flex items-center text-black border border-gray-300 decoration-none rounded-full justify-center box-border px-[18px] sm:px-0 my-1 py-[10px] sm:py-3 sm:ml-2 hover:bg-gray-50 hover:border-gray-400 hover:text-black sm:w-full h-[44px] flex-grow sm:h-auto mx-1 sm:mx-0"
href="https://thenetworkstate.com/podcast"
>
<img className="mr-3" src={NewSvg} />
Recently Added Synths
</a>
<a
className="link-button-item box-border sm:box-content font-semibold text-[14px] sm:text-[16px] flex items-center text-black border border-gray-300 decoration-none rounded-full justify-center box-border px-[18px] sm:px-0 my-1 py-[10px] sm:py-3 sm:ml-2 hover:bg-gray-50 hover:border-gray-400 hover:text-black sm:w-full h-[44px] flex-grow sm:h-auto mx-1 sm:mx-0"
href="https://thenetworkstate.com/preamble"
>
<img className="mr-3" src={BookSvg} />
Explore by Category
</a>
<a
className="link-button-item box-border sm:box-content font-semibold text-[14px] sm:text-[16px] flex items-center text-black border border-gray-300 decoration-none rounded-full justify-center box-border px-[18px] sm:px-0 my-1 py-[10px] sm:py-3 sm:ml-2 hover:bg-gray-50 hover:border-gray-400 hover:text-black sm:w-full h-[44px] flex-grow sm:h-auto mx-1 sm:mx-0"
href="https://www.amazon.com/dp/B09VPKZR3G"
target="_blank"
>
<img className="mr-3" src={AmazonSvg} />
Most Popular Synths
</a>
</div>
<div className="flex flex-col w-full border-b border-transparent text-sm sm:hidden">
<div className="flex w-full flex-row border-b border-transparent justify-between items-center text-sm pb-2 px-0 sm:hidden">
<div className="font-suisse text-[28px] text-gray-700 mb-3 font-bold">
Your favorite content, synthesized by AI
</div>
</div>
<div className="flex w-full flex-row border-b border-transparent justify-between items-left text-sm pb-6 px-0 sm:hidden">
<div className="font-inter text-[18px] text-gray-700 text-base">
1000's of pieces of long-form and scientific content
synthesized by AI into easy to digest, actionable chunks
called -{" "}
<span style={{ color: "#006DFF" }}>Synths.</span>
</div>
</div>
<HomePillContainer />
</div>
{/* <form className="subscribe flex flex-row justify-center items-center mt-1 w-full h-[44px] sm:max-w-[330px]">
<div className="pointer-events-auto flex-grow min-w-0 h-full rounded-full box-border border border-solid border-gray-300 hover:border-gray-200 focus-within:border-gray-200 clear-button-styles rounded-r-none">
<input
className="text-m min-w-0 bg-transparent w-full pt-0 pr-2 pb-0 pl-[18px] leading-none clear-button-styles"
placeholder="Want more? Enter email..."
type="email"
/>
</div>
<button
type="submit"
className="clear-button-styles font-semibold flex items-center justify-center rounded-full p-4 text-[16px] border border-solid border-black text-white bg-black h-full box-border w-[115px] min-w-[115px] rounded-l-none hover:bg-gray-900"
>
<span className="action-label">Subscribe</span>
<div className="hidden small-white-loader">
<div></div>
</div>
</button>
</form> */}
<div
className="subscribe-sent hidden py-2 px-[18px] font-inter font-base flex flex-row justify-between items-center rounded-lg max-w-[300px] font-medium text-white"
style={{
backgroundColor: "#3c864e",
width: "calc(100% - 36px)",
}}
>
Check your email!
<img
src="/images/check-green.svg"
className="rounded-full p-0.5 bg-white"
/>
</div>
</div>
<div className="flex flex-grow flex-col sm:ml-[90px] sm:pl-[250px] sm:pr-[10px] p-0 m-0">
<div className="hidden sm:flex flex-col w-full border-b border-gray-300 pb-6">
<div className="font-suisse text-[32px] text-gray-700 mb-3 font-bold">
Your favorite content, synthesized by AI
</div>
<div className="font-inter text-[18px] text-gray-700 text-base">
1000's of pieces of long-form and scientific content
synthesized by AI into easy to digest, actionable chunks
called - <span style={{ color: "#006DFF" }}>Synths.</span>
</div>
<br />
<br />
<div className="font-inter text-[18px] text-gray-700 text-base">
Explore Synths from{" "}
<span className="highlight">podcasts</span>,{" "}
<span className="highlight">books</span>,{" "}
<span className="highlight">white-papers</span>, and{" "}
<span className="highlight">scientific literature</span>.
With topics ranging from{" "}
<span className="highlight">Health</span>,{" "}
<span className="highlight">Biology</span>,{" "}
<span className="highlight">Entrepreneurship</span>,{" "}
<span className="highlight">Crypto</span>,{" "}
<span className="highlight">Finance</span>,{" "}
<span className="highlight">Anti-Aging</span>,{" "}
<span className="highlight">Marketing</span>,{" "}
<span className="highlight">AI</span>, and much more.
</div>
</div>
<div className="pointer-events-auto flex flex-col w-full last:pb-16">
<a
href="/test-synth"
className="text-black no-underline cursor-pointer flex mt-[18px] mb-4 font-suisse text-[15px] sm:text-lg font-bold leading-6"
>
1. SynthAI Features
<button className="box-content h-6 clear-button-styles rounded-full p-0 border border-solid border-gray-300 ml-3 hover:bg-gray-50">
<img width="24" height="24" src={jumpSvg} />
</button>
</a>
<div className="flex flex-col w-full border border border-gray-300 rounded-xl">
<a
href="/test-synth"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Smart Summarizations aka "Synths"
</a>
<a
href="/the-network-state-in-one-sentence"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Content Categorization
</a>
<a
href="/the-network-state-in-one-sentence"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Highlighting & Note-Taking
</a>
<a
href="/the-network-state-in-one-image"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Smart Content Recommendations
</a>
<a
href="/the-network-state-in-one-thousand-words"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Social Proof
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Smart Search
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Deep Linking
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
User Favorites and Activity Analytics
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Mobile-First Design
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Synth-Chat
</a>
</div>
</div>
<div className="pointer-events-auto flex flex-col w-full last:pb-16">
<a
href="/test-synth"
className="text-black no-underline cursor-pointer flex mt-[18px] mb-4 font-suisse text-[15px] sm:text-lg font-bold leading-6"
>
2. Synth Anatomy 101
<button className="box-content h-6 clear-button-styles rounded-full p-0 border border-solid border-gray-300 ml-3 hover:bg-gray-50">
<img width="24" height="24" src={jumpSvg} />
</button>
</a>
<div className="flex flex-col w-full border border border-gray-300 rounded-xl">
<a
href="/test-synth"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
ELI5
</a>
<a
href="/the-network-state-in-one-sentence"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
References and Source Citations
</a>
<a
href="/the-network-state-in-one-sentence"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Author Metrics
</a>
<a
href="/the-network-state-in-one-image"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Word Frequency Map
</a>
<a
href="/the-network-state-in-one-thousand-words"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Actionable Steps
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Smart Summarizations
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Highlighting & Note-Taking
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Suggested Next-Reads
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Simple Sharing Tools
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Social Proof Ratings
</a>
<a
href="/the-network-state-in-one-essay"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Like/Dislike
</a>
</div>
</div>
<div className="pointer-events-auto flex flex-col w-full last:pb-16">
<a
href="/prologue"
className="text-black no-underline cursor-pointer flex mt-[18px] mb-4 font-suisse text-[15px] sm:text-lg font-bold leading-6"
>
3. Popular Synths
<button className="box-content h-6 clear-button-styles rounded-full p-0 border border-solid border-gray-300 ml-3 hover:bg-gray-50">
<img width="24" height="24" src={jumpSvg} />
</button>
</a>
<div className="flex flex-col w-full border border border-gray-300 rounded-xl">
<a
href="/prologue"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
The Tim Ferriss Show - #660: Dr. Andrew Huberman - The
Foundations of Physical and Mental Performance...
</a>
<a
href="/microhistory-and-macrohistory"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Microhistory and Macrohistory
</a>
<a
href="/political-power-and-technological-truth"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Bitcoin - A Peer to Peer Electronic Cash System
</a>
<a
href="/god-state-network"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
God, State, Network
</a>
<a
href="/people-of-god-people-of-the-state-people-of-the-network"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
People of God, People of the State, People of the
Network
</a>
<a
href="/if-the-news-is-fake-imagine-history"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
If the News is Fake, Imagine History
</a>
<a
href="/fragmentation-frontier-fourth-turning-future-is-our-past"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Fragmentation, Frontier, Fourth Turning, Future Is Our
Past
</a>
<a
href="/left-is-the-new-right-is-the-new-left"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
Left is the New Right is the New Left
</a>
<a
href="/the-one-commandment"
className="text-black no-underline cursor-pointer flex flex-row items-center font-inter text-sm box-border w-full py-2 px-3 m-0 border-b border-gray-300 last:border-none first:rounded-t-xl last:rounded-b-xl hover:bg-gray-50 active:bg-gray-100"
>
<button className="clear-button-styles rounded-full p-0 border border-solid border-gray-300 mr-4">
<img width="24" height="24" src={jumpSvg} />
</button>
The One Commandment
</a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
);
};
export default HomePage;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment