From a8c579b94eb589c5b109b8c6ce5189a21fcd4242 Mon Sep 17 00:00:00 2001 From: SrJuggernaut Date: Mon, 18 Sep 2023 14:29:54 -0600 Subject: [PATCH] feat: static homepage --- src/app/Clanes.tsx | 68 +++++++++++++++++++++++ src/app/Hero.tsx | 131 +++++++++++++++++++++++++++++++++++++++++++++ src/app/Social.tsx | 75 ++++++++++++++++++++++++++ src/app/Team.tsx | 107 ++++++++++++++++++++++++++++++++++++ src/app/page.tsx | 11 ++-- 5 files changed, 389 insertions(+), 3 deletions(-) create mode 100644 src/app/Clanes.tsx create mode 100644 src/app/Hero.tsx create mode 100644 src/app/Social.tsx create mode 100644 src/app/Team.tsx diff --git a/src/app/Clanes.tsx b/src/app/Clanes.tsx new file mode 100644 index 0000000..e718ca0 --- /dev/null +++ b/src/app/Clanes.tsx @@ -0,0 +1,68 @@ +import Typography from '@/components/ui/Typography' +import { css, cx } from '@/styled-system/css' +import { Center } from '@/styled-system/jsx' +import { center, container } from '@/styled-system/patterns' +import { button, card } from '@/styled-system/recipes' +import NextImage from 'next/image' +import NextLink from 'next/link' +import { type FC } from 'react' + +const Clanes: FC = () => { + return ( +
+
+
+ Clanes +
+
+ Los clanes son espacios donde compartir nuestros gustos con otros usuarios, dándonos la oportunidad de organizar proyectos y eventos en los cuales formar parte. +
+ + Ver Clanes + + +
+
+
+ +
+
+
+
+
+ ) +} +export default Clanes diff --git a/src/app/Hero.tsx b/src/app/Hero.tsx new file mode 100644 index 0000000..17126b0 --- /dev/null +++ b/src/app/Hero.tsx @@ -0,0 +1,131 @@ +import Typography from '@/components/ui/Typography' +import { css, cx } from '@/styled-system/css' +import { Center, Container } from '@/styled-system/jsx' +import { iconButton } from '@/styled-system/recipes' +import { faArrowDown } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import NextImage from 'next/image' +import { type FC } from 'react' + +const layerCss = css({ + backgroundPositionY: 'bottom', + backgroundPositionX: 'x-start', + backgroundRepeat: 'repeat', + backgroundSize: 'initial', + height: '100vh', + width: '100%', + willChange: 'background-position-y', + animationName: 'bgMotion', + animationTimingFunction: 'linear', + animationIterationCount: 'infinite' +}) + +const Hero: FC = () => { + return ( +
+
+
+
+
+
+ +
+ + EntGamers + + + Comunidad de y para los gamers + +
+
+ +
+ +
+
+
+
+
+ + + +
+ ) +} +export default Hero diff --git a/src/app/Social.tsx b/src/app/Social.tsx new file mode 100644 index 0000000..35f2364 --- /dev/null +++ b/src/app/Social.tsx @@ -0,0 +1,75 @@ +import Typography from '@/components/ui/Typography' +import { css, cx } from '@/styled-system/css' +import { Center } from '@/styled-system/jsx' +import { container } from '@/styled-system/patterns' +import { button, card } from '@/styled-system/recipes' +import { type FC } from 'react' + +const layerCss = css({ + backgroundPositionY: 'bottom', + backgroundPositionX: 'x-start', + backgroundRepeat: 'repeat', + backgroundSize: 'initial', + minHeight: '75vh', + width: '100%', + willChange: 'background-position-y', + animationName: 'bgMotion', + animationTimingFunction: 'linear', + animationIterationCount: 'infinite' +}) + +const Social: FC = () => { + return ( +
+
+
+ +
+
+
+ Redes Sociales + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate deleniti dolore quas sed nemo sit, officia in rem nesciunt quisquam possimus ab! Labore sed reprehenderit quae, hic earum tempora placeat cumque id eos itaque perferendis nulla officia fuga porro, quis, unde facere accusamus repudiandae non? + +
+ + Nuestros Links + +
+
+
+
+
+
+
+ ) +} +export default Social diff --git a/src/app/Team.tsx b/src/app/Team.tsx new file mode 100644 index 0000000..918e594 --- /dev/null +++ b/src/app/Team.tsx @@ -0,0 +1,107 @@ +import { css, cx } from '@/styled-system/css' +import { Container } from '@/styled-system/jsx' +import { center } from '@/styled-system/patterns' +import { card, iconButton } from '@/styled-system/recipes' +import { type IconDefinition } from '@fortawesome/fontawesome-svg-core' +import { faFacebook, faInstagram, faTwitch, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons' +import { faGlobe } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import NextImage from 'next/image' +import { type FC } from 'react' + +interface TeamMember { + image: string + name: string + role: 'moderator' | 'administrator' | 'collaborator' + description: string + socialNetworks: Array<{ + label: string + url: string + icon: IconDefinition + }> +} + +const team: TeamMember[] = [ + { + image: '/images/team/SrJuggernaut.png', + name: 'SrJuggernaut', + role: 'administrator', + description: 'Soy desarrollador web y me gusta jugar videojuegos.', + socialNetworks: [ + { url: 'https://www.facebook.com/SrJuggernaut', label: 'SrJuggernaut Facebook', icon: faFacebook }, + { url: 'https://twitter.com/SrJuggernaut', label: 'SrJuggernaut Twitter', icon: faTwitter }, + { url: 'https://youtube.com/juggernautplays', label: 'SrJuggernaut YouTube', icon: faYoutube }, + { url: 'https://twitch.tv/juggernautplays', label: 'SrJuggernaut Twitch', icon: faTwitch }, + { url: 'https://www.instagram.com/sr_juggernaut', label: 'SrJuggernaut Instagram', icon: faInstagram }, + { url: 'https://srjuggernaut.dev/', label: 'SrJuggernaut Website', icon: faGlobe } + ] + } +] + +const Team: FC = () => { + return ( +
+ + {team.map((member, index) => ( +
+
+ +
+
+

{member.name}

+

{member.description}

+
+ {member.socialNetworks.map((socialNetwork, index) => ( + + + + ))} +
+
+
+ ))} + +
+ ) +} +export default Team diff --git a/src/app/page.tsx b/src/app/page.tsx index 2841f29..68e5567 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,16 @@ +import Clanes from '@/app/Clanes' +import Hero from '@/app/Hero' +import Social from '@/app/Social' +import Team from '@/app/Team' import { type FC } from 'react' const HomePage: FC = () => { return ( <> -

- Home Page -

+ + + + ) }