Skip to content

Commit

Permalink
website changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@webloopbox
webloopbox committed Oct 25, 2024
1 parent ab0fa91 commit 365f237
Show file tree
Hide file tree
Showing 10 changed files with 378 additions and 360 deletions.
6 changes: 3 additions & 3 deletions website/app/demo/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ const coreFeatures = [

export default function ExamplesPage() {
return (
<section>
<section className="flex-1">
<div className="grid grid-cols-main pt-12 md:pt-32 pb-[40px]">
<h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center p-4 bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent">
ReactGrid Demo
</h1>
<p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4">
<p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4 max-w-screen-2xl mx-auto">
ReactGrid enables you to create custom layouts with flexible cell
ordering. Unlike many React components and tools that require
consistent data structures across all rows, our component offers
Expand All @@ -100,7 +100,7 @@ export default function ExamplesPage() {
</div>
</div>
<div className="grid grid-cols-main pt-[80px] texture-bg-2">
<div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-16 mb-[128px] flex-col md:flex-row px-4">
<div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-16 mb-[128px] flex-col md:flex-row px-4 max-w-screen-2xl mx-auto">
<div className="flex-1">
<h2 className="text-green-primary font-bold text-sm">
What does the above example illustrate?
Expand Down
6 changes: 3 additions & 3 deletions website/app/support/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Shape1, Shape2 } from "@/components/bg-shapes";

export default function FeaturesPage() {
return (
<div className="z-1">
<div className="z-1 flex-1">
<>
<div
className={`absolute z-0 w-[100%] top-[-10%] left-[-50%] hidden lg:block`}
Expand All @@ -20,7 +20,7 @@ export default function FeaturesPage() {
</div>
</>

<section className="relative texture-bg-2 z-2">
<section className="relative h-full texture-bg-2 z-2">
<div className="grid grid-cols-main grid-rows-2 pt-12 md:pt-32 md:pb-12">
<h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent px-4">
Need support?
Expand All @@ -30,7 +30,7 @@ export default function FeaturesPage() {
help.
</p>
</div>
<div className="grid grid-cols-main md:pb-[250px] pt-8 md:pt-0">
<div className="grid grid-cols-main md:pb-[250px] pt-8 md:pt-0 max-w-screen-3xl mx-auto">
<div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-4 2xl:gap-x-16 mb-[128px] justify-center flex-col md:flex-row px-4">
<div className="flex-1 flex flex-col items-center justify-start bg-[#ffffff3d] border p-4">
<MdQuestionMark size={120} color="#107c41" />
Expand Down
161 changes: 83 additions & 78 deletions website/components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,91 +5,96 @@ import Link from "next/link";

export const Footer = () => {
return (
<footer className="relative z-5 texture-bg grid grid-cols-main bg-black-primary py-[40px] gap-y-12 md:gap-y-32">
<div className="flex justify-between gap-y-8 md:gap-y-16 col-start-3 col-end-11 flex-wrap lg:flex-nowrap">
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Info
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
{/* <Link href="/cookies">Cookies</Link> */}
<Link
href="/privacy-policy"
className="transition-colors duration-100 hover:text-slate-50"
>
Privacy Policy
</Link>
</ul>
</div>
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Explore
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
<li>
<Link
href="/demo"
className="transition-colors duration-100 hover:text-slate-50"
>
Demo
</Link>
</li>
<li>
<footer className="relative z-5 texture-bg bg-black-primary py-[40px]">
<div className="grid grid-cols-main gap-y-12 md:gap-y-32 max-w-screen-2xl mx-auto">
<div className="flex justify-between gap-y-8 md:gap-y-16 col-start-3 col-end-11 flex-wrap lg:flex-nowrap">
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Info
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
{/* <Link href="/cookies">Cookies</Link> */}
<Link
href="/docs/5.0/1-getting-started"
href="/privacy-policy"
className="transition-colors duration-100 hover:text-slate-50"
>
Documentation
Privacy Policy
</Link>
</li>
<li>
<Link
href="/support"
className="transition-colors duration-100 hover:text-slate-50"
>
Support
</Link>
</li>
</ul>
</ul>
</div>
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Explore
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
<li>
<Link
href="/demo"
className="transition-colors duration-100 hover:text-slate-50"
>
Demo
</Link>
</li>
<li>
<Link
href="/docs/5.0/1-getting-started"
className="transition-colors duration-100 hover:text-slate-50"
>
Documentation
</Link>
</li>
<li>
<Link
href="/support"
className="transition-colors duration-100 hover:text-slate-50"
>
Development Support
</Link>
</li>
</ul>
</div>
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Social
</h2>
<ul className="text-white-secondary3 flex gap-x-8">
<li>
<Link
href="https://www.npmjs.com/package/@silevis/reactgrid"
target="_blank"
>
<Image src={npmIcon} alt="npm icon" className="md:w-auto" />
</Link>
</li>
<li>
<Link
href="https://github.com/silevis/reactgrid"
target="_blank"
>
<Image
src={githubIcon}
alt="github icon"
className=" md:w-auto"
/>
</Link>
</li>
</ul>
</div>
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Contact
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
<li>Silevis Software Sp. z o.o.</li>
<li>Sienkiewicza Street 17/3</li>
<li>25-007 Kielce, Poland</li>
</ul>
</div>
</div>
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Social
</h2>
<ul className="text-white-secondary3 flex gap-x-8">
<li>
<Link
href="https://www.npmjs.com/package/@silevis/reactgrid"
target="_blank"
>
<Image src={npmIcon} alt="npm icon" className="md:w-auto" />
</Link>
</li>
<li>
<Link href="https://github.com/silevis/reactgrid" target="_blank">
<Image
src={githubIcon}
alt="github icon"
className=" md:w-auto"
/>
</Link>
</li>
</ul>
</div>
<div className="w-[100%] sm:w-[50%] lg:w-auto">
<h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
Contact
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
<li>Silevis Software Sp. z o.o.</li>
<li>Sienkiewicza Street 17/3</li>
<li>25-007 Kielce, Poland</li>
</ul>
<div className="col-start-3 col-end-11 text-center text-zinc-700">
© Silevis Software Sp. z o.o. 2019-{new Date().getFullYear()}
</div>
</div>
<div className="col-start-3 col-end-11 text-center text-zinc-700">
© Silevis Software Sp. z o.o. 2019-{new Date().getFullYear()}
</div>
</footer>
);
};
2 changes: 1 addition & 1 deletion website/components/header-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const HeaderLink = ({ href, children }: HeaderLinkProps) => {
href={href}
className={`md:border-l-1 border-green-light rounded-none flex ${
isHomePage ? "md:text-white-primary" : "md:text-black-primary"
} text-xs font-bold justify-start md:justify-center items-center ${underlineClass}`}
} text-xs font-bold h-full flex items-center justify-center ${underlineClass}`}
>
{children}
</Link>
Expand Down
94 changes: 53 additions & 41 deletions website/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,52 +23,64 @@ export default function Header({ children }: { children: any }) {
<>
<div className="drawer">
<input id="rg-drawer" type="checkbox" className="drawer-toggle" />
<div className="drawer-content flex flex-col">
<div className="drawer-content min-h-screen flex flex-col">
<nav
className={`relative z-10 w-full ${
isHomePage ? "bg-green-primary" : "bg-white-primary"
} top-0 border-t-1 border-l-1 border-b-1 border-r-1 font-dm-sans border-green-light grid grid-cols-main h-[86px] text-white-primary`}
} top-0 border-t-1 border-l-1 border-b-1 border-r-1 font-dm-sans border-green-light text-white-primary`}
>
<div className="flex-none lg:hidden flex items-center ps-2">
<label
htmlFor="rg-drawer"
aria-label="open sidebar"
className="btn btn-square btn-ghost"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="black"
viewBox="0 0 24 24"
className="inline-block w-6 h-6 stroke-current"
<div className="grid grid-cols-main max-w-screen-3xl mx-auto h-[86px]">
<div className="flex-none lg:hidden flex items-center ps-2">
<label
htmlFor="rg-drawer"
aria-label="open sidebar"
className="btn btn-square btn-ghost"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
stroke={isHomePage ? "#ffffff" : "#202020"}
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</label>
</div>
<div className="col-start-2 md:col-start-1 2xl:col-start-3 col-end-13 md:col-end-5 2xl:col-end-8 xl:border-l-1 border-green-light flex items-center justify-start ps-0.5 md:ps-4">
<Link href="/">
<Image
src={isHomePage ? logoIcon : nightLogoIcon}
alt="ReactGrid"
width={180}
/>
</Link>
</div>
<div
className={`grid hidden md:grid text-black-primary md:text-white-primary col-start-5 col-end-13 2xl:col-start-8 2xl:col-end-11 grid-cols-1 md:grid-cols-navLinks justify-items-start md:justify-items-stretch content-start md:content-stretch md:top-auto gap-y-4 md:gap-y-0 menu-horizontal`}
>
<HeaderLink href="/demo">Demo</HeaderLink>
<HeaderLink href="/docs/5.0/1-getting-started">Docs</HeaderLink>
<HeaderLink href="/support">Support</HeaderLink>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="black"
viewBox="0 0 24 24"
className="inline-block w-6 h-6 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
stroke={isHomePage ? "#ffffff" : "#202020"}
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</label>
</div>
<div className="col-start-2 md:col-start-1 2xl:col-start-3 col-end-13 md:col-end-7 xl:border-l-1 border-green-light flex items-center justify-start ps-0.5 md:ps-4">
<Link href="/">
<Image
src={isHomePage ? logoIcon : nightLogoIcon}
alt="ReactGrid"
width={180}
/>
</Link>
</div>

<div className="hidden md:contents md:col-start-7">
<div className="col-span-2 2xl:col-span-1">
<HeaderLink href="/demo">Demo</HeaderLink>
</div>
<div className="col-span-2 2xl:col-span-1">
<HeaderLink href="/docs/5.0/1-getting-started">
Docs
</HeaderLink>
</div>
<div className="col-span-2">
<HeaderLink href="/support">
<span className="block xl:hidden">Dev support</span>
<span className="hidden xl:block">Development Support</span>
</HeaderLink>
</div>
</div>
<span className="border-l-1 hidden 2xl:flex border-l-1 border-green-light"></span>
<span className="hidden 2xl:flex"></span>
</div>
<span className="border-l-1 hidden 2xl:flex border-l-1 border-green-light"></span>
<span className="hidden 2xl:flex"></span>
</nav>

{children}
Expand Down Expand Up @@ -100,7 +112,7 @@ export default function Header({ children }: { children: any }) {
</li>
<li>
<DrawerLink handleLinkClick={handleLinkClick} href="/support">
Support
Development Support
</DrawerLink>
</li>
</ul>
Expand Down
Loading

0 comments on commit 365f237

Please sign in to comment.