Skip to content

Commit

Permalink
Merge pull request #398 from dyte-io/ph_banner_txt_update
Browse files Browse the repository at this point in the history 
Ph banner txt update
  • Loading branch information
@vaibhavshn
vaibhavshn authored Oct 17, 2024
2 parents 663da32 + 6906437 commit 3a30149
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 28 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',
'border-secondary-700 bg-secondary-900 hover:!border-primary dark:border-secondary-800 w-[90vw] sm:w-[440px]'
'w-[90vw] border-secondary-700 bg-secondary-900 hover:!border-primary dark:border-secondary-800 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 w-full max-w-6xl flex gap-6 px-4 flex-wrap justify-center">
<section className="mx-auto flex w-full max-w-6xl flex-wrap justify-center gap-6 px-4">
{PRODUCTS.map((product) => (
<HeroProduct {...product} key={product.title} />
))}
Expand Down
46 changes: 46 additions & 0 deletions src/components/homepage/PhHelloBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react';
import Link from '@docusaurus/Link';
import {
AppsAddInRegular,
ArrowRightFilled,
DocumentRegular,
OpenRegular,
RecordRegular,
VideoRegular,
} from '@fluentui/react-icons';
import clsx from 'clsx';
import { ChevronRight, GitHub } from 'react-feather';

function HelloBar() {
return (
<a
href="https://www.producthunt.com/posts/feta"
target="_blank"
className="hello-bar u-hflex-center-center w-inline-block"
>
<div className="hello_bar_contents u-hflex-center-center u-gap-10">
<div className="ph_cat_nd_txt-wrapper u-hflex-left-center u-gap-10">
<img
src="https://cdn.prod.website-files.com/66323b0d8cbb65b15bf8550c/6703f2188ab1ea055e35b760_ph_cat.png"
loading="lazy"
alt=""
className="ph_cat"
/>
<div className="ph_banner_txt">We are live on ProductHunt🎉</div>
</div>
<div className="banner_separator"></div>
<div className="hello_bar_cta u-hflex-left-center u-gap-8">
<div className="text-block-98">Subscribe &amp; Get 3 Months Free</div>
<img
src="https://cdn.prod.website-files.com/66323b0d8cbb65b15bf8550c/6703f48cc2268f2ff727de7b_Arrow%20Down%20Left.png"
loading="lazy"
alt=""
className="image-213"
/>
</div>
</div>
</a>
);
}

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

@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 @@ -1240,10 +1244,9 @@ html[data-theme='dark'] .video_sidebar_header > div > a::before {
}

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


.table-of-contents .header-tag {
@apply mt-0 rounded-sm py-0.5 text-[0.5rem];
}
Expand Down Expand Up @@ -1362,7 +1365,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 @@ -1376,37 +1379,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-text-400 border-[10px];
@apply border-[10px] border-text-400;
overflow: scroll;
border-radius: 36px;
}
.row {
@apply h-full relative;
@apply relative h-full;
}

.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 text-xs bg-blue-600 text-white p-1.5 rounded-md;
@apply rounded-md bg-blue-600 p-1.5 text-xs text-white;
&:hover {
@apply bg-blue-500 cursor-pointer;
@apply cursor-pointer bg-blue-500;
}
}
.large-phone .simulator {
Expand All @@ -1415,28 +1418,142 @@ 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 bg-secondary-700 px-2 py-1 rounded-md text-xs;
content: 'By module';
@apply relative -top-3 rounded-md bg-secondary-700 px-2 py-1 text-xs;
}

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

.warning_icon {
@apply w-10 h-10 inline-block text-red-500 -mt-2;
}
@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*/
13 changes: 9 additions & 4 deletions src/pages/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ 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 @@ -23,16 +24,20 @@ export default function Homepage() {
<link rel="prefetch" href="/assets/css/elements.min.css" />
</Head>
<div>
<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{' '}
<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{' '}
<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 3a30149

Please sign in to comment.