From ad1df5faf1be65eed7a883fcbf18397938e9a47d Mon Sep 17 00:00:00 2001 From: cristiano cardelli Date: Thu, 15 Aug 2024 10:53:58 +0200 Subject: [PATCH 1/3] navi mobile/tablet/desktop --- src/app/layout.tsx | 2 +- src/shared/components/brand.tsx | 3 --- src/shared/components/menu-button.tsx | 2 +- src/shared/components/mobile-header.tsx | 2 +- src/shared/components/nav/index.tsx | 2 +- 5 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7b577ce..d83198d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -29,7 +29,7 @@ interface RootLayoutProps { const RootLayout: React.FC = ({ children }) => ( diff --git a/src/shared/components/brand.tsx b/src/shared/components/brand.tsx index 392031e..eb837ff 100644 --- a/src/shared/components/brand.tsx +++ b/src/shared/components/brand.tsx @@ -1,14 +1,11 @@ import Image from 'next/image'; import Link from 'next/link'; -const MIN_HEIGHT_STYLE = { minHeight: 53 }; - export const Brand = () => { return (
{ return ( -
+
ecosystem.vision • ecosystem.vision • ecosystem.vision • ecosystem.vision • ecosystem.vision • ecosystem.vision • ecosystem.vision • ecosystem.vision • ecosystem.vision • @@ -53,13 +53,13 @@ export const HomePage = () => { -
+
-

+

Connect, Earn, and Grow with Verified Web3 Professionals

-

+

Accelerate your projects and earn money by connecting with verified professionals in top Web3 companies. Dynamic pricing ensures fair compensation, while rigorous verification through @@ -72,15 +72,15 @@ export const HomePage = () => { {'placeholder'}

-
+
@@ -99,11 +99,11 @@ export const HomePage = () => {
-

+

Grant Impact Analysis: A Collaboration with Ecosystem Vision and the Cartographer Syndicates

-

+

Gain deep insights into the effectiveness of grant programs with our detailed metrics and analyses. Our collaboration with ThankArb, Ecosystem Vision, and the Cartographer Syndicate @@ -125,8 +125,8 @@ export const HomePage = () => { {'placeholder'}

@@ -134,10 +134,10 @@ export const HomePage = () => {
-

+

Real Success Stories from Web3 Professionals

-

+

Read success stories of how our platform has helped users connect with verified professionals, access valuable data, and drive their projects forward. @@ -171,59 +171,76 @@ export const HomePage = () => {

-
-

- Discover Leading Organizations in Web3 -

-

- Gain access to detailed profiles of over 6,500 leading Web3 - organizations. Our data includes comprehensive company summaries, - URLs, social media handles, documentation, grant information, and - venture capital investments. Sort by recent funding, industry, and - more to discover the perfect partners and opportunities. -

- -
+
+
+
+ {'app'} +
+
+
+

+ Discover Leading Organizations in Web3 +

+

+ Gain access to detailed profiles of over 6,500 leading Web3 + organizations. Our data includes comprehensive company summaries, + URLs, social media handles, documentation, grant information, and + venture capital investments. Sort by recent funding, industry, and + more to discover the perfect partners and opportunities. +

+ +
+
+
+
{'placeholder'}
+
+

+ Explore Top Grant Programs +

+

+ Access detailed data on over 4,000 top Web3 projects, including + insights into total value locked (TVL), financial metrics, network + deployments, and ecosystem details. Utilize advanced sorting and + filtering to identify high-impact projects and understand their + significance within the Web3 landscape@/home +

+ +
-
-

- Explore Top Grant Programs -

-

- Access detailed data on over 4,000 top Web3 projects, including - insights into total value locked (TVL), financial metrics, network - deployments, and ecosystem details. Utilize advanced sorting and - filtering to identify high-impact projects and understand their - significance within the Web3 landscape@/home -

- -
-
-
+
+
{'Ecosystem.vision'} { priority />
-
+

Join Now and Start Earning

From 74b97741d09b6d87b778d4686f4f225dd5eb6176 Mon Sep 17 00:00:00 2001 From: cristiano cardelli Date: Thu, 15 Aug 2024 12:31:35 +0200 Subject: [PATCH 3/3] all right let's go --- src/app/globals.css | 101 +++++++++++++++++++++++--------- src/home/components/marquee.tsx | 26 ++++++++ src/home/pages/home-page.tsx | 7 +-- 3 files changed, 101 insertions(+), 33 deletions(-) create mode 100644 src/home/components/marquee.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 37d42a1..ec4f4a9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,49 +3,92 @@ @tailwind utilities; @layer base { - :root { - /* TODO: review values of the variables primary/secondary */ - --color-base-dark: 13 13 13; /* #0D0D0D */ - --color-dark-gray: 25 25 25; /* #191919 */ - --color-medium-gray: 32 32 32; /* #202020 */ - --color-light-gray: 153 153 153; /* #999999 */ - --color-cool-gray: 156 163 175; /* #9CA3AF */ - --color-white: 255 255 255; /* #FFFFFF */ - --color-primary: 65 54 241; /* #4136F1 */ - --color-secondary: 135 67 255; /* #8743FF */ - --color-labels: 239 239 239; /* #EFEFEF */ - --color-border: 240 238 237; /* #F0EEED */ - --color-tertiary: 219 217 251; /* #DBD9FB */ - --color-grantee-item: 117 112 141; - - /* HP variables to rearrange */ - --color-gradient-1: 117 117 117; /* #757575 */ - --color-gradient-2: 117 112 141; /* #75708D */ - --color-innovate: 31 31 38; /* #1F1F26 */ - } -} + :root { + /* TODO: review values of the variables primary/secondary */ + --color-base-dark: 13 13 13; /* #0D0D0D */ + --color-dark-gray: 25 25 25; /* #191919 */ + --color-medium-gray: 32 32 32; /* #202020 */ + --color-light-gray: 153 153 153; /* #999999 */ + --color-cool-gray: 156 163 175; /* #9CA3AF */ + --color-white: 255 255 255; /* #FFFFFF */ + --color-primary: 65 54 241; /* #4136F1 */ + --color-secondary: 135 67 255; /* #8743FF */ + --color-labels: 239 239 239; /* #EFEFEF */ + --color-border: 240 238 237; /* #F0EEED */ + --color-tertiary: 219 217 251; /* #DBD9FB */ + --color-grantee-item: 117 112 141; + /* HP variables to rearrange */ + --color-gradient-1: 117 117 117; /* #757575 */ + --color-gradient-2: 117 112 141; /* #75708D */ + --color-innovate: 31 31 38; /* #1F1F26 */ + } +} html { - overflow-y: scroll; - scrollbar-gutter: stable; + overflow-y: scroll; + scrollbar-gutter: stable; } - .hide-scrollbar { - -ms-overflow-style: none; - scrollbar-width: none; + -ms-overflow-style: none; + scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { - display: none; + display: none; } .is-active { - @apply bg-gradient-to-r from-white/100 text-black to-light-gray + @apply bg-gradient-to-r from-white/100 text-black to-light-gray; } /* remove padding in storybook to easily work on the homepage */ .sb-main-padded { - padding: 0 !important; + padding: 0 !important; +} + +/* Marquee styles */ +.marquee { + --gap: 1px; + position: relative; + display: flex; + overflow: hidden; + user-select: none; + gap: var(--gap); +} + +.marquee__content { + flex-shrink: 0; + display: flex; + gap: var(--gap); + justify-content: space-around; + min-width: 100%; +} +.marquee__item { + width: 115px; +} +@screen md { + .marquee__item { + width: 170px; + } +} +@screen lg { + .marquee__item { + width: 228px; + } + } +/* marquee amimation */ +@keyframes scroll { + from { + transform: translateX(0); + } + to { + transform: translateX(calc(-100% - var(--gap))); + } +} + +/* Enable animation */ +.enable-animation .marquee__content { + animation: scroll 30s linear infinite; } diff --git a/src/home/components/marquee.tsx b/src/home/components/marquee.tsx new file mode 100644 index 0000000..e9d6300 --- /dev/null +++ b/src/home/components/marquee.tsx @@ -0,0 +1,26 @@ +export const Marquee = () => { + return ( +
+ +
+
+
ecosystem.vision • 
+
ecosystem.vision • 
+
ecosystem.vision • 
+
ecosystem.vision • 
+
ecosystem.vision • 
+
ecosystem.vision • 
+
+ + +
+
+ ); +}; diff --git a/src/home/pages/home-page.tsx b/src/home/pages/home-page.tsx index ba83883..47a994e 100644 --- a/src/home/pages/home-page.tsx +++ b/src/home/pages/home-page.tsx @@ -6,6 +6,7 @@ import { Button } from '@nextui-org/react'; import { FeatureSwiper } from '@/home/components/feature-swiper'; import { Footer } from '@/home/components/footer'; import { FlashIcon } from '@/home/components/icons/flash'; +import { Marquee } from '@/home/components/marquee'; import { TestimonialSwiper } from '@/home/components/testimonial-swiper'; export const HomePage = () => { @@ -45,10 +46,8 @@ export const HomePage = () => {
-
- ecosystem.vision • ecosystem.vision • ecosystem.vision • - ecosystem.vision • ecosystem.vision • ecosystem.vision • - ecosystem.vision • ecosystem.vision • ecosystem.vision • +
+