Skip to content

Commit

Permalink
feat: design updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@vaibhavshn
vaibhavshn committed Oct 26, 2022
1 parent 068c85b commit 8400706
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 24 deletions.
17 changes: 13 additions & 4 deletions src/components/homepage/ResourcesSection.jsx
View file
Expand Up @@ -5,7 +5,7 @@ import RESOURCES from '../../resources';
export default function ResourcesSection() {
return (
<section className="px-6 my-20">
<div className="mx-auto max-w-7xl">
<div className="mx-auto max-w-5xl">
<span className="dyte-badge">RESOURCES</span>
<h2 className="lg:text-3xl">Want to know more?</h2>
<p className="text-text-400">
Expand All @@ -14,21 +14,21 @@ export default function ResourcesSection() {
Can&apos;t find what you&apos;re looking for?
</p>

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mt-10">
<div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3 mt-10">
{RESOURCES.map((resource) => (
<div key={resource.title} className="flex flex-col justify-between">
<div>
<img
src={resource.image}
className="mb-3 aspect-video rounded-lg"
className="mb-3 aspect-square rounded-lg"
/>
<h3 className="lg:text-xl font-semibold">
<Link href={resource.url} className="text-inherit">{resource.title}</Link>
</h3>
<p className="text-text-400 leading-snug">{resource.description}</p>
</div>
<div className="flex items-center justify-between mt-4">
<div className="rounded-sm bg-primary/20 text-primary px-4 py-1">{resource.type}</div>
<div className="rounded-sm bg-primary/20 text-primary px-3 py-1 text-sm">{resource.type}</div>
<div className="text-text-400/60">
{`${resource.duration} ${
resource.type === 'Video' ? 'watch' : 'read'
Expand All @@ -38,6 +38,15 @@ export default function ResourcesSection() {
</div>
))}
</div>

<div className="text-center flex items-center flex-wrap my-20 justify-center gap-3">
<span>View All</span>
<div className="flex gap-2">
<Link className="underline underline-offset-8" href="/guides">Guides</Link>
<Link className="underline underline-offset-8" href="https://www.youtube.com/channel/UCUBSgG-Tk6w7Pe9loUR3yhw">Videos</Link>
<Link className="underline underline-offset-8" href="https://dyte.io/blog" target="_blank">Blogs</Link>
</div>
</div>
</div>
</section>
);
Expand Down
89 changes: 70 additions & 19 deletions src/components/homepage/SDKsSection.jsx
View file
Expand Up @@ -14,6 +14,7 @@ import {
VueIcon,
} from '../../icons';
import Head from '@docusaurus/Head';
import { useState } from 'react';

function SDKLink({ href, Icon, label, disabled = false }) {
// yes, this is a weird way to do it :)
Expand All @@ -35,27 +36,36 @@ function SDKLink({ href, Icon, label, disabled = false }) {
);
}

const SECTIONS = ['web', 'mobile', 'plugin'];

export default function SDKsSection() {
const { colorMode } = useColorMode();
const [visibleSection, setVisibleSection] = useState('Web');

// useEffect(() => {
// const observer = new IntersectionObserver((entries) => {
// for (const entry of entries) {
// if (entry.isIntersecting) {
// entry.target.classList.add('intersected');
// }
// }
// });
React.useEffect(() => {
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const section = entry.target.getAttribute('data-section');
if (entry.isIntersecting) {
entry.target.classList.add('intersected');
setVisibleSection(section);
} else {
if (section !== 'web') {
setVisibleSection(SECTIONS[SECTIONS.indexOf(section) - 1]);
}
}
}
});

// const elements = document.querySelectorAll('.sdk-section');
// for (const el of elements) {
// observer.observe(el);
// }
const elements = document.querySelectorAll('.sdk-section');
for (const el of elements) {
observer.observe(el);
}

// return () => {
// observer.disconnect();
// };
// }, []);
return () => {
observer.disconnect();
};
}, []);

return (
<section className="py-20 px-4" id="start-building">
Expand All @@ -65,9 +75,43 @@ export default function SDKsSection() {
</Head>
<div className="mx-auto max-w-7xl">
<div className="dyte-badge mb-4">SDKs</div>
<h2 className="mb-20 font-jakarta text-3xl">
We support your tech stack!
</h2>

<div className="sticky top-14 mb-20 flex flex-col items-center gap-12 bg-secondary-1000 lg:flex-row lg:justify-between">
<h2 className="my-0 font-jakarta text-3xl">
We support your tech stack!
</h2>
<div className="mx-auto flex h-20 w-full flex-1 items-center justify-center self-start lg:w-auto lg:justify-end">
<div className="flex max-w-sm flex-1 items-center rounded-full border border-solid border-text-400">
<div
className={clsx(
'flex-1 py-1 text-center',
visibleSection === 'web' &&
'rounded-full border-2 border-solid'
)}
>
Web
</div>
<div
className={clsx(
'flex-1 py-1 text-center',
visibleSection === 'mobile' &&
'rounded-full border-2 border-solid'
)}
>
Mobile
</div>
<div
className={clsx(
'flex-1 py-1 text-center',
visibleSection === 'plugin' &&
'rounded-full border-2 border-solid'
)}
>
Plugin
</div>
</div>
</div>
</div>

<div
className="sdk-section mb-16 flex flex-col rounded-3xl bg-secondary-900 lg:flex-row"
Expand Down Expand Up @@ -296,6 +340,13 @@ export default function SDKsSection() {
</div>
</div>
</div> */}

<div className="text-center">
<p>
Don&apos;t see your tech stack here?{' '}
<Link href="#">Contact Us</Link>
</p>
</div>
</div>
</section>
);
Expand Down
36 changes: 35 additions & 1 deletion src/css/custom.css
View file
Expand Up @@ -360,8 +360,13 @@ nav.menu {
.dev-portal-link {
background-color: theme('colors.primary.200');
border-radius: 4px;
margin-right: 12px;
transition-property: all;
padding: 0.25rem 0.75rem !important;
margin: 0 0.5rem;
}

.dev-portal-link:last-child {
margin-right: 0;
}

.dev-portal-link svg {
Expand Down Expand Up @@ -912,3 +917,32 @@ img[src$='#terminal'] {
@apply my-6 h-px w-full bg-zinc-200 dark:bg-zinc-800;
}
}

/* Search bar styling */

:root {
--docsearch-searchbox-background: #f5f5f7 !important;
--docsearch-key-gradient: #dcdcdc !important;
--docsearch-muted-color: rgb(47, 47, 47) !important;
--docsearch-text-color: rgb(47, 47, 47) !important;
--docsearch-key-shadow: none !important;
}

html[data-theme='dark'] {
--docsearch-searchbox-background: #2a2a2a !important;
--docsearch-key-gradient: #696969 !important;
--docsearch-muted-color: rgb(201, 201, 201) !important;
--docsearch-text-color: rgb(201, 201, 201) !important;
}

.DocSearch-Button {
@apply lg:min-w-[264px] lg:!rounded-md;
}

.DocSearch-Button-Keys {
@apply flex items-center justify-center;
}

.DocSearch-Button-Placeholder {
@apply !text-sm;
}

0 comments on commit 8400706

Please sign in to comment.