From 9ad440357daddba2899e70a3591cd772846646a9 Mon Sep 17 00:00:00 2001 From: Scott Chiang Date: Sat, 7 Dec 2024 22:58:46 -0800 Subject: [PATCH 1/5] add to embed --- app/components/top.tsx | 1 + app/layout.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/components/top.tsx b/app/components/top.tsx index edcc86d..f0db2de 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -29,6 +29,7 @@ import { height: ['2vh', '90vh'], }} > + {typeof window !== 'undefined' && } {/* Date: Fri, 13 Dec 2024 22:32:29 -0800 Subject: [PATCH 2/5] more responsive + better snowflakes --- app/ModelViewer.js | 2 +- app/components/footer.tsx | 4 +-- app/components/mdx.tsx | 1 + app/components/top.tsx | 4 +-- app/globals.css | 4 +-- app/guide/guideMD.mdx | 23 +++++++------ app/layout.tsx | 2 ++ app/page.tsx | 68 ++++++++++++++------------------------- mdx-components.tsx | 4 +-- package-lock.json | 20 ++++++++++++ package.json | 1 + yarn.lock | 12 +++++++ 12 files changed, 82 insertions(+), 63 deletions(-) diff --git a/app/ModelViewer.js b/app/ModelViewer.js index f97a9ad..7453dc3 100644 --- a/app/ModelViewer.js +++ b/app/ModelViewer.js @@ -7,7 +7,7 @@ const ModelViewer = () => { disable-zoom camera-orbit="0deg 0deg 105%" disable-pan - style={{ width: '25vw' ,height: '40vh'}} + style={{ width: '25' ,height: '40vh'}} > ); }; diff --git a/app/components/footer.tsx b/app/components/footer.tsx index 41419b8..afca7d9 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -13,8 +13,8 @@ import { backgroundColor: '#100056', height: '8vh', width: '100%', - position: 'relative', - //bottom: '0', + position: 'absolute', + bottom: '0px', display: 'flex', //flexDirection: 'column', alignItems: 'center', diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx index e6e51ce..640c043 100644 --- a/app/components/mdx.tsx +++ b/app/components/mdx.tsx @@ -12,6 +12,7 @@ const components = { p: (props) => , ol: (props) =>
    , li: (props) =>
  1. , + a: (props) => , } export default components \ No newline at end of file diff --git a/app/components/top.tsx b/app/components/top.tsx index f0db2de..12f59a0 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -22,8 +22,8 @@ import { paddingRight: ['0rem', '3rem'], width: '100%', margin: ['auto'], - - mt: ['10vh', '0vh'], + paddingBottom: '15vh', + mt: ['40vh', '5vh'], backgroundImage: '../public/background2.png', height: ['2vh', '90vh'], diff --git a/app/globals.css b/app/globals.css index 91c013f..deaa32d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -13,9 +13,9 @@ } body { color: #FFFFFF; - background-color: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);'; + background: linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%); font-family: Arial, Helvetica, sans-serif; - height: 100vh; + height: 100%; margin: 0; min-width: none; } diff --git a/app/guide/guideMD.mdx b/app/guide/guideMD.mdx index cf5eda1..304a2cd 100644 --- a/app/guide/guideMD.mdx +++ b/app/guide/guideMD.mdx @@ -1,5 +1,7 @@ - -# **Hacky Holidays Guide** +

    +

    +

    +# **🎄 Hacky Holidays Guide** Hacky Holidays is a limited time YSWS event for making your own PCB tree decorations! There are **3** major steps in making a successful decoration: 1. Choosing your Parts @@ -7,9 +9,9 @@ Hacky Holidays is a limited time YSWS event for making your own PCB tree decorat 3. Programming your PCB ### **** This guide serves as a learning tool to help you get started, If you submit the guide PCB you will not be accepted! **** - +

    --- - +

    # Choosing Your Parts When choosing your parts, think about the function of each component, and try to wither out unneeded components. Unneeded components can reduce your decoration’s battery life! @@ -21,9 +23,9 @@ Parts covered in the guide **(THESE MUST BE ON YOUR PCB TO WORK):** - Batteries If you want to add any components **not** on the approved list, ask one of the organizers in #hacky-holidays! - +



    --- - +

    # **Designing your PCB** For this guide, we are going to be using KiCad, so if you are using a different tool your steps might be a bit different! @@ -34,20 +36,21 @@ First, open up KiCad, and go to File → New Project… and name it whatever you Then Click on the **Schematic Editor** Button. It will take you to a blank page where you will start designing your PCB! -![image (3).png](https://prod-files-secure.s3.us-west-2.amazonaws.com/51907c75-c258-4bc2-9858-58c3dcad7100/4c6c1b0e-1052-4e21-b6f9-44eefa94f9ae/b38b9519-5210-4b7c-9046-fbd9882d3ce7.png) +![image (3).png](https://cloud-2i0fso8w6-hack-club-bot.vercel.app/0image__3___2_.png) Now it’s time to branch off…. Click on the link with the microcontroller you plan to use! Xiao Esp32C3 2nd Microcontroller - +



    --- - +

    # **Programming your PCB** To program your PCB, use the Arduino IDE and the Neopixels library! Here is a helpful resource to help you get started: https://learn.adafruit.com/adafruit-neopixel-uberguide/arduino-library-use -# Submissions & Manufacturing \ No newline at end of file +# Submissions & Manufacturing +

    \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 4f9038f..051875d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,3 +1,4 @@ + import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; @@ -10,6 +11,7 @@ import { Heading, Text, } from 'theme-ui'; +import Footer from './components/footer'; const geistSans = localFont({ src: "./fonts/GeistVF.woff", diff --git a/app/page.tsx b/app/page.tsx index d4b3987..98ca6d1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,6 +3,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import { keyframes } from '@emotion/react'; +import Snowfall from 'react-snowfall'; // import '@google/model-viewer'; // import Script from 'next/script'; import { useEffect } from 'react'; @@ -35,8 +36,6 @@ const fall = ( rotationDirection: number) => keyframes` } `; -const faqItems = {question: 'What is Next.js?', answer: 'Next.js is a React framework for production.' }; - export default function Home() { useEffect(() => { if (typeof window !== 'undefined') { @@ -44,18 +43,22 @@ export default function Home() { } }, []); return ( - + - +     - @@ -103,30 +104,7 @@ export default function Home() { - {Array.from({ length: 50 }).map((_, index) => { - const randomRotationDirection = Math.random() > 0.5 ? 1 : -1; - const randomSpeed = Math.random() * 10 + 5; - return( - - âť„ - ) - })} + @@ -143,15 +121,16 @@ export default function Home() { width: '100%', // margin: 'auto', height:['auto', '100vh'], - // textAlign: 'center' }}> +

    Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th! @@ -164,8 +143,8 @@ export default function Home() { paddingLeft: '4vw', paddingRight: '4vw', fontFamily: 'var(--font-inter)', - fontSize: ['0.8rem', '1.9rem'], - fontWeight:800, + fontSize: ['0.8rem', '1.2rem'], + fontWeight:700, textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', color: 'white' }}>At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts!



    @@ -182,14 +161,15 @@ export default function Home() { sx={{ fontFamily: 'var(--font-inter)', fontSize: ['0.9rem', '1.9rem'], - fontWeight:800, + fontWeight:700, textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', - color: 'white' + color: 'white', + paddingBottom: '4vh', }}>Any more questions? Ask in #hacky-holidays!     - - -
    + + +
    ); } \ No newline at end of file diff --git a/mdx-components.tsx b/mdx-components.tsx index 9900215..df44805 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -4,12 +4,12 @@ import { Heading, Text } from 'theme-ui' export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, - h1: (props) => , h2: (props) => , h3: (props) => , - p: (props) => , + p: (props) => , // Add more custom components as needed } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8d26f8d..6767ab1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "next": "^15.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "react-snowfall": "^2.2.0", "theme-ui": "^0.17.1", "three": "^0.170.0" }, @@ -6143,11 +6144,30 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-snowfall": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.2.0.tgz", + "integrity": "sha512-dRk7vEHq/ZUOG+JHk2k/hH3HmliOWGXr4rKRDeW4mjWuHeI1r5h0Lc1r2jnTtUS1im702d6tCmNGymlNTdhXYg==", + "license": "MIT", + "dependencies": { + "react-fast-compare": "^3.2.2" + }, + "peerDependencies": { + "react": "^16.8 || 17.x || 18.x", + "react-dom": "^16.8 || 17.x || 18.x" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 02d6f12..1e38715 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "^15.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "react-snowfall": "^2.2.0", "theme-ui": "^0.17.1", "three": "^0.170.0" }, diff --git a/yarn.lock b/yarn.lock index 822dfe6..25acebf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3372,11 +3372,23 @@ react-dom@18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-fast-compare@^3.2.2: + version "3.2.2" + resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz" + integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-snowfall@^2.2.0: + version "2.2.0" + resolved "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.2.0.tgz" + integrity sha512-dRk7vEHq/ZUOG+JHk2k/hH3HmliOWGXr4rKRDeW4mjWuHeI1r5h0Lc1r2jnTtUS1im702d6tCmNGymlNTdhXYg== + dependencies: + react-fast-compare "^3.2.2" + react@18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz" From b61c96d2526e1f3fc61302131cb43a6dd1f3e0da Mon Sep 17 00:00:00 2001 From: Scott Chiang Date: Sat, 14 Dec 2024 14:06:23 -0800 Subject: [PATCH 3/5] change link --- app/components/top.tsx | 4 +--- app/guide/guideMD.mdx | 2 +- mdx-components.tsx | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/app/components/top.tsx b/app/components/top.tsx index 12f59a0..ce10216 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -78,7 +78,7 @@ import { }}> Design a PCB holiday decoration this winter, get one shipped! - + - diff --git a/app/guide/guideMD.mdx b/app/guide/guideMD.mdx index 304a2cd..cb2fb1e 100644 --- a/app/guide/guideMD.mdx +++ b/app/guide/guideMD.mdx @@ -36,7 +36,7 @@ First, open up KiCad, and go to File → New Project… and name it whatever you Then Click on the **Schematic Editor** Button. It will take you to a blank page where you will start designing your PCB! -![image (3).png](https://cloud-2i0fso8w6-hack-club-bot.vercel.app/0image__3___2_.png) +![image (3).png](https://prod-files-secure.s3.us-west-2.amazonaws.com/51907c75-c258-4bc2-9858-58c3dcad7100/4c6c1b0e-1052-4e21-b6f9-44eefa94f9ae/b38b9519-5210-4b7c-9046-fbd9882d3ce7.png) Now it’s time to branch off…. Click on the link with the microcontroller you plan to use! diff --git a/mdx-components.tsx b/mdx-components.tsx index df44805..d5719de 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -9,7 +9,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { h2: (props) => , h3: (props) => , - p: (props) => , + p: (props) => , // Add more custom components as needed } } \ No newline at end of file From 2b0e6f61cbd5822f1fc5eb6ce1c3af2a9d02a1b4 Mon Sep 17 00:00:00 2001 From: LimesKey Date: Mon, 16 Dec 2024 17:39:40 -0500 Subject: [PATCH 4/5] slighty better for mobile, and has better styling, but needs work --- app/components/3box.tsx | 228 +- app/components/FAQcard.tsx | 22 +- app/components/dropdown.tsx | 92 +- app/components/footer.tsx | 54 +- app/components/mdx.tsx | 43 +- app/components/middle.tsx | 50 + app/components/top.tsx | 161 +- app/page.tsx | 211 +- pnpm-lock.yaml | 5295 +++++++++++++++++++++++++++++++++++ 9 files changed, 5708 insertions(+), 448 deletions(-) create mode 100644 pnpm-lock.yaml diff --git a/app/components/3box.tsx b/app/components/3box.tsx index 8461815..562ed8f 100644 --- a/app/components/3box.tsx +++ b/app/components/3box.tsx @@ -1,109 +1,127 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; +import { Box, Image, Grid, Heading, Text } from 'theme-ui'; const Threebox = () => { - return( - - - Design a PCB - - - - - Design Art - - - - Create Firmware - - - - ) + return ( + + + Design a PCB + + Create your own PCB design and bring it to life! + + + Design Art + + Create stunning art for your PCB design! + + + Create Firmware + + Develop firmware to control your PCB! + + + ) } export default Threebox; \ No newline at end of file diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx index 02a4ec7..9c57ec2 100644 --- a/app/components/FAQcard.tsx +++ b/app/components/FAQcard.tsx @@ -1,23 +1,20 @@ -import { kMaxLength } from 'buffer'; import React from 'react'; -import { Box } from 'theme-ui'; -// Define the type for the props +import { Box, Heading, Text } from 'theme-ui'; + interface CardProps { question: string; answer: string; } -// Create the component const FAQcard: React.FC = ({ question, answer }) => { return ( -

    {question}

    -

    {answer}

    + {question} + {answer}     ); }; -// Inline styles for the component const styles = { card: { borderRadius: '20px', @@ -25,25 +22,24 @@ const styles = { margin: '16px', backgroundColor: 'rgba(201, 227, 255, 0.73)', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', - height: ['fill-content', '16vw'], - width: ['60vw', '26vw'], + width: ['90vw', '60vw', '26vw'], border: '5px solid rgba(39, 114, 193, 0.42)', overflow: 'hidden', }, question: { - fontSize: 'calc(1.2vw + 1.2vh)', + fontSize: ['1.2rem', 'calc(1.2vw + 1.2vh)'], fontWeight: 790, color: '#FFFFFF', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', paddingLeft: '2%', }, answer: { - fontSize: 'calc(0.6vw + 0.6vh)', + fontSize: ['1rem', 'calc(0.6vw + 0.6vh)'], color: '#003180', - marginTop: '8px', + marginTop: '15px', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', fontWeight: 600, - paddingLeft: '2%' + paddingLeft: '2%', }, }; diff --git a/app/components/dropdown.tsx b/app/components/dropdown.tsx index 6e8cd1f..ba42682 100644 --- a/app/components/dropdown.tsx +++ b/app/components/dropdown.tsx @@ -1,76 +1,42 @@ -/** @jsxImportSource theme-ui */ -import { useState } from 'react'; +import React, { useState } from 'react'; -const FAQItem = ({ question, answer }) => { +interface DropdownProps { + label: string; + options: string[]; +} + +const Dropdown: React.FC = ({ label, options }) => { const [isOpen, setIsOpen] = useState(false); return ( -
    - + {isOpen && ( -

    - {answer} -

    +
    +
    + {options.map((option, index) => ( + + ))} +
    +
    )}
    ); }; -const FAQ = ({ items }) => { - return ( -
    - {items.map((item, index) => ( - - ))} -
    - ); -}; - -export default FAQ; +export default Dropdown; diff --git a/app/components/footer.tsx b/app/components/footer.tsx index afca7d9..a091229 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -1,31 +1,27 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; +import { Box, Text } from 'theme-ui'; - const footer = ()=> { - return ( -
    - Made with ❤️ by @bright li & @Scott -
    - ) +const Footer = () => { + return ( + + Made with ❤️ by @bright li & @Scott + + ); } -export default footer; \ No newline at end of file + +export default Footer; \ No newline at end of file diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx index 640c043..1cb4bd2 100644 --- a/app/components/mdx.tsx +++ b/app/components/mdx.tsx @@ -1,18 +1,33 @@ import { Heading, Text } from 'theme-ui' + const components = { - h1: (props) => , - h2: (props) => , - h3: (props) => , - p: (props) => , - ol: (props) =>
      , - li: (props) =>
    1. , - a: (props) => , - + h1: (props) => , + h2: (props) => , + h3: (props) => , + p: (props) => , + ol: (props) =>
        , + li: (props) =>
      1. , + a: (props) => , } + export default components \ No newline at end of file diff --git a/app/components/middle.tsx b/app/components/middle.tsx index e69de29..0320d8e 100644 --- a/app/components/middle.tsx +++ b/app/components/middle.tsx @@ -0,0 +1,50 @@ +import { + Box, + Heading, + Text, + } from 'theme-ui'; + + const Middle = () => { + return ( + + + At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts! + + + Frequently Asked Questions + + + ); + } + + export default Middle; \ No newline at end of file diff --git a/app/components/top.tsx b/app/components/top.tsx index ce10216..71d8a09 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -1,106 +1,79 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; - import dynamic from 'next/dynamic'; +import { Box, Button, Heading } from 'theme-ui'; +import dynamic from 'next/dynamic'; - const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); +const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); - const tipitytopity = ()=> { - return ( - { + return ( + + {typeof window !== 'undefined' && } + - - {typeof window !== 'undefined' && } - {/* - Example PCB! */} - + - - Hacky Holidays! - - - Design a PCB holiday decoration this winter, get one shipped! - - - - - - - - - - - ) + + + + ); } + export default tipitytopity; \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 98ca6d1..55ea7cd 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,33 +1,18 @@ "use client"; - /* eslint-disable @typescript-eslint/no-unused-vars */ import { keyframes } from '@emotion/react'; import Snowfall from 'react-snowfall'; -// import '@google/model-viewer'; -// import Script from 'next/script'; import { useEffect } from 'react'; -// import { tipitytopity } from './components/top' -// import Image from "next/image"; -import { - Box, - Button, - Container, - Image, - Grid, - Heading, - Text, -} from 'theme-ui'; -const Footer = dynamic(() => import('./components/footer'), { ssr: false }); - +import { Box, Image, Heading, Grid } from 'theme-ui'; import dynamic from 'next/dynamic'; + +const Footer = dynamic(() => import('./components/footer'), { ssr: false }); const Top = dynamic(() => import('./components/top'), { ssr: false }); -const FAQcard = dynamic(() => import('./components/FAQcard'), {ssr: false}); +const FAQcard = dynamic(() => import('./components/FAQcard'), { ssr: false }); const ThreeGrid = dynamic(() => import('./components/3box'), { ssr: false }); -// const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); -const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); -const fall = ( rotationDirection: number) => keyframes` +const fall = (rotationDirection: number) => keyframes` from { transform: translateY(-10%) rotate(0deg); } @@ -42,134 +27,100 @@ export default function Home() { import('@google/model-viewer'); } }, []); - return ( - - - - - - + return ( + + + + + - - - - - - - - - - - - + - - - -

        - Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th! - Once your PR gets approved, you will get your PCB decoration just in time for the holidays!🎄 - - - - At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts!



        - FAQ:         - - + height: ['auto', '100vh'], + mt: '4vh', +}}> +

        + Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th! + Once your PR gets approved, you will get your PCB decoration just in time for the holidays!🎄 + + + + At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts! + + Frequently Asked Questions + + + - Any more questions? Ask in #hacky-holidays! + + Any more questions? Ask in #hacky-holidays! -         -         -
        +         +         +