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

Jump to bottom

revert: "Added a banner for PH launch" #395

Closed
wants to merge 1 commit into from
Closed

revert: "Added a banner for PH launch" #395

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
8 changes: 4 additions & 4 deletions src/components/homepage/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import Link from '@docusaurus/Link';
import {
ChatMultipleRegular,

Check warning on line 4 in src/components/homepage/HeroSection.tsx

View workflow job for this annotation

GitHub Actions / lint 

'ChatMultipleRegular' is defined but never used
LiveRegular,
MicRegular,
VideoRegular,
Expand Down Expand Up @@ -33,7 +33,7 @@
lightImage: '/static/landing-page/hero/livestream-graphic.png',
darkImage: '/static/landing-page/hero/livestream-graphic-dark.png',
text: 'Integrate highly scalable live video broadcasting capabilities into your app, ideal for apps that involve streaming webinars, sports or live events',
},
}
];

function HeroProduct({
Expand All @@ -53,7 +53,7 @@
}}
className={clsx(
'group cursor-pointer overflow-clip rounded-3xl from-primary/30 via-transparent to-transparent text-black transition-all hover:bg-gradient-to-tr hover:text-primary hover:no-underline dark:text-white',
'w-[90vw] border-secondary-700 bg-secondary-900 hover:!border-primary dark:border-secondary-800 sm:w-[440px]'
'border-secondary-700 bg-secondary-900 hover:!border-primary dark:border-secondary-800 w-[90vw] sm:w-[440px]'
)}
>
<div className="p-6 !pb-0">
Expand All @@ -80,7 +80,7 @@

export default function HeroSection() {
return (
<div className="noise-bg pb-14">
<div className='noise-bg pb-14'>
<section className="no-underline-links px-4 pt-16 lg:py-0">
<div className="flex flex-col items-center justify-between py-14">
<h2 className="mb-4 font-jakarta text-5xl font-bold">
Expand All @@ -95,7 +95,7 @@
</div>
</section>

<section className="mx-auto flex w-full max-w-6xl flex-wrap justify-center gap-6 px-4">
<section className="mx-auto w-full max-w-6xl flex gap-6 px-4 flex-wrap justify-center">
{PRODUCTS.map((product) => (
<HeroProduct {...product} key={product.title} />
))}
Expand Down
48 changes: 0 additions & 48 deletions src/components/homepage/PhHelloBar.jsx
View file
Open in desktop

This file was deleted.

157 changes: 20 additions & 137 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,8 @@

@layer components {
.noise-bg {
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6)
),
url('/static/landing-page/grid-light.svg');
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,
rgba(255,255,255,0.6)), url('/static/landing-page/grid-light.svg');
}

html[data-theme='dark'] .noise-bg {
Expand Down Expand Up @@ -1244,9 +1240,10 @@ html[data-theme='dark'] .video_sidebar_header > div > a::before {
}

.tag-orange {
@apply rounded-md bg-orange-500 py-0.5 px-1 text-sm font-semibold text-white/95;
@apply bg-orange-500 text-white/95 text-sm rounded-md py-0.5 px-1 font-semibold;
}


.table-of-contents .header-tag {
@apply mt-0 rounded-sm py-0.5 text-[0.5rem];
}
Expand Down Expand Up @@ -1365,7 +1362,7 @@ h2.anchor > code {
.interactive-onboarding div.container {
max-width: unset !important;
margin: 0;
padding: 0 !important;
padding:0 !important;
}
.interactive-onboarding footer {
display: none;
Expand All @@ -1379,37 +1376,37 @@ h2.anchor > code {
.theme-doc-markdown {
margin-top: 0px;
}
.theme-doc-breadcrumbs {
.theme-doc-breadcrumbs{
display: none;
}
.simulator {
width: 250px;
height: 450px;
margin: auto;
@apply border-[10px] border-text-400;
@apply border-text-400 border-[10px];
overflow: scroll;
border-radius: 36px;
}
.row {
@apply relative h-full;
@apply h-full relative;
}

.simulator {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.simulator::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}

.simulator .book-now {
@apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-3 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:bg-gray-400;
}

.btn {
@apply rounded-md bg-blue-600 p-1.5 text-xs text-white;
@apply text-xs bg-blue-600 text-white p-1.5 rounded-md;
&:hover {
@apply cursor-pointer bg-blue-500;
@apply bg-blue-500 cursor-pointer;
}
}
.large-phone .simulator {
Expand All @@ -1418,142 +1415,28 @@ h2.anchor > code {
}
}

h2.anchor,
h3.anchor {
h2.anchor, h3.anchor {
text-wrap: nowrap;
}

h2.anchor > code,
h3.anchor > code {
h2.anchor > code, h3.anchor > code {
@apply mx-2;
}


.pre-call-docs {
@apply mb-3;
}

.module-seperation::before {
content: 'By module';
@apply relative -top-3 rounded-md bg-secondary-700 px-2 py-1 text-xs;
content: "By module";
@apply relative -top-3 bg-secondary-700 px-2 py-1 rounded-md text-xs;
}

.module-seperation {
@apply border-t;
}

.warning_icon {
@apply -mt-2 inline-block h-10 w-10 text-red-500;
}

/* CSS for hello bar*/
.hello-bar {
background-color: #212329;
background-image: linear-gradient(#0003, #0003);
padding-top: 12px;
padding-bottom: 12px;
}

.u-hflex-center-center {
justify-content: center;
align-items: center;
display: flex;
}

.u-gap-10 {
grid-column-gap: 10px;
grid-row-gap: 10px;
display: flex;
}

.u-hflex-center-center {
justify-content: center;
align-items: center;
display: flex;
}

.u-hflex-left-center {
flex-flow: wrap;
align-items: center;
display: flex;
}

.ph_cat {
width: 28px;
height: auto;
}
.ph_banner_txt {
color: #fff;
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
}

.banner_separator {
background-color: #fff;
width: 1px;
height: 20px;
}

.hello_bar_cta {
background-color: #fff;
border-radius: 6px;
padding: 6px 12px 6px 14px;
}

.u-gap-8 {
grid-column-gap: 8px;
grid-row-gap: 8px;
}

.u-hflex-left-center {
flex-flow: wrap;
align-items: center;
display: flex;
}

.text-block-98 {
color: #1a1c21;
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
}

.image-213 {
width: 16px;
height: 16px;
}

/*FOR MOBILE SCREEN SIZE*/
@media screen and (max-width: 767px) {
.hello_bar_contents.u-hflex-center-center.u-gap-10 {
flex-flow: column;
flex: 1;
}

.hello-bar.u-hflex-center-center {
padding: 8px 11px;
}

.ph_cat_nd_txt-wrapper.u-hflex-left-center.u-gap-10 {
flex-flow: row;
}

.ph_banner_txt {
font-size: 14px;
line-height: 1.3;
}

.banner_separator {
display: none;
}

.hello_bar_cta.u-hflex-left-center.u-gap-8 {
justify-content: center;
align-self: stretch;
align-items: center;
}
}

/* CSS for hello bar ends*/
@apply w-10 h-10 inline-block text-red-500 -mt-2;
}
13 changes: 4 additions & 9 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';

Check warning on line 1 in src/pages/index.jsx

View workflow job for this annotation

GitHub Actions / lint 

'useState' is defined but never used
import Layout from '@theme/Layout';

import HeroSection from '../components/homepage/HeroSection';
Expand All @@ -11,7 +11,6 @@
import GuidesAndSamples from '../components/homepage/GuidesAndSamples';
import SDKs from '../components/homepage/SDKs';
import Link from '@docusaurus/Link';
import PhHelloBar from '../components/homepage/phHelloBar';

export default function Homepage() {
return (
Expand All @@ -24,20 +23,16 @@
<link rel="prefetch" href="/assets/css/elements.min.css" />
</Head>
<div>
<PhHelloBar />

{/* Code for Twilio credits banner */}

{/* <div className="w-full bg-gradient-to-r from-blue-500 to-red-500 p-4 text-center font-medium text-white">
Affected by Twilio Video Sunsetting? Migrate to Dyte and get upto
$30,000 Credits{' '}
<div className="w-full bg-gradient-to-r from-blue-500 to-red-500 p-4 text-center font-medium text-white">
Affected by Twilio Video Sunsetting? Migrate to Dyte and get upto $30,000
Credits{' '}
<Link
to="https://dyte.io/twilio-video-competitor"
className="text-white underline"
>
Learn more
</Link>
</div> */}
</div>
</div>

<HeroSection />
Expand Down
Loading