Skip to content

Commit

Permalink
updates with faq
Browse files Browse the repository at this point in the history
  • Loading branch information
FlacoJones committed Aug 3, 2023
2 parents 46a1db9 + bcdf523 commit baeb617
Show file tree
Hide file tree
Showing 17 changed files with 313 additions and 58 deletions.
2 changes: 1 addition & 1 deletion components/Explore/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Header() {
<header className='flex justify-between items-center max-w-screen-2xl mx-auto lg:pt-8 lg:pb-6 px-4 md:px-12 lg:px-24 relative z-0 md:min-h-[590px]'>
<div className='lg:pr-10 z-10'>
<Link href='https://medium.com/openqdev/introducing-openq-on-polygon-1b096f74e949' target='_blank'>
<div className='flex items-center bg-dark-4 bg-opacity-70 border border-gray-600 rounded-md sm:rounded-full px-3 md:px-6 py-2 mt-8 max-w-2xl'>
<div className='flex invisible items-center bg-dark-4 bg-opacity-70 border border-gray-600 rounded-md sm:rounded-full px-3 md:px-6 py-2 mt-8 max-w-2xl'>
<Image src='/explore/LOGO_colorful.png' width={35} height={34} alt='OpenQ Logo' className='mr-3 shrink-0' />
<div>
<div className='font-bold text-[13px]'>Introducing OpenQ: Launching Hackathons & Building the Future</div>
Expand Down
2 changes: 1 addition & 1 deletion components/Sales/ProductOverview.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const ProductOverview = () => {
</div>
<div className='flex flex-row space-x-2 justify-center pt-12 pb-24 items-center hover:scale-105'>
<p className='text-center text-black text-xl lg:text-2xl font-medium'>
Unearth more of our ungoing or future concepts
Unearth more of our ongoing or future concepts
</p>
<svg
xmlns='http://www.w3.org/2000/svg'
Expand Down
25 changes: 15 additions & 10 deletions components/Sales/drm/base/animateIn.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
import React, { useCallback } from 'react';

const AnimateIn = ({ children, direction }) => {
const AnimateIn = ({ children, direction, delay = 0, margin = '0px' }) => {
const animateable = useCallback((node) => {
if (node !== null) {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add(`animate-fade-in-${direction}`);
} else {
entry.target.classList.remove(`animate-fade-in-${direction}`);
}
});
});
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
setTimeout(() => {
entry.target.classList.add(`animate-fade-in-${direction}`);
}, delay);
} else {
entry.target.classList.remove(`animate-fade-in-${direction}`);
}
});
},
{ rootMargin: margin }
);
observer.observe(node);
}
}, []);
Expand Down
8 changes: 4 additions & 4 deletions components/Sales/drm/landing-hero.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { ChevronRightIcon } from '@primer/octicons-react';

export default function Header() {
return (
<header className='flex flex-col sm:flex-row md:pb-60 lg:pb-28 pb-20 justify-between items-center max-w-screen-2xl mx-auto lg:pt-16 px-4 md:px-12 lg:px-24 relative z-0 md:min-h-[590px]'>
<header className='flex flex-col sm:flex-row md:pb-28 pb-8 justify-between items-center max-w-screen-2xl mx-auto lg:pt-16 md:px-12 lg:px-24 relative z-0 md:min-h-[590px]'>
<div className='lg:pr-10 z-10'>
<Link href='https://medium.com/openqdev/introducing-openq-on-polygon-1b096f74e949' target='_blank'>
<Link href='/blog/drm-launch' target='_blank'>
<div className='flex items-center bg-dark-4 bg-opacity-70 border border-gray-600 rounded-full sm:rounded-full px-3 md:px-6 py-2 mt-10 w-fit'>
<Image src='/explore/LOGO_colorful.png' width={35} height={34} alt='OpenQ Logo' className='mr-3 shrink-0' />
<div>
Expand All @@ -20,9 +20,9 @@ export default function Header() {
</div>
</Link>
<h1 className='text-left sm:text-center mt-10 text-4xl md:text-left md:leading-tight md:text-5xl lg:w-[44rem]'>
Orchestrating the global symphony of developers, code and dev rel
Orchestrating the global symphony of developers, code and <span className='whitespace-nowrap'>dev rel</span>
</h1>
<p className='text-left sm:text-center max-w-md mx-auto md:mx-0 text-zinc-400 mb-5 text-xl md:text-3xl md:max-w-xl md:text-left mt-5'>
<p className='text-left sm:text-center max-w-md w-full sm:mx-auto md:mx-0 text-zinc-400 mb-5 text-xl md:text-3xl md:max-w-xl md:text-left mt-5'>
Building powerful infrastructure around developers hubs for growth and innovation.
</p>
</div>
Expand Down
252 changes: 252 additions & 0 deletions components/Sales/drm/step-three-content.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
import React from 'react';
import AnimateIn from './base/animateIn';

const StepThreeContent = () => {
return (
<div className='flex h-full flex-1 flex-col text-black'>
<div className='flex gap-4 border-b'>
<div className='flex-1 border-b-2 py-3 focus:outline-none border-gray-600 bg-white'>
<div className='flex gap-4'>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth='1.5'
stroke='currentColor'
aria-hidden='true'
className=' h-5 w-5 stroke-current'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'
></path>
</svg>
Overview
</div>
</div>
<div className='flex-1 border-b-2 py-3 focus:outline-none border-transparent hover:bg-white/[0.12]'>
<div className='flex gap-4'>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth='1.5'
stroke='currentColor'
aria-hidden='true'
className=' h-5 w-5 stroke-current'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z'
></path>
</svg>
<span className='hidden sm:inline'>Commit Activity</span>
<span className='sm:hidden inline'>Commits</span>
</div>
</div>
<div className='flex-1 hidden xl:block border-b-2 py-3 focus:outline-none border-transparent hover:bg-white/[0.12]'>
<div className='flex gap-4'>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth='1.5'
stroke='currentColor'
aria-hidden='true'
className=' h-5 w-5 stroke-current'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25'
></path>
</svg>
Dependencies
</div>
</div>
<div className='flex-1 hidden 2xl:block border-b-2 py-3 focus:outline-none border-transparent hover:bg-white/[0.12]'>
<div className='flex gap-4'>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth='1.5'
stroke='currentColor'
aria-hidden='true'
className=' h-5 w-5 stroke-current'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z'
></path>
</svg>
Contributors
</div>
</div>
</div>
<div className='mt-8 flex grow flex-col overflow-y-auto rounded-t-lg border-x border-t bg-gray-100'>
<div className='flex grow flex-col focus:outline-none'>
<div className='flex space-x-1 bg-white'>
<div className='w-full py-3 text-center font-semibold focus:outline-none bg-offwhite'>
<div>Activity</div>
</div>
<div className='w-full py-3 text-center font-semibold focus:outline-none text-muted hover:bg-white/[0.12]'>
<div>Notes</div>
</div>
<div className='w-full py-3 text-center font-semibold focus:outline-none text-muted hover:bg-white/[0.12]'>
<div>Emails</div>
</div>
<div className='w-full hidden sm:block max-w-[25%] py-3 text-center font-semibold focus:outline-none text-muted hover:bg-white/[0.12]'>
<div>Logs</div>
</div>
</div>
<div className='w-full px-8 py-6 focus:outline-none overflow-hidden'>
<div className='flex flex-col gap-y-8'>
August 2023
<AnimateIn delay={750} direction={'left'}>
<div className='rounded-lg border border-divider bg-white p-6'>
<div className=' items-start'>
<div className='flex gap-2 content-center items-center'>
<svg
aria-hidden='true'
focusable='false'
role='img'
className=' h-5 w-5 stroke-current text-[rgb(83,_59,_237)]'
viewBox='0 0 16 16'
width='16'
height='16'
fill='currentColor'
style={{
display: 'inline-block',
userSelect: 'none',
verticalAlign: 'text-bottom',
overflow: 'visible',
}}
>
<path d='M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z'></path>
</svg>
<strong>Note</strong>
<div>by Christopher</div>
</div>
<div
style={{
position: 'fixed',
top: '1px',
left: '1px',
width: '1px',
height: '0px',
padding: '0px',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0px, 0px, 0px, 0px)',
whiteSpace: 'nowrap',
borderWidth: '0px',
display: 'none',
}}
></div>
</div>
<div className='mt-4 whitespace-pre-wrap'>
Invite team to hackathon next month and send form to get feedback on documentation.
</div>
</div>
</AnimateIn>
<AnimateIn margin='300px' delay={1500} direction={'left'}>
<div className='rounded-lg border border-divider bg-white p-6'>
<div className=' items-start gap-2'>
<div className='flex gap-2 content-center items-center'>
<svg
aria-hidden='true'
focusable='false'
role='img'
className=' h-5 w-5 stroke-current text-[rgb(83,_59,_237)]'
viewBox='0 0 16 16'
width='16'
height='16'
fill='currentColor'
style={{
display: 'inline-block',
userSelect: 'none',
verticalAlign: 'text-bottom',
overflow: 'visible',
}}
>
<path d='M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z'></path>
</svg>
<strong>Email</strong>
<div>from [email protected]</div>
</div>
<div className='flex justify-between'>
<div>
<div>to: [email protected]</div>
</div>
</div>
<div className='py-4'>
<strong>Hackathon Followup</strong>
</div>
<div
style={{
position: 'fixed',
top: '1px',
left: '1px',
width: '1px',
height: '0px',
padding: '0px',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0px, 0px, 0px, 0px)',
whiteSpace: 'nowrap',
borderWidth: '0px',
display: 'none',
}}
></div>
</div>
<div className=' whitespace-pre-wrap'>
Hey Jane, thanks for participation at our last event we are very happy to see that you are
continuing to develop your project. Feel free to join our next hackathon to further refine your idea
and please take a look at these questions if you have some time to give us feedback 🙏
<br />
<br />
All the best, Chris
</div>
</div>
</AnimateIn>
<div className='flex'>
<div className=' rounded-r-none bg-offwhite text-muted'>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth='1.5'
stroke='currentColor'
aria-hidden='true'
className=' h-5 w-5 stroke-current'
>
<path strokeLinecap='round' strokeLinejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5'></path>
</svg>
</div>
<div className='h-min rounded-full border-divider bg-vlight px-2 py-0.5 text-sm'>1</div>
<div className=' rounded-l-none bg-offwhite text-muted'>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth='1.5'
stroke='currentColor'
aria-hidden='true'
className=' h-5 w-5 stroke-current'
>
<path strokeLinecap='round' strokeLinejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default StepThreeContent;
12 changes: 3 additions & 9 deletions components/Sales/drm/step-three.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import Image from 'next/image';
import Heading from './base/heading';
import Paragraph from './base/paragraph';
import StepThreeContent from './step-three-content';

const StepThree = () => {
return (
Expand All @@ -14,14 +14,8 @@ const StepThree = () => {
syndrome
</Paragraph>
</div>
<div className='relative w-full sm:p-4 grow max-w-[800px] rounded-sm lg:rounded-lg border border-gray-300 overflow-hidden'>
<Image
className='top-0 left-0 w-full h-full object-cover'
src='/landingpage/drm/devrel/devrel-landingpage-image-5.png'
alt='Centered Image'
width={879}
height={693}
/>
<div className='relative w-full p-4 pt-2 grow max-w-[800px] rounded-sm lg:rounded-lg border border-gray-300 overflow-hidden'>
<StepThreeContent />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/Sales/home/BenefitsSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { ChevronRightIcon } from '@primer/octicons-react';
const BenefitsSection = () => {
return (
<>
<div className='pt-32 md:pt-44 flex flex-col gap-8 items-center'>
<div className=' md:pt-44 pt-8 flex flex-col gap-8 items-center'>
<div className='text-left lg:text-center max-w-[900px] font-bold text-[42px] leading-tight'>
Unlock the power of OpenQ
</div>
Expand Down
7 changes: 3 additions & 4 deletions components/Sales/home/ProductSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import ProductCard from './ProductCard';
const ProductSection = () => {
return (
<div className='w-full flex flex-col items-center content-center '>
<div className=' text-xl md:text-2xl text-zinc-400'>Our products</div>
<div className='md:pb-20 pb-24 text-center max-w-[1500px] font-bold text-[42px] leading-tight text-2xl md:leading-tight md:text-[42px]'>
<div className=' text-xl text-left sm:text-center md:text-2xl sm:w-auto: w-full text-zinc-400'>Our products</div>
<div className='md:pb-20 pb-8 text-left sm:w-auto: w-full sm:text-center max-w-[1500px] font-bold text-[42px] leading-tight text-2xl md:leading-tight md:text-[42px]'>
<span
style={{
background: 'linear-gradient(90deg, #EFCEFF, #A481FF, #4768FF)',
Expand All @@ -15,8 +15,7 @@ const ProductSection = () => {
className='md:text-[#533AED] md:block block '
>
Supercharge collaboration
</span>{' '}
<span className='hidden md:hidden'>Products</span>
</span>
</div>

<div className='grid xl:grid-cols-3 grid-cols gap-8 justify-center gap'>
Expand Down
1 change: 1 addition & 0 deletions components/animations/LeftAnim.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useEffect } from 'react';
export default function UpperAnim() {
return (
<object
className='w-[528px] h-[209px]'
data='/left_animation.svg'
style={{
width: '528px', // set the width
Expand Down
Loading

0 comments on commit baeb617

Please sign in to comment.