diff options
| author | secondl1ght <[email protected]> | 2022-07-21 12:53:36 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-07-21 12:53:36 -0600 |
| commit | a124ebdfdc90aee2c8af0fffa83500055829db92 (patch) | |
| tree | 0591d6f8af65c80a6ba4de6cf9bcf42fb154485f | |
| parent | 7ad85953f44f25b8c341bff94fd939014a7dd52e (diff) | |
| download | coinos-ui-a124ebdfdc90aee2c8af0fffa83500055829db92.tar.gz coinos-ui-a124ebdfdc90aee2c8af0fffa83500055829db92.zip | |
move landing hero into comp
| -rw-r--r-- | src/components/LandingHero.svelte | 35 | ||||
| -rw-r--r-- | src/components/index.js | 1 | ||||
| -rw-r--r-- | src/routes/index.svelte | 36 |
3 files changed, 39 insertions, 33 deletions
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte new file mode 100644 index 00000000..756564de --- /dev/null +++ b/src/components/LandingHero.svelte @@ -0,0 +1,35 @@ +<script> + import { PrimaryButton } from '../components'; +</script> + +<div> + <div class="space-y-10"> + <h1 + class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight" + > + The <span class="relative"> + easiest + <img + src="/icons/rays.svg" + alt="rays" + class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" + /> + </span> way to accept Bitcoin in your store. + </h1> + <h2 + class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium" + > + Grow your customer base and revenue by accepting Bitcoin with an easy-to-use and managed Point + of Sale. No software or hardware required. + </h2> + <div class="flex justify-center"> + <PrimaryButton title="Start in Seconds" /> + </div> + </div> + <!-- hero image --> + <img + src="/images/hero-image.png" + alt="tablet-pos" + class="w-full md:w-2/3 max-w-5xl mx-auto mt-20" + /> +</div> diff --git a/src/components/index.js b/src/components/index.js index 8f82d324..448db45d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,5 @@ export { default as LandingHeader } from './LandingHeader.svelte'; +export { default as LandingHero } from './LandingHero.svelte'; export { default as LandingInfoCard } from './LandingInfoCard.svelte'; export { default as HowItWorksCard } from './HowItWorksCard.svelte'; export { default as FaqCard } from './FaqCard.svelte'; diff --git a/src/routes/index.svelte b/src/routes/index.svelte index f1d4e263..8912e41e 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,10 +1,10 @@ <script> import { LandingHeader, + LandingHero, LandingInfoCard, HowItWorksCard, - FaqCard, - PrimaryButton + FaqCard } from '../components'; let howItWorks; @@ -52,37 +52,7 @@ <main class="space-y-40 py-20 md:py-32 lg:py-40 px-5 md:px-0"> <!-- hero --> - <div> - <div class="space-y-10"> - <h1 - class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight" - > - The <span class="relative"> - easiest - <img - src="/icons/rays.svg" - alt="rays" - class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" - /> - </span> way to accept Bitcoin in your store. - </h1> - <h2 - class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium" - > - Grow your customer base and revenue by accepting Bitcoin with an easy-to-use and managed - Point of Sale. No software or hardware required. - </h2> - <div class="flex justify-center"> - <PrimaryButton title="Start in Seconds" /> - </div> - </div> - <!-- hero image --> - <img - src="/images/hero-image.png" - alt="tablet-pos" - class="w-full md:w-2/3 max-w-5xl mx-auto mt-20" - /> - </div> + <LandingHero /> <!-- landing info 1 --> <LandingInfoCard |