diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index 3730b48a2..5a9edfe51 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -2,6 +2,103 @@ import React, { FC } from 'react' import cn from 'classnames' +export const ThickX: FC<{ className?: string }> = ({ className }) => { + return ( + + + + ) +} + +export const Globe: FC<{ + className?: string + color: 'orange-vibrant' | 'brown-vibrant' | 'pink-vibrant' | 'neutral-1' +}> = ({ className, color }) => { + return ( + + + + ) +} + +export const Hexagon: FC<{ className?: string; color?: 'green' }> = ({ className, color = 'green' }) => { + return ( + + + + ) +} + +export const BookOpen: FC<{ className?: string; color?: 'accent-1' }> = ({ className, color = 'accent-1' }) => { + return ( + + + + ) +} + +export const ArrowRight: FC<{ + className?: string + color?: 'accent-1' +}> = ({ className, color = 'accent-1' }) => { + return ( + + + + ) +} + export const MiniUnicon: FC<{ className?: string color?: 'accent-1' | 'neutral-1' @@ -79,6 +176,54 @@ export const MiniUnicon: FC<{ ) } +export const Emblem1: FC<{ + className?: string + color?: 'accent-1' +}> = ({ className, color = 'accent-1' }) => { + return ( + + + + ) +} + +export const Emblem2: FC<{ + className?: string + color?: 'accent-1' +}> = ({ className, color = 'accent-1' }) => { + return ( + + + + ) +} + export const Github: FC<{ className?: string color?: 'neutral-2' @@ -187,6 +332,25 @@ export const Moon: FC<{ ) } +export const Npm: FC<{ className?: string }> = ({ className }) => { + return ( + + + + + + + ) +} + export const Edit: FC<{ className?: string color?: 'neutral-2' @@ -207,6 +371,25 @@ export const Edit: FC<{ ) } +export const HelpCircle: FC<{ + className?: string + color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant' +}> = ({ className, color = 'orange-vibrant' }) => { + return ( + + + + ) +} + export const Happy: FC<{ className?: string color?: 'neutral-2' @@ -254,6 +437,22 @@ export const Happy: FC<{ ) } +export const Chat: FC<{ + className?: string + color?: 'brown-vibrant' +}> = ({ className, color = 'brown-vibrant' }) => { + return ( + + + + ) +} + export const Neutral: FC<{ className?: string color?: 'neutral-2' @@ -301,6 +500,23 @@ export const Neutral: FC<{ ) } +export const Envelope: FC<{ + className?: string + color?: 'pink-vibrant' | 'neutral-2' +}> = ({ className, color = 'pink-vibrant' }) => { + return ( + + + + ) +} + export const Sad: FC<{ className?: string color?: 'neutral-2' diff --git a/src/components/NewsletterForm/index.tsx b/src/components/NewsletterForm/index.tsx new file mode 100644 index 000000000..fedf404ab --- /dev/null +++ b/src/components/NewsletterForm/index.tsx @@ -0,0 +1,89 @@ +import React, { useState } from 'react' +import { Envelope } from '../../components/Icons' +import cn from 'classnames' + +interface NewsletterFormProps { + headerText: string + headerTextClass?: string + globeColorClass: 'pink-vibrant' | 'neutral-2' + inputClass?: string +} + +const NewsletterForm: React.FC = ({ + headerText, + headerTextClass, + inputClass, + globeColorClass, +}) => { + const [emailInputValue, setEmailInputValue] = useState('') + const [isSubscribed, setIsSubscribed] = useState(false) + const [error, setError] = useState('') + + const handleSubscribe = async (e: React.FormEvent) => { + e.preventDefault() + + if (!emailInputValue) { + setError('Please provide a valid email address.') + return + } + + try { + // Replace '/some-api' with the actual API endpoint + const response = await fetch('/some-api', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ emailInputValue }), + }) + + if (response.ok) { + setIsSubscribed(true) + setError('') + } else { + const data = await response.json() + setError(data.message || 'Subscription failed. Please try again.') + } + } catch (err) { + setError('An error occurred. Please try again.') + } + } + + return ( + <> +

{headerText}

+
+
+
+ setEmailInputValue(e.target.value)} + /> + +
+ +
+
+ {!isSubscribed && error && ( +

{error}

+ )} + {isSubscribed && ( +

+ Successfully subscribed +

+ )} +
+
+ + ) +} + +export default NewsletterForm diff --git a/src/css/custom.css b/src/css/custom.css index 6d0bd7c64..76e68fd98 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -23,6 +23,14 @@ @apply grid grid-cols-4 gap-gap-large sm:grid-cols-8; } +.content-page-padding { + @apply p-6 pb-10 sm:p-12 sm:pt-6 md:px-10 md:pb-12; +} + +.divider { + @apply border-t border-light-surface-3 dark:border-dark-surface-3; +} + .breadcrumbs__link { @apply !text-light-neutral-1 dark:!text-dark-neutral-1 !bg-transparent !p-0 !body-3; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d4ef7ddc0..110047cfc 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,41 +1,47 @@ +import React, { FC } from 'react' + import Link from '@docusaurus/Link' -import useBaseUrl from '@docusaurus/useBaseUrl' -import Discord from '@site/static/img/discord.svg' -import GitHub from '@site/static/img/github.svg' -import Npm from '@site/static/img/npm.svg' -// import UGP from '@site/static/img/UGP.png' import Layout from '@theme/Layout' -import ThemedImage from '@theme/ThemedImage' -import { TraceEvent } from '@uniswap/analytics' -import { - BrowserEvent, - DocsHomepageElementName as ElementName, - DocsSectionName as SectionName, - SharedEventName, -} from '@uniswap/analytics-events' -import React from 'react' -import { ArrowUpRight as LinkIcon, BookOpen, HelpCircle, Info, MessageCircle } from 'react-feather' +import cn from 'classnames' +// eslint-disable-next-line +const UPG = require('../../static/img/UGP.png').default -import SearchBarWithAnalytics from '../theme/SearchBar' +import { + Emblem1, + Emblem2, + ThickX, + Hexagon, + BookOpen, + ArrowRight, + Github, + Npm, + HelpCircle, + Chat, + Globe, +} from '../components/Icons' +import NewsletterForm from '../components/NewsletterForm' export const actions = [ { - title: 'What is Uniswap', - icon: Info, + title: 'What is Uniswap?', + icon: 'book-open', to: '/concepts/overview', - text: `Learn about the core concepts of the Uniswap Protocol, Swaps, Pools, Concentrated Liquidity and more.`, + text: 'Learn about the core concepts of the Uniswap Protocol, Swaps, Pools, Liquidity, and more.', + color: 'pink', }, { - title: 'Integrate with Uniswap', - icon: HelpCircle, + title: 'Troubleshoot an issue', + icon: 'x', to: '/sdk/v3/overview', - text: `Learn how to integrate with Uniswap by building a dApp through guided examples.`, + text: 'Learn how to troubleshoot an issue.', + color: 'blue', }, { - title: 'The Uniswap smart contracts', - icon: BookOpen, + title: 'How to use Uniswap', + icon: 'hexagon', to: '/contracts/v3/overview', - text: `Learn about the architecture of the Uniswap Protocol smart contracts through guided examples.`, + text: 'Learn how to integrate with Uniswap by building a dApp.', + color: 'green', }, ] @@ -43,27 +49,27 @@ export const developerLinks = [ { title: 'uniswap-v3-core', href: 'https://github.com/Uniswap/uniswap-v3-core', - icon: GitHub, + icon: 'github', }, { title: 'uniswap-v3-sdk', href: 'https://github.com/Uniswap/uniswap-v3-sdk', - icon: GitHub, + icon: 'github', }, { title: 'uniswap-v3-periphery', href: 'https://github.com/Uniswap/uniswap-v3-periphery', - icon: GitHub, + icon: 'github', }, { title: 'Deployment addresses', href: 'https://github.com/Uniswap/uniswap-v3-periphery/blob/main/deploys.md', - icon: GitHub, + icon: 'github', }, { title: 'widgets', href: 'https://www.npmjs.com/package/@uniswap/widgets', - icon: Npm, + icon: 'npm', }, ] @@ -122,216 +128,247 @@ export const smartContractGuides = [ }, ] -export default function Home() { +const connectBlock = { + title: 'Connect with us', + supportTitle: 'Get Support', + supportButton: { + url: 'https://help.uniswap.org/', + name: 'Help center', + }, + socialTitle: 'Insights and news from the team', + socialButton: { + url: 'https://blog.uniswap.org/', + name: 'Help center', + }, + newsletterTitle: 'Sign up for research and updates from the Uniswap Labs team', +} + +const Home = () => { return ( - -
-
-
-

Welcome to Uniswap Docs

-
- -
-
- {/* */} -
- {actions.map((action) => ( - +
+
+

+ Build + + with + + Uniswap +

+

+ Dive into the world of DeFi apps, integrations, and developer tooling built on top of the Uniswap Protocol. +

+
+ +
+ {actions.map((action, i) => { + return ( + 0, + 'bg-light-accent-2 dark:bg-dark-accent-2': action.color === 'pink', + 'bg-light-blue dark:bg-dark-blue': action.color === 'blue', + 'bg-light-green dark:bg-dark-green': action.color === 'green', + })} > - -
-
-
- -
-
- +
+
+ {action.icon === 'book-open' ? ( +
+ + + Getting started +
-
-

{action.title}

-

{action.text}

+ ) : null} + {action.icon === 'x' ? : null} + {action.icon === 'hexagon' ? : null}
- - +
+

+ {action.title} +

+

{action.text}

+
+
+ + ) + })} +
+ +
+ +
+

Integrate your Smart Contracts

+
+ {dAppGuides.map((card) => ( + ))}
-
-
-

Integrate your dApp

-

Explore these guided tutorials to get started integrating with Uniswap in your dApp.

-
- {dAppGuides.map((action) => ( - - -
-
-
-

{action.title}

-
-
- -
-
-

{action.text}

-
- - - ))} -
+ +
+ +
+

Integrate your dApp

+
+ {smartContractGuides.map((card) => ( + + ))}
-
-

Integrate your smart contracts

-

Explore these guided tutorials to get started integrating with Uniswap in your smart contracts.

-
- {smartContractGuides.map((action) => ( - + +
+ +
+

Quick Links

+
+ {developerLinks.map((devLink) => { + return ( + - -
-
-
-

{action.title}

-
-
- -
-
-

{action.text}

-
- - - ))} -
+ <> + {devLink.icon === 'github' ? : null} + {devLink.icon === 'npm' ? : null} +

+ {devLink.title} +

+ + + ) + })}
-
-
- {/* */} -
-

Developer Links

- {developerLinks.map((action) => ( - - -
-
-
-
-
- -
-
- {action.title} -
-
- -
-
-
- - - ))} + +
+ +
+

{connectBlock.title}

+
+
+

+ {connectBlock.supportTitle} +

+ +
+
+

+ {connectBlock.socialTitle} +

+ +
+
+ +
-
-
- - -
- -
-

Discord

-

Join our Developer Community.

-
-
- - - - + +
+
+
- -
-

Forum

-

Discuss governance and more.

-
+

Uniswap Grants Program

+

+ Uniswap Governance offers grant funding for people who are building apps, tools, and activities for + Uniswap Protocol users, builders, and community members. +

- - - - -
-
- -
-
-

GitHub

-

View all Uniswap repositories.

-
+
+ + + + Learn more + +
- - -
- -
- {/* */} -
-

Uniswap Grants Program

-

- Uniswap Governance offers grant funding for people who are building apps, tools, and activities for - Uniswap Protocol users, builders, and community members.{' '} -

+
+
+
- +
) } + +export default Home + +const IconButton: FC<{ + href: string + ariaLabel?: string + label: string + color: 'orange-vibrant' | 'brown-vibrant' +}> = ({ href, label, color }) => { + return ( +
+ + {color === 'orange-vibrant' && } + {color === 'brown-vibrant' && } + + {label} + + +
+ ) +} + +const ArticleLinkCard: FC<{ + title: string + description: string + url: string +}> = ({ title, description, url }) => { + return ( + +
+

+ {title} +

+

{description}

+
+
+ +
+ + ) +} diff --git a/src/theme/Layout.tsx b/src/theme/Layout.tsx new file mode 100644 index 000000000..3845ef8f8 --- /dev/null +++ b/src/theme/Layout.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react' + +import LayoutProvider from '@theme/Layout/Provider' +import { PageMetadata } from '@docusaurus/theme-common' +import Navbar from '@theme/Navbar' +import Footer from '@theme/Footer' +import type { Props } from '@theme/Layout' + +const Layout: FC = ({ title, description, children }) => { + return ( + + + +
{children}
+