Merge pull request #1006 from tradingview/website-fixes

The landing page improvements
tradingview · Feb 11, 2022 · 16c814b · 16c814b
2 parents d3c15f5 + b785161
commit 16c814b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -54,12 +54,16 @@
 	--large-card-paragraph-text-color: var(--color-cold-gray-500);
 
 	--icon-color: var(--color-black);
-
-	--hero-button-text-color: var(--color-black);
-	--hero-button-hackground-color-hover: var(--color-cold-gray-100);
-	--hero-button-hackground-color-active: var(--color-cold-gray-150);
-	--hero-text-background-color: #ffffff;
+	--hero-icon-color: var(--color-black);
+
+	--hero-button-text-color: var(--color-cold-gray-900);
+	--hero-button-text-color-hover-active: var(--hero-button-text-color);
+	--hero-button-background-color-hover: var(--color-cold-gray-100);
+	--hero-button-background-color-active: var(--color-cold-gray-150);
+	--hero-text-background-color: var(--color-white);
+	--hero-text-large-background-color: var(--hero-text-background-color);
 	--hero-button-border-color: var(--color-cold-gray-150);
+	--hero-text-shadow-color: rgba(0, 0, 0, 0.2);
 
 	--footer-border-color: var(--color-cold-gray-150);
 	--footer-copyright-color: var(--color-cold-gray-500);
@@ -76,7 +80,7 @@
 html[data-theme=dark] {
 	--ifm-navbar-background-color: var(--color-black);
 	--ifm-footer-background-color: var(--color-black);
-	--ifm-background-color: var(--color-black);	
+	--ifm-background-color: var(--color-black);
 	--ifm-footer-link-color: var(--color-cold-gray-200);
 	--ifm-menu-color: var(--color-cold-gray-200);
 	--ifm-menu-color-background-hover: var(--color-cold-gray-800);
@@ -85,10 +89,14 @@ html[data-theme=dark] {
 	--large-card-background-color: var(--color-cold-gray-900);
 	--small-card-paragraph-color: var(--color-cold-gray-300);
 	--icon-color: var(--color-cold-gray-200);
+	--hero-icon-color: var(--color-white);
 	--hero-button-text-color: var(--color-cold-gray-200);
-	--hero-button-hackground-color-hover: var(--color-cold-gray-800);
-	--hero-button-hackground-color-active: var(--color-cold-gray-750);
-	--hero-text-background-color: var(--color-cold-gray-950);
+	--hero-button-text-color-hover-active: var(--color-white);
+	--hero-button-background-color-hover: var(--color-cold-gray-800);
+	--hero-button-background-color-active: var(--color-cold-gray-750);
+	--hero-text-background-color: var(--color-cold-gray-900);
+	--hero-text-large-background-color: var(--color-black);
+	--hero-text-shadow-color: rgba(0, 0, 0, 0.4);
 	--large-card-paragraph-text-color: var(--color-cold-gray-300);
 	--hero-button-border-color: var(--color-cold-gray-700);
 	--footer-border-color: var(--color-cold-gray-700);
@@ -203,10 +211,10 @@ html[data-theme=dark] .docusaurus-highlight-code-line {
 		--ifm-footer-padding-horizontal: 40px;
 	}
 
-	/** 
+	/**
 	 * Required to properly override docusaurus styles.
 	 * https://github.com/facebookincubator/infima/blob/c270e2cbdaf0659093ae7f6fbc8899430a0e9147/packages/core/styles/layout/grid.pcss#L51-L55
-	 */ 
+	 */
 	.row .col.col.col {
 		flex-basis: auto;
 	}

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -36,7 +36,7 @@
 	align-items: center;
 	text-align: center;
 	background: var(--hero-text-background-color);
-	padding: 56px 20px;
+	padding: 56px 14px;
 	width: 100%;
 }
 
@@ -45,11 +45,11 @@
 	line-height: 28px;
 	text-align: center;
 	margin: 0;
-	margin-top: 20px;
+	margin-top: 24px;
 }
 
 .HeroTextContainer svg {
-	color: var(--icon-color);
+	color: var(--hero-icon-color);
 }
 
 .HeroButtonsContainer {
@@ -74,12 +74,14 @@
 }
 
 .HeroButton:hover {
-	background: var(--hero-button-hackground-color-hover);
+	color: var(--hero-button-text-color-hover-active);
+	background: var(--hero-button-background-color-hover);
 	text-decoration: none;
 }
 
 .HeroButton:active {
-	background: var(--hero-button-hackground-color-active);
+	color: var(--hero-button-text-color-hover-active);
+	background: var(--hero-button-background-color-active);
 }
 
 .HeroButtonPrimary {
@@ -282,7 +284,7 @@
 		flex: 1 0 100%;
 		min-height: unset;
 	}
-	
+
 	.LargeCard h2 {
 		font-size: 28px;
 		font-style: normal;
@@ -347,13 +349,15 @@
 	}
 
 	.HeroTextContainer {
+		background: var(--hero-text-large-background-color);
 		position: absolute;
-		z-index: 1000;
+		z-index: 100;
 		top: 94px;
 		border-radius: 32px;
 		padding: 56px;
-		width: 840px;
-		height: 412px;
+		width: 724px;
+		height: 384px;
+		box-shadow: 0px 1px 4px var(--hero-text-shadow-color);
 	}
 
 	.HeroTextContainer p {
@@ -479,7 +483,7 @@
 		margin: auto;
 		margin-top: 80px;
 	}
-	
+
 	.LargeCard {
 		flex: 1 1 472px;
 		width: 472px;

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -30,7 +30,7 @@ const visibleLogicalRange = { from: 0.5, to: data.orangeData.length - 1.5 };
 
 function getLayoutOptionsForTheme(isDarkTheme: boolean): DeepPartial<LayoutOptions> {
 	return isDarkTheme
-		? { background: { color: '#0C0E15' }, textColor: 'rgba(248, 249, 253, 1)' }
+		? { background: { color: '#131722' }, textColor: 'rgba(248, 249, 253, 1)' }
 		: { background: { color: 'rgba(248, 249, 253, 1)' }, textColor: '#000000' };
 }
 
@@ -169,7 +169,7 @@ function Index(): JSX.Element {
 			<HeroChart />
 			<div className={styles.HeroTextContainer}>
 				<HeroLogo />
-				<p>Free, open-source and feature-rich. At just {size} kilobytes, the dream of lightweight interactive charts is now a reality.</p>
+				<p>Free, open-source and feature-rich interactive charts</p>
 				<div className={styles.HeroButtonsContainer}>
 					<a className={[styles.HeroButton, styles.HeroButtonPrimary].join(' ')} href="docs">Get Started</a>
 					<a className={styles.HeroButton} href="docs/api">API Reference</a>
@@ -178,7 +178,7 @@ function Index(): JSX.Element {
 		</div>
 		<div className={styles.BelowChartContainer}>
 			<div className={styles.LargeTextContainer}>
-				<h1>Fully customizable & free charts that don&apos;t contain hidden ads</h1>
+				<h1>Less is more</h1>
 				<div>Millions of websites still use static pictures for showing financial charts. The old way is not interactive and doesn&apos;t scale with various devices. Pictures always had a huge advantage of their small size and fast loading&nbsp;—&nbsp;but no more!</div>
 			</div>
 			<div className={styles.LargeCardContainer}>
@@ -217,7 +217,7 @@ function Index(): JSX.Element {
 				<div className={[styles.SmallCard, styles.SmallCard3].join(' ')}>
 					<InputSliders />
 					<h3>Open-source </h3>
-					<p>Fully customizable & free charts that don&apos;t contain hidden ads. Contributions are welcome!</p>
+					<p>Maintained by TradingView. Hosted on GitHub. Licensed under the Apache License, Version 2.0. Contributions welcome!</p>
 				</div>
 				<div className={[styles.SmallCard, styles.SmallCard4].join(' ')}>
 					<Shapes />