Skip to content

Commit

Permalink
Revert "Added a banner for PH launch"
Browse files Browse the repository at this point in the history
  • Loading branch information
@vaibhavshn
vaibhavshn authored Oct 9, 2024
1 parent fcb7516 commit 7377118
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 198 deletions.
8 changes: 4 additions & 4 deletions src/components/homepage/HeroSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const PRODUCTS = [
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 @@ function HeroProduct({
}}
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 @@ function HeroProduct({

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 @@ export default function HeroSection() {
</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

This file was deleted.

157 changes: 20 additions & 137 deletions src/css/custom.css
View file
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
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import Head from '@docusaurus/Head';
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 @@ export default function Homepage() {
<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

0 comments on commit 7377118

Please sign in to comment.