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 -

+ + + + ) }