From 8b9f1ba86a709f7dd0d3cb8f33c437511c9755c2 Mon Sep 17 00:00:00 2001 From: Julian Sunpayco <61348807+jSunpayco@users.noreply.github.com> Date: Wed, 8 Nov 2023 17:14:33 -0800 Subject: [PATCH] Modified the home page components & Fixed the carousel issue (#18) (#22) * Utilize Home Page JSX components Utilize JSX Components Swapped SwiperJS for keen-slider * Use Home component and reformat files. --------- Co-authored-by: nateb --- package-lock.json | 25 +- package.json | 4 +- src/app/globals.scss | 2 +- src/app/layout.js | 16 +- src/app/page.js | 240 +----------------- src/app/page.scss | 2 +- src/components/home/home.jsx | 6 +- src/components/home/homeSectionAboutImage.jsx | 6 +- src/components/home/homeSectionDefault.jsx | 26 +- src/components/home/homeSectionDefault2.jsx | 12 +- src/components/home/homeSectionDonate.jsx | 2 + .../home/homeSectionLandingImage.jsx | 7 +- src/components/home/homeSectionProjects.jsx | 86 ++++++- src/components/home/homeSectionServices.jsx | 12 +- styles/abstracts/mixins.scss | 192 +++++++------- styles/abstracts/variables.scss | 2 +- styles/components/navigation-bar.scss | 1 + styles/globals.css | 13 +- styles/pages/home.scss | 66 +++-- 19 files changed, 279 insertions(+), 441 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3044363f..bf3db322 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "2.0.0-alpha.4", "license": "MIT", "dependencies": { - "swiper": "^11.0.3" + "keen-slider": "^6.8.6" }, "devDependencies": { "@testing-library/jest-dom": "^6.1.4", @@ -4773,6 +4773,11 @@ "node": ">=6" } }, + "node_modules/keen-slider": { + "version": "6.8.6", + "resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz", + "integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w==" + }, "node_modules/kleur": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", @@ -5918,24 +5923,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/swiper": { - "version": "11.0.3", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.3.tgz", - "integrity": "sha512-MyV9ooQsriAe2EibeamqewLjgCfSvl2xoyratl6S3ln5BXDL4BzlO6mxcbLMCzQL6Z60b/u0AS/nKrepL0+TAg==", - "funding": [ - { - "type": "patreon", - "url": "https://www.patreon.com/swiperjs" - }, - { - "type": "open_collective", - "url": "http://opencollective.com/swiper" - } - ], - "engines": { - "node": ">= 4.7.0" - } - }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index bbf7f10d..ca223223 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,6 @@ "sass": "^1.69.5" }, "dependencies": { - "swiper": "^11.0.3" + "keen-slider": "^6.8.6" } -} \ No newline at end of file +} diff --git a/src/app/globals.scss b/src/app/globals.scss index 97045bbc..72ff7e26 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -1 +1 @@ -@import "styles/main.scss" \ No newline at end of file +@import "styles/main.scss"; \ No newline at end of file diff --git a/src/app/layout.js b/src/app/layout.js index df687f50..7953ba6b 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,23 +1,23 @@ import AppFooter from '@/components/AppFooter' import AppNavbar from '@/components/AppNavbar' -import { Inter } from 'next/font/google' +import {Inter} from 'next/font/google' import './globals.scss' -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({subsets: ['latin']}) export const metadata = { title: 'Open Sacramento', description: 'Open Sacramento civic techonology.', } -export default function RootLayout({ children }) { +export default function RootLayout({children}) { return ( - - - {children} - - + + + {children} + + ) } diff --git a/src/app/page.js b/src/app/page.js index f31d4487..93f2d3d9 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,244 +1,10 @@ import './page.scss' +import Home from "@/components/home/home" -export default function Home() { +export default function HomePage() { return ( <> -
-
-

- We are
- Open Sacramento -

-

- Join us to address civic challenges and enhance public services for - Sacramento residents through technology and open data. Volunteer now for a - better future! -

- -
-
- -
-
-

Who we are

-

- Building a Brighter Sacramento Through Innovation and Technology -

-
- -
-

- Open Sacramento is - - a community of technologists, developers, designers, and civic-minded individuals - who come together to use technology and open data to address civic - challenges and improve public services in the Sacramento area. -

- We are passionate about fostering civic innovation and creating positive - impact through technology and community engagement. -

-
-
- -
-
-
-

What we do

-

- Building a Better Future
- in Sacramento -

-
-

- Our mission is done by uniting programmers, designers, and other talents; - we transform ideas into tangible solutions that impact lives throughout - the Sacramento area. Together, we drive innovation forward, building a - future where open source technology empowers citizens and uplifts our - city. - Join us in driving innovation through open-source tech and empowering - our community! -

-
- Open Data Day -
- -
-
-

Our services

-

Explore Our Engagement Options

-
-
- -
-
-
-

our projects

-

- Driving Innovation Through Tech and Collaboration -

-
-

- We tackle tech projects addressing civic issues, enhancing services in - Sacramento. From open data initiatives to government services and - community platforms, - - our open-source tech and collaboration drive innovation - for transparent, efficient, engaged local governance. -

- Find Projects -
-
-
-
-
-

TrashAI

-

- Developing machine learning technology to identify trash in images. -

-
- Open Data Day -
- -
-
-

TrashAI

-

- Developing machine learning technology to identify trash in images. -

-
- Open Data Day -
- -
-
-

TrashAI

-

- Developing machine learning technology to identify trash in images. - Donations fuel our technology -

-
- Open Data Day -
-
-
-
-
- -
-
-

Help Support Open Sacramento

-
-
-

- Your support, whether through donations or volunteering, - is instrumental in driving positive change with Open Sacramento. -

- Donations fuel our technology-driven initiatives that address civic challenges, enhance public - services, and amplify community voices. -

- When you volunteer, you actively contribute your skills - - be it coding, designing, or any other expertise - to create tangible - solutions that make a real impact. -

- Together, we shape a better future for our city, amplifying voices, - enhancing services, and driving innovation. - Join us today and be a catalyst for lasting, community-driven - transformation! -

- -
-
+ ) } diff --git a/src/app/page.scss b/src/app/page.scss index 731df18f..248470f6 100644 --- a/src/app/page.scss +++ b/src/app/page.scss @@ -1 +1 @@ -@import "pages/home.scss" \ No newline at end of file +@import "styles/pages/home.scss"; \ No newline at end of file diff --git a/src/components/home/home.jsx b/src/components/home/home.jsx index b4b16ab4..e2c17ce6 100644 --- a/src/components/home/home.jsx +++ b/src/components/home/home.jsx @@ -25,9 +25,9 @@ export default function Home() { - - - + + + ) } diff --git a/src/components/home/homeSectionAboutImage.jsx b/src/components/home/homeSectionAboutImage.jsx index 5081727b..d42f7a3c 100644 --- a/src/components/home/homeSectionAboutImage.jsx +++ b/src/components/home/homeSectionAboutImage.jsx @@ -1,3 +1,5 @@ +import "@/styles/pages/home.scss" + /** * Home about image section. * @returns {JSX.Element} @@ -5,10 +7,10 @@ */ export default function HomeSectionAboutImage({ sectionType }) { return ( -
+
+ className={`home-section-${sectionType}-container home-section-heading-underline underline-alt`}>

What we do

Building a Better Future
diff --git a/src/components/home/homeSectionDefault.jsx b/src/components/home/homeSectionDefault.jsx index 9318fab2..7d51c958 100644 --- a/src/components/home/homeSectionDefault.jsx +++ b/src/components/home/homeSectionDefault.jsx @@ -5,8 +5,8 @@ */ export default function HomeSectionDefault({sectionType}) { return ( -
-
+
+

Why volunteer

Empower Change with
@@ -14,20 +14,18 @@ export default function HomeSectionDefault({sectionType}) {

-
+

- - Ready to make a difference? - - Join us at Open Sacramento and use your skills to drive positive change - through technology and collaboration. - Whether you're a designer, developer, or anyone eager to volunteer, - together we're enhancing community services, amplifying voices, and - giving you the opportunity to improve your resume and portfolio. - - It's a journey of innovation and empowerment waiting for you. Your impact - starts here! + Ready to make a difference? + + Join us at Open Sacramento and use your skills to drive positive change + through technology and collaboration. + Whether you're a designer, developer, or anyone eager to volunteer, + together we're enhancing community services, amplifying voices, and + giving you the opportunity to improve your resume and portfolio. + It's a journey of innovation and empowerment waiting for you. Your impact starts + here!

diff --git a/src/components/home/homeSectionDefault2.jsx b/src/components/home/homeSectionDefault2.jsx index 4b82cc5a..f4e85d15 100644 --- a/src/components/home/homeSectionDefault2.jsx +++ b/src/components/home/homeSectionDefault2.jsx @@ -1,3 +1,5 @@ +import "@/styles/pages/home.scss" + /** * Home page default section 2. * @returns {JSX.Element} @@ -5,19 +7,19 @@ */ export default function HomeSectionDefault2({sectionType}) { return ( -
-
+
+

Who we are

Building a Brighter Sacramento Through Innovation and Technology

-
+

Open Sacramento is - a community of technologists, developers, designers, and civic-minded - individuals + a community of technologists, developers, designers, and civic-minded + individuals who come together to use technology and open data to address civic challenges and improve public services in the Sacramento area.

diff --git a/src/components/home/homeSectionDonate.jsx b/src/components/home/homeSectionDonate.jsx index 0572c547..3a8d6435 100644 --- a/src/components/home/homeSectionDonate.jsx +++ b/src/components/home/homeSectionDonate.jsx @@ -1,3 +1,5 @@ +import "@/styles/pages/home.scss" + /** * Home donate section. * @returns {JSX.Element} diff --git a/src/components/home/homeSectionLandingImage.jsx b/src/components/home/homeSectionLandingImage.jsx index fb19d416..0ed3a0a0 100644 --- a/src/components/home/homeSectionLandingImage.jsx +++ b/src/components/home/homeSectionLandingImage.jsx @@ -1,4 +1,5 @@ import { SectionType } from "@/components/home/home"; +import "@/styles/pages/home.scss" /** * Home projects section. @@ -8,7 +9,7 @@ import { SectionType } from "@/components/home/home"; export default function HomeSectionLandingImage({ sectionType }) { return (

-
+

We are
Open Sacramento @@ -23,6 +24,10 @@ export default function HomeSectionLandingImage({ sectionType }) { View Projects

+ Tower Bridge
) } \ No newline at end of file diff --git a/src/components/home/homeSectionProjects.jsx b/src/components/home/homeSectionProjects.jsx index 08c9ef56..003736e8 100644 --- a/src/components/home/homeSectionProjects.jsx +++ b/src/components/home/homeSectionProjects.jsx @@ -1,12 +1,31 @@ +'use client' +import 'keen-slider/keen-slider.min.css' +import { useKeenSlider } from "keen-slider/react" +import React from "react" +import "@/styles/pages/home.scss" + /** * Home projects section. * @returns {JSX.Element} * @constructor */ export default function HomeSectionProjects({sectionType}) { + + const [currentSlide, setCurrentSlide] = React.useState(0) + const [loaded, setLoaded] = React.useState(false) + const [sliderRef, instanceRef] = useKeenSlider({ + initial: 0, + slideChanged(slider) { + setCurrentSlide(slider.track.details.rel) + }, + created() { + setLoaded(true) + }, + }) + return ( -
-
+
+

our projects

@@ -20,6 +39,69 @@ export default function HomeSectionProjects({sectionType}) {

Find Projects
+ +
+
+
+
+
+

TrashAI

+

+ Developing machine learning technology to identify trash in images. +

+
+ Open Data Day +
+
+
+

TrashAI

+

+ Developing machine learning technology to identify trash in images. +

+
+ Open Data Day +
+
+
+

TrashAI

+

+ Developing machine learning technology to identify trash in images. +

+
+ Open Data Day +
+
+
+ {loaded && instanceRef.current && ( +
+ {[ + ...Array(instanceRef.current.track.details.slides.length).keys(), + ].map((idx) => { + return ( + + ) + })} +
+ )} +
) } diff --git a/src/components/home/homeSectionServices.jsx b/src/components/home/homeSectionServices.jsx index 1e374b9b..f22c8441 100644 --- a/src/components/home/homeSectionServices.jsx +++ b/src/components/home/homeSectionServices.jsx @@ -1,3 +1,5 @@ +import "@/styles/pages/home.scss" + /** * Home services section. * @returns {JSX.Element} @@ -5,13 +7,13 @@ */ export default function HomeSectionServices({ sectionType }) { return ( -
+
+ className={`home-section-${sectionType}-container home-section-heading-underline underline-alt`} >

Our services

Explore Our Engagement Options

-
+
Open Data Day

Engage with Our Community

@@ -23,7 +25,7 @@ export default function HomeSectionServices({ sectionType }) {

Drive Innovation with Projects

@@ -34,7 +36,7 @@ export default function HomeSectionServices({ sectionType }) {

Pitch Your Vision

diff --git a/styles/abstracts/mixins.scss b/styles/abstracts/mixins.scss index ab668c4c..59b999e1 100644 --- a/styles/abstracts/mixins.scss +++ b/styles/abstracts/mixins.scss @@ -4,164 +4,164 @@ Application fonts. */ @mixin subheading-regular { - font-family: "Inter", sans-serif; - font-weight: 400; - font-size: 20px; - line-height: 32px; + font-family: "Inter", sans-serif; + font-weight: 400; + font-size: 20px; + line-height: 32px; } @mixin subheading-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 20px; - line-height: 32px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 32px; } @mixin subheading-medium-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 24px; - line-height: 29px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 29px; } @mixin subheading-medium-regular { - font-family: "Inter", sans-serif; - font-weight: 400; - font-size: 24px; - line-height: 29px; + font-family: "Inter", sans-serif; + font-weight: 400; + font-size: 24px; + line-height: 29px; } @mixin h1-small-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 39px; - line-height: 47px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 39px; + line-height: 47px; } @mixin h1-small-semi-bold { - font-family: "Inter", sans-serif; - font-weight: 600; - font-size: 39px; - line-height: 47px; + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 39px; + line-height: 47px; } @mixin h1-semi-bold { - font-family: "Inter", sans-serif; - font-weight: 600; - font-size: 48px; - line-height: 56px; + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 48px; + line-height: 56px; } @mixin h1-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 48px; - line-height: 56px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 56px; } // The small font above each of the sections' header (refer to home page) @mixin h1-section { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 14px; - line-height: 17px; - text-transform: uppercase; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 17px; + text-transform: uppercase; } @mixin h2-semi-bold { - font-family: "Inter", sans-serif; - font-weight: 600; - font-size: 39px; - line-height: 47px; + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 39px; + line-height: 47px; } @mixin h3-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 31px; - line-height: 38px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 31px; + line-height: 38px; } @mixin h3-semi-bold { - font-family: "Inter", sans-serif; - font-weight: 600; - font-size: 31px; - line-height: 38px; + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 31px; + line-height: 38px; } @mixin h4-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 25px; - line-height: 32px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 25px; + line-height: 32px; } @mixin h4-semi-bold { - font-family: "Inter", sans-serif; - font-weight: 600; - font-size: 25px; - line-height: 32px; + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 25px; + line-height: 32px; } @mixin h5-semi-bold { - font-family: "Inter", sans-serif; - font-weight: 600; - font-size: 20px; - line-height: 26px; + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 20px; + line-height: 26px; } @mixin p3-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 18px; - line-height: 28px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 28px; } @mixin p3-regular { - font-family: "Inter", sans-serif; - font-weight: 400; - font-size: 18px; - line-height: 28px; + font-family: "Inter", sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 28px; } @mixin p-footer { - font-family: "Inter", sans-serif; - font-weight: 400; - font-size: 16px; - line-height: 18px; + font-family: "Inter", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 18px; } @mixin p-footer-bold { - font-family: "Inter", sans-serif; - font-weight: 700; - font-size: 16px; - line-height: 18px; + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 18px; } @mixin caption-regular-uppercase { - font-family: "Inter", sans-serif; - font-weight: 400; - font-size: 12px; - line-height: 14px; - text-transform: uppercase; + font-family: "Inter", sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; } @mixin caption-footer { - font-family: "Inter", sans-serif; - font-weight: 400; - font-size: 14px; - line-height: 18px; - text-transform: uppercase; + font-family: "Inter", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 18px; + text-transform: uppercase; } @mixin button-regular { - font-family: "Inter", sans-serif; - font-weight: 600; - font-size: 0.9em; - line-height: 18px; - - @media (max-width: $screen-xs) { - padding: 10px 15px; - font-size: 0.7em; - } + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 0.9em; + line-height: 18px; + + @media (max-width: $screen-xs) { + padding: 10px 15px; + font-size: 0.7em; + } } \ No newline at end of file diff --git a/styles/abstracts/variables.scss b/styles/abstracts/variables.scss index ebfe6fdc..fa14bfd4 100644 --- a/styles/abstracts/variables.scss +++ b/styles/abstracts/variables.scss @@ -5,7 +5,7 @@ $secondary-50: #fffcf5; $neutral-50: #f7f7f8; $neutral-300: #a9aab1; $secondary-500: #ffc107; -$neutral-900: #060718; +$neutral-900: #030303; $primary-900: #00081f; /* diff --git a/styles/components/navigation-bar.scss b/styles/components/navigation-bar.scss index 49e5733a..807e47bd 100644 --- a/styles/components/navigation-bar.scss +++ b/styles/components/navigation-bar.scss @@ -47,6 +47,7 @@ $toolbar_height: 84px; #navbar-toolbar-main { container-type: inline-size; } + .navbar-nested-parent-link img { margin-left: 2px; } diff --git a/styles/globals.css b/styles/globals.css index d4f491e1..4c769828 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,8 +2,8 @@ --max-width: 1100px; --border-radius: 12px; --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', - 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', - 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', + 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; @@ -88,11 +88,10 @@ body { body { color: rgb(var(--foreground-rgb)); background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) rgb(var(--background-start-rgb)); } a { diff --git a/styles/pages/home.scss b/styles/pages/home.scss index c900a67a..a995ed35 100644 --- a/styles/pages/home.scss +++ b/styles/pages/home.scss @@ -1,6 +1,5 @@ @import "abstracts/variables"; @import "abstracts/mixins"; -// @import '/node_modules/swiper/swiper.css'; /* Home page layout @@ -36,7 +35,7 @@ Home page layout } @media (max-width: $screen-md) { - width: 100%; + width: auto; padding: 96px 40px 0px 40px; justify-content: start; padding-top: 30%; @@ -131,8 +130,6 @@ Home page layout .home-section-heading-underline::after { content: ""; position: absolute; - left: 0; - right: 0; height: 1px; width: 43px; border-bottom: 4px solid $neutral-900; @@ -318,7 +315,7 @@ Home page layout justify-content: space-between; gap: 30px; - @media (max-width: $screen-xl) { + @media (max-width: 1300px) { flex-direction: column; justify-content: center; padding: 48px 40px; @@ -344,23 +341,6 @@ Home page layout aspect-ratio: 2/1; } -.swiper { - width: 100%; - display: flex !important; - flex-direction: column !important; - justify-content: space-between !important; - gap: 20px; -} - -.swiper-slide { - display: flex !important; - flex-direction: column !important; - justify-content: space-between !important; - align-items: center !important; - padding: 0 1%; - width: 98% !important; -} - .slide-content { width: 100%; } @@ -371,29 +351,41 @@ Home page layout } } -.swiper-pagination { - position: relative !important; +.test { + margin: auto; + max-width: 100%; + @media (min-width: 1300px) { + max-width: 60%; + } } -.swiper-pagination-bullet { - width: 15px !important; - height: 15px !important; - background-color: $secondary-50 !important; - opacity: 1 !important; +.navigation-wrapper { + position: relative; +} + +.dots { + display: flex; + padding: 10px 0; + justify-content: center; } -.swiper-pagination-bullet-active { - background: $secondary-500 !important; +.dot { + border: none; + width: 10px; + height: 10px; + background: $secondary-50; + border-radius: 50%; + margin: 0 5px; + padding: 5px; + cursor: pointer; } -.swiper-slide .slide-content { - opacity: 0; - transition: opacity 0s; +.dot:focus { + outline: none; } -.swiper-slide-active .slide-content { - opacity: 1; - transition: opacity 1s; +.dot.active { + background: $secondary-500; } .donate-section {