build: initial template with the first projects

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "custom"
+}

.github/workflows/deploy.yml

@@ -0,0 +1,42 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Use pnpm 🗜️
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.10.5
+          run_install: false
+
+      - name: Use Node.js 🐢
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.10.0
+          cache: 'pnpm'
+
+      - name: Install dependencies ⚙️
+        run: pnpm install
+
+      - name: Build 🛠️
+        run: pnpm build:prod
+        env:
+          API_PROJECTS_URL: ${{ secrets.API_PROJECTS_URL }}
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.1.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Erick Vargas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+# Frontendmentor Challenges Solved

apps/fylo-landing-page-with-two-column-layout/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "custom"
+}

apps/fylo-landing-page-with-two-column-layout/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
+}

apps/fylo-landing-page-with-two-column-layout/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

apps/fylo-landing-page-with-two-column-layout/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.1.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/fylo-landing-page-with-two-column-layout/README.md

@@ -0,0 +1 @@
+# Fylo landing page with two column layout

apps/fylo-landing-page-with-two-column-layout/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config'
+import { getAstroConfig } from 'shared/config/astro'
+
+const config = getAstroConfig({ project: 'fylo-landing-page-with-two-column-layout' })
+
+// https://astro.build/config
+export default defineConfig(config)

apps/fylo-landing-page-with-two-column-layout/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "fylo-landing-page-with-two-column-layout",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "astro": "astro",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "build": "pnpm check && astro build",
+    "lint": "eslint --fix src/**/*.{astro,ts}",
+    "format": "prettier --write src/**/*.astro",
+    "check": "astro check --tsconfig tsconfig.json"
+  },
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=18.18.0",
+    "pnpm": ">=8.10.0"
+  },
+  "devDependencies": {
+    "eslint-config-custom": "workspace:*",
+    "shared": "workspace:*"
+  }
+}

apps/fylo-landing-page-with-two-column-layout/src/components/Button.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'button'> {}
+
+const { class: extraClass } = Astro.props
+---
+
+<button
+  type="submit"
+  class:list={[
+    'h-12 w-full rounded bg-accent-blue px-4 py-2 text-sm font-bold text-white shadow-lg outline-none hover:bg-accent-green active:border-0',
+    extraClass
+  ]}
+>
+  <slot />
+</button>

apps/fylo-landing-page-with-two-column-layout/src/components/FirstContact.astro

@@ -0,0 +1,37 @@
+---
+import Icon from 'shared/components/Icon.astro'
+
+import Button from '@/components/Button.astro'
+---
+
+<section
+  id="first-contact"
+  class="container flex flex-wrap-reverse items-center justify-center py-12 lg:flex-wrap lg:pb-0"
+>
+  <div class="w-full text-center lg:w-1/2 lg:text-left">
+    <h2 class="py-2 font-raleway text-3xl font-bold [text-wrap:balance] lg:text-5xl">
+      All your files in one secure location, accesible anywhere.
+    </h2>
+
+    <p class="mx-auto pt-6 text-sm sm:w-3/4 lg:mx-0 lg:text-xl">
+      Fylo stores your most import files in one secure location. Access them wherever you need, share and collaborate
+      with friends, family, and co-workers.
+    </p>
+
+    <form class="mt-6 flex flex-wrap items-center justify-center lg:justify-start">
+      <input
+        class="my-4 h-12 w-full rounded border border-solid border-black pl-6 text-sm outline-none sm:w-3/4 lg:w-3/6"
+        type="email"
+        aria-label="Enter your email"
+        placeholder="Enter your email..."
+        required
+      />
+
+      <Button class="sm:w-3/4 lg:mx-4 lg:w-2/6">Get Started</Button>
+    </form>
+  </div>
+
+  <div class="w-full pb-12 sm:w-2/3 lg:w-5/12">
+    <Icon name="illustration-1" />
+  </div>
+</section>

apps/fylo-landing-page-with-two-column-layout/src/components/Footer.astro

@@ -0,0 +1,59 @@
+---
+import Icon from 'shared/components/Icon.astro'
+import Link from 'shared/components/Link.astro'
+import Atributtion from 'shared/components/Atributtion.astro'
+
+const socials = ['facebook', 'twitter', 'instagram']
+---
+
+<footer class="bg-primary-dark pt-20 lg:pt-32">
+  <div
+    class="container flex flex-wrap justify-evenly text-white sm:w-3/4 sm:text-center lg:w-full lg:justify-start lg:text-left"
+  >
+    <div class="w-full pb-12 lg:w-full">
+      <Icon name="logo-white" width={166} class="sm:mx-auto lg:mx-12" />
+    </div>
+
+    <div class="w-full pb-12 lg:w-1/3 lg:pb-0 lg:pl-12">
+      <div class="pb-4">
+        <Icon name="icon-phone" width={18} height={18} class="inline" />
+        <span class="pl-6">Phone: +1-543-123-4567</span>
+      </div>
+      <div class="pb-4">
+        <Icon name="icon-email" width={20} height={16} class="inline" />
+        <span class="pl-6">[email protected]</span>
+      </div>
+    </div>
+
+    <div class="flex w-full flex-wrap justify-start lg:w-2/3">
+      <ul class="w-full pb-8 lg:w-1/3 lg:pb-0 lg:pl-12">
+        <li class="pb-4">About Us</li>
+        <li class="pb-4">Jobs</li>
+        <li class="pb-4">Press</li>
+        <li class="pb-4">Blog</li>
+      </ul>
+
+      <ul class="w-full pb-8 lg:w-1/3 lg:pb-0 lg:pl-12">
+        <li class="pb-4">Contact Us</li>
+        <li class="pb-4">Terms</li>
+        <li class="pb-4">Privacy</li>
+      </ul>
+
+      <div class="w-full pb-8 lg:w-1/3 lg:pb-0">
+        <ul class="flex justify-center gap-x-8 pb-4 lg:justify-start lg:gap-x-4">
+          {
+            socials.map((social) => (
+              <li>
+                <Link external to={`https://${social}.com/`}>
+                  <Icon name={social} width={40} height={40} class="rounded-full border p-2" />
+                </Link>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <Atributtion as="p" class="pb-4 text-center text-sm text-white lg:mt-12" />
+</footer>

apps/fylo-landing-page-with-two-column-layout/src/components/Header.astro

@@ -0,0 +1,18 @@
+---
+import Icon from 'shared/components/Icon.astro'
+import Link from 'shared/components/Link.astro'
+---
+
+<header class="container flex flex-wrap items-center justify-center py-12">
+  <div class="w-1/2">
+    <Icon name="logo" width={166} />
+  </div>
+
+  <nav class="invisible w-5/12 sm:visible">
+    <ul class="flex flex-wrap justify-center text-center align-middle text-sm md:text-base">
+      <li class="w-1/4"><Link to="#">Features</Link></li>
+      <li class="w-1/4"><Link to="#">Team</Link></li>
+      <li class="w-1/4"><Link to="#">Sign In</Link></li>
+    </ul>
+  </nav>
+</header>

apps/fylo-landing-page-with-two-column-layout/src/components/SecondContact.astro

@@ -0,0 +1,30 @@
+---
+import Button from '@/components/Button.astro'
+---
+
+<section id="second-contact" class="bg-primary-desa py-16 lg:py-32">
+  <div class="container flex flex-wrap items-start justify-center text-center text-white lg:text-left">
+    <div class="w-full lg:w-1/2">
+      <h3 class="w-full font-raleway text-3xl font-bold lg:text-4xl">Get early access today</h3>
+
+      <p class="mx-auto py-8 sm:w-3/4 lg:mx-0 lg:w-4/5 lg:pt-6 lg:text-lg">
+        It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions,
+        our support team would be happy to help you.
+      </p>
+    </div>
+
+    <div class="w-full lg:w-2/5">
+      <form class="flex flex-col items-start py-2 sm:justify-center">
+        <input
+          type="email"
+          aria-label="Enter your email"
+          placeholder="[email protected]"
+          class="mx-auto h-12 w-full rounded border border-solid border-black pl-4 text-sm text-black outline-none sm:w-3/4 lg:w-full lg:pl-6"
+          required
+        />
+
+        <Button class="mx-auto my-2 sm:w-3/4 lg:mx-0 lg:my-4 lg:w-3/6">Get Started For Free</Button>
+      </form>
+    </div>
+  </div>
+</section>