diff --git a/.gitignore b/.gitignore index 488b3a5..f637d8c 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# Local Netlify folder +.netlify diff --git a/.husky/pre-commit b/.husky/pre-commit old mode 100755 new mode 100644 diff --git a/.prettierrc b/.prettierrc index d57413b..222861c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,4 @@ { - "endOfLine": "lf", - "trailingComma": "none", - "plugins": [""], - "pluginSearchDirs": ["."], - "overrides": [] - } \ No newline at end of file + "tabWidth": 2, + "useTabs": false +} diff --git a/README.md b/README.md index 88c7d0f..ce47fa6 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ + # site [![Netlify Status](https://api.netlify.com/api/v1/badges/405c64d7-3e5c-41c6-8577-13298a2edcf7/deploy-status?branch=main)](https://app.netlify.com/sites/chimerical-fox-6d9845/deploys) diff --git a/astro.config.mjs b/astro.config.mjs new file mode 100644 index 0000000..882e651 --- /dev/null +++ b/astro.config.mjs @@ -0,0 +1,4 @@ +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({}); diff --git a/index.html b/index.html deleted file mode 100644 index c0748ec..0000000 --- a/index.html +++ /dev/null @@ -1,243 +0,0 @@ - - - - - The Purple Bubble - - - - - - - - - - - - - - - - -
- - - -
-
-

Welcome To The Purple Bubble!

- - - A Free and OpenSource Project Created and Maintained By The - Community - - - - -
- - Help Contribute - - -
-
-
-
-
- - - - -
-

- End-to-End Encryption -

- - - Ensure your conversations are secure and private with - end-to-end encryption. - - -
-
-
- - - - -
-

Group Chats

- - - Easily create and manage group chats to collaborate with - friends, family, or colleagues. - - -
-
-
- - - - -
-

- Cross-Platform Compatibility -

- - - Access your messages from any device, whether it's a - smartphone, tablet, or computer. - - -
-
-
- - - - -
-

- Customizable Themes -

- - - Personalize your messaging experience with a wide range of - customizable themes and color options. - - -
-
-
-
- -
-
-
-
- - - \ No newline at end of file diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..86e0391 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,3 @@ +[build] + command = "npm run build" + publish = "dist" \ No newline at end of file diff --git a/package.json b/package.json index 44087df..c461324 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,19 @@ { "name": "thepurplebubble-site", - "version": "1.0.0", + "version": "1.1.0", "private": true, "dependencies": { "@lottiefiles/lottie-player": "1.5.7", - "parcel": "^2.10.3" + "parcel": "^2.10.3", + "astro": "^4.0.4" }, "scripts": { - "prepare": "husky install" + "prepare": "husky install", + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" }, "devDependencies": { "eslint": "^8.55.0", @@ -20,4 +26,4 @@ "lint-staged": { "**/*": "prettier --write --ignore-unknown" } -} +} \ No newline at end of file diff --git a/src/components/Card.astro b/src/components/Card.astro new file mode 100644 index 0000000..bd6d597 --- /dev/null +++ b/src/components/Card.astro @@ -0,0 +1,61 @@ +--- +interface Props { + title: string; + body: string; + href: string; +} + +const { href, title, body } = Astro.props; +--- + +
  • + +

    + {title} + → +

    +

    + {body} +

    +     +
    • + diff --git a/components/feature-card2.css b/src/components/feature-card2.css similarity index 100% rename from components/feature-card2.css rename to src/components/feature-card2.css diff --git a/components/feature-card2.html b/src/components/feature-card2.html similarity index 100% rename from components/feature-card2.html rename to src/components/feature-card2.html diff --git a/components/feature-card21.css b/src/components/feature-card21.css similarity index 100% rename from components/feature-card21.css rename to src/components/feature-card21.css diff --git a/components/feature-card21.html b/src/components/feature-card21.html similarity index 100% rename from components/feature-card21.html rename to src/components/feature-card21.html diff --git a/components/feature-card22.css b/src/components/feature-card22.css similarity index 100% rename from components/feature-card22.css rename to src/components/feature-card22.css diff --git a/components/feature-card22.html b/src/components/feature-card22.html similarity index 100% rename from components/feature-card22.html rename to src/components/feature-card22.html diff --git a/components/feature-card23.css b/src/components/feature-card23.css similarity index 100% rename from components/feature-card23.css rename to src/components/feature-card23.css diff --git a/components/feature-card23.html b/src/components/feature-card23.html similarity index 100% rename from components/feature-card23.html rename to src/components/feature-card23.html diff --git a/components/feature-card24.css b/src/components/feature-card24.css similarity index 100% rename from components/feature-card24.css rename to src/components/feature-card24.css diff --git a/components/feature-card24.html b/src/components/feature-card24.html similarity index 100% rename from components/feature-card24.html rename to src/components/feature-card24.html diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..f964fe0 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..cfdf00d --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,140 @@ +--- +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + + + + + + + + {title} + + + + + + + + diff --git a/404.html b/src/pages/404.html similarity index 100% rename from 404.html rename to src/pages/404.html diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..3fe405b --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,112 @@ +--- +import Layout from '../layouts/Layout.astro'; +import '../styles/style.css'; +--- + + +
    +
    + + +
    +
    +

    Welcome To The Purple Bubble!

    + + + A Free and OpenSource Project Created and Maintained By The + Community + + + + +
    + + Help Contribute + + +
    +
    +
    +
    +
    + + + + +
    +

    + End-to-End Encryption +

    + + + Ensure your conversations are secure and private with + end-to-end encryption. + + +
    +
    +
    + + + + +
    +

    Group Chats

    + + + Easily create and manage group chats to collaborate with + friends, family, or colleagues. + + +
    +
    +
    + + + + +
    +

    + Cross-Platform Compatibility +

    + + + Access your messages from any device, whether it's a + smartphone, tablet, or computer. + + +
    +
    +
    + + + + +
    +

    + Customizable Themes +

    + + + Personalize your messaging experience with a wide range of + customizable themes and color options. + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +     \ No newline at end of file diff --git a/404.css b/src/styles/404.css similarity index 100% rename from 404.css rename to src/styles/404.css diff --git a/index.css b/src/styles/style.css similarity index 74% rename from index.css rename to src/styles/style.css index f7aa53a..1f3d465 100644 --- a/index.css +++ b/src/styles/style.css @@ -1,3 +1,106 @@ +:root { + --dl-color-gray-500: #777474ff; + --dl-color-gray-700: #999999; + --dl-color-gray-900: #d9d9d9; + --dl-size-size-large: 144px; + --dl-size-size-small: 48px; + --dl-color-danger-300: #a22020; + --dl-color-danger-500: #bf2626; + --dl-color-danger-700: #e14747; + --dl-color-gray-black: #ffffffff; + --dl-color-gray-white: #ffffff; + --dl-size-size-medium: 96px; + --dl-size-size-xlarge: 192px; + --dl-size-size-xsmall: 16px; + --dl-space-space-unit: 16px; + --dl-color-primary-100: #003eb3; + --dl-color-primary-300: #0074f0; + --dl-color-primary-500: #14a9ff; + --dl-color-primary-700: #85dcff; + --dl-color-success-300: #199033; + --dl-color-success-500: #32a94c; + --dl-color-success-700: #4cc366; + --dl-size-size-xxlarge: 288px; + --dl-size-size-maxwidth: 1400px; + --dl-radius-radius-round: 50%; + --dl-space-space-halfunit: 8px; + --dl-space-space-sixunits: 96px; + --dl-space-space-twounits: 32px; + --dl-radius-radius-radius2: 2px; + --dl-radius-radius-radius4: 4px; + --dl-radius-radius-radius8: 8px; + --dl-space-space-fiveunits: 80px; + --dl-space-space-fourunits: 64px; + --dl-space-space-threeunits: 48px; + --dl-space-space-oneandhalfunits: 24px; +} + +.button { + color: var(--dl-color-gray-black); + display: inline-block; + padding: 0.5rem 1rem; + border-color: var(--dl-color-gray-black); + border-width: 1px; + border-radius: 4px; + background-color: var(--dl-color-gray-white); +} + +.input { + color: var(--dl-color-gray-black); + cursor: auto; + padding: 0.5rem 1rem; + border-color: var(--dl-color-gray-black); + border-width: 1px; + border-radius: 4px; + background-color: var(--dl-color-gray-white); +} + +.textarea { + color: var(--dl-color-gray-black); + cursor: auto; + padding: 0.5rem; + border-color: var(--dl-color-gray-black); + border-width: 1px; + border-radius: 4px; + background-color: var(--dl-color-gray-white); +} + +.list { + width: 100%; + margin: 1em 0px 1em 0px; + display: block; + padding: 0px 0px 0px 1.5rem; + list-style-type: none; + list-style-position: outside; +} + +.list-item { + display: list-item; +} + +.teleport-show { + display: flex !important; + transform: none !important; +} + +.Content { + font-size: 16px; + font-family: Inter; + font-weight: 400; + line-height: 1.15; + text-transform: none; + text-decoration: none; +} + +.Heading { + font-size: 32px; + font-family: Inter; + font-weight: 700; + line-height: 1.15; + text-transform: none; + text-decoration: none; +} + .feature-card21-feature-card { width: 100%; display: flex; @@ -7,6 +110,7 @@ flex-direction: row; justify-content: flex-start; } + .feature-card21-icon { fill: var(--dl-color-gray-500); width: 2rem; @@ -14,12 +118,14 @@ flex-shrink: 0; margin-right: var(--dl-space-space-oneandhalfunits); } + .feature-card21-container { display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; } + .feature-card21-text { font-weight: 600; margin-bottom: var(--dl-space-space-unit); @@ -29,10 +135,12 @@ .feature-card21-feature-card { flex-direction: row; } + .feature-card21-container { flex-direction: column; } } + @media (max-width: 479px) { .feature-card21-container { flex-direction: column; @@ -48,6 +156,7 @@ flex-direction: row; justify-content: flex-start; } + .feature-card22-icon { fill: var(--dl-color-gray-500); width: 2rem; @@ -55,12 +164,14 @@ flex-shrink: 0; margin-right: var(--dl-space-space-oneandhalfunits); } + .feature-card22-container { display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; } + .feature-card22-text { font-weight: 600; margin-bottom: var(--dl-space-space-unit); @@ -70,10 +181,12 @@ .feature-card22-feature-card { flex-direction: row; } + .feature-card22-container { flex-direction: column; } } + @media (max-width: 479px) { .feature-card22-container { flex-direction: column; @@ -89,6 +202,7 @@ flex-direction: row; justify-content: flex-start; } + .feature-card23-icon { fill: var(--dl-color-gray-500); width: 2rem; @@ -96,12 +210,14 @@ flex-shrink: 0; margin-right: var(--dl-space-space-oneandhalfunits); } + .feature-card23-container { display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; } + .feature-card23-text { font-weight: 600; margin-bottom: var(--dl-space-space-unit); @@ -111,10 +227,12 @@ .feature-card23-feature-card { flex-direction: row; } + .feature-card23-container { flex-direction: column; } } + @media (max-width: 479px) { .feature-card23-container { flex-direction: column; @@ -130,6 +248,7 @@ flex-direction: row; justify-content: flex-start; } + .feature-card24-icon { fill: var(--dl-color-gray-500); width: 2rem; @@ -137,12 +256,14 @@ flex-shrink: 0; margin-right: var(--dl-space-space-oneandhalfunits); } + .feature-card24-container { display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; } + .feature-card24-text { font-weight: 600; margin-bottom: var(--dl-space-space-unit); @@ -152,10 +273,12 @@ .feature-card24-feature-card { flex-direction: row; } + .feature-card24-container { flex-direction: column; } } + @media (max-width: 479px) { .feature-card24-container { flex-direction: column; @@ -172,6 +295,7 @@ justify-content: flex-start; background-color: #000000; } + .home-hero { width: 100%; height: 757px; @@ -185,20 +309,24 @@ justify-content: center; background-image: url("public/bg.png"); } + .home-text { color: var(--dl-color-gray-white); font-size: 3rem; } + .home-text1 { color: var(--dl-color-gray-white); margin-top: var(--dl-space-space-twounits); margin-bottom: var(--dl-space-space-twounits); } + .home-btn-group { display: flex; align-items: center; flex-direction: row; } + .home-link { color: var(--dl-color-gray-white); font-size: 0.75rem; @@ -213,9 +341,11 @@ text-decoration: none; background-color: transparent; } + .home-link:hover { transform: scale(1.02); } + .home-button { color: var(--dl-color-gray-white); font-size: 0.75rem; @@ -229,9 +359,11 @@ text-transform: uppercase; background-color: transparent; } + .home-button:hover { transform: scale(1.02); } + .home-features { width: 100%; height: 578px; @@ -243,6 +375,7 @@ justify-content: flex-start; background-color: #000000; } + .home-container1 { width: 595px; height: 523px; @@ -250,6 +383,7 @@ align-items: flex-start; flex-direction: column; } + .home-container2 { width: 664px; height: 453px; @@ -257,15 +391,18 @@ align-items: center; justify-content: center; } + .home-lottie-node { width: 483px; height: 504px; } + @media (max-width: 1600px) { .home-hero { background-size: cover; - background-image: url("public/bg.png"); + background-image: url("/bg.png"); } + .home-features { width: 100%; align-items: flex-start; @@ -273,45 +410,55 @@ flex-direction: row; justify-content: flex-start; } + .home-container1 { width: 585px; } } + @media (max-width: 1200px) { .home-hero { background-size: cover; background-image: 4350d34e-bac0-48e1-b3d6-59ff1f2d7c82; } + .home-features { height: 761px; margin-bottom: 0px; } + .home-container1 { width: 531px; padding-right: 13px; } } + @media (max-width: 991px) { .home-hero { flex-direction: column; } + .home-text { text-align: center; } + .home-text1 { text-align: center; } } + @media (max-width: 767px) { .home-hero { padding-left: var(--dl-space-space-twounits); padding-right: var(--dl-space-space-twounits); } + .home-features { padding-left: var(--dl-space-space-twounits); padding-right: var(--dl-space-space-twounits); } } + @media (max-width: 479px) { .home-hero { width: 100%; @@ -320,17 +467,20 @@ padding-left: var(--dl-space-space-unit); padding-right: var(--dl-space-space-unit); } + .home-btn-group { flex-direction: column; } + .home-button { margin-top: var(--dl-space-space-unit); margin-left: 0px; } + .home-features { padding-top: var(--dl-space-space-twounits); padding-left: var(--dl-space-space-unit); padding-right: var(--dl-space-space-unit); padding-bottom: var(--dl-space-space-twounits); } -} +} \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index e2bb40c..0000000 --- a/style.css +++ /dev/null @@ -1,94 +0,0 @@ -:root { - --dl-color-gray-500: #777474ff; - --dl-color-gray-700: #999999; - --dl-color-gray-900: #d9d9d9; - --dl-size-size-large: 144px; - --dl-size-size-small: 48px; - --dl-color-danger-300: #a22020; - --dl-color-danger-500: #bf2626; - --dl-color-danger-700: #e14747; - --dl-color-gray-black: #ffffffff; - --dl-color-gray-white: #ffffff; - --dl-size-size-medium: 96px; - --dl-size-size-xlarge: 192px; - --dl-size-size-xsmall: 16px; - --dl-space-space-unit: 16px; - --dl-color-primary-100: #003eb3; - --dl-color-primary-300: #0074f0; - --dl-color-primary-500: #14a9ff; - --dl-color-primary-700: #85dcff; - --dl-color-success-300: #199033; - --dl-color-success-500: #32a94c; - --dl-color-success-700: #4cc366; - --dl-size-size-xxlarge: 288px; - --dl-size-size-maxwidth: 1400px; - --dl-radius-radius-round: 50%; - --dl-space-space-halfunit: 8px; - --dl-space-space-sixunits: 96px; - --dl-space-space-twounits: 32px; - --dl-radius-radius-radius2: 2px; - --dl-radius-radius-radius4: 4px; - --dl-radius-radius-radius8: 8px; - --dl-space-space-fiveunits: 80px; - --dl-space-space-fourunits: 64px; - --dl-space-space-threeunits: 48px; - --dl-space-space-oneandhalfunits: 24px; -} -.button { - color: var(--dl-color-gray-black); - display: inline-block; - padding: 0.5rem 1rem; - border-color: var(--dl-color-gray-black); - border-width: 1px; - border-radius: 4px; - background-color: var(--dl-color-gray-white); -} -.input { - color: var(--dl-color-gray-black); - cursor: auto; - padding: 0.5rem 1rem; - border-color: var(--dl-color-gray-black); - border-width: 1px; - border-radius: 4px; - background-color: var(--dl-color-gray-white); -} -.textarea { - color: var(--dl-color-gray-black); - cursor: auto; - padding: 0.5rem; - border-color: var(--dl-color-gray-black); - border-width: 1px; - border-radius: 4px; - background-color: var(--dl-color-gray-white); -} -.list { - width: 100%; - margin: 1em 0px 1em 0px; - display: block; - padding: 0px 0px 0px 1.5rem; - list-style-type: none; - list-style-position: outside; -} -.list-item { - display: list-item; -} -.teleport-show { - display: flex !important; - transform: none !important; -} -.Content { - font-size: 16px; - font-family: Inter; - font-weight: 400; - line-height: 1.15; - text-transform: none; - text-decoration: none; -} -.Heading { - font-size: 32px; - font-family: Inter; - font-weight: 700; - line-height: 1.15; - text-transform: none; - text-decoration: none; -} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..d78f81e --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "astro/tsconfigs/base" +}