summaryrefslogtreecommitdiff
path: root/content/_index.html
blob: eafb0c10db4884ed826ff8ef3f68a84edb7d206e (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
---
title: Build customer scrapers in minutes
layout: hextra-home
images:
  - images/ogimage.png
---

<div class="max-w-2xl mx-auto text-center">
  <h1 class="my-8 text-[3rem] lg:text-[4rem] leading-tight font-bold mx-auto">
    Custom scrapers <br />
    built in minutes.
  </h1>

  <p class="my-16 text-xl leading-relaxed text-gray-700 dark:text-gray-300">
  Flyscrape is a modern toolkit for building custom scrapers in minutes.<br /> It can render
  JavaScript, use cookies of your browser and requires no Node.js or Python to run.
  </p>

  <div class="text-center flex flex-col md:block">
    <a href="/docs/getting-started"
      class="inline-block px-8 py-3 md:mr-5 mb-5 md:mb-0 text-lg font-semibold text-center text-white transition-all duration-200 ease-in bg-black border-black border-2 rounded-full cursor-pointer focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-white dark:text-black dark:border-white dark:focus:ring-primary-800">Get
      Started <span style="position:relative;margin-left: 2px;top: -1px">{{< icon name="chevron-right">}}</span></a>
    <!-- <a href="/proxy" -->
    <!--    class="inline-block px-8 py-3 text-lg font-semibold text-center text-black transition-all duration-200 ease-in rounded-full cursor-pointer border-2 border-black focus:outline-none focus:ring-4 focus:ring-primary-300 dark:text-white dark:border-white dark:focus:ring-primary-800">Need Proxies?</a> -->
  </div>
</div>

<div class="w-full max-w-4xl mx-auto my-16 p-4 rounded-md" style="background-image: url('/images/videobg.jpg'); background-size: cover;">
  <!--<p class="mb-4 text-center text-gray-600 dark:text-gray-400">Click the video below to see it in action.</p>
<a href="https://www.youtube.com/watch?v=Yj11v4n9JHA" target="_blank">
<img src="/images/flyscrape-demo.jpg" class="rounded-lg" style="display: block" />
</a>
-->
  <iframe src="https://www.youtube.com/embed/eGk8qFZ9oM4?si=D5j2vssfkPnvVKZy" title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    style="width: 100%; aspect-ratio: 16 / 9;" allowfullscreen class="rounded-md"></iframe>
</div>

<button class="mx-auto inline-block" onclick="document.getElementById('scrollto').scrollIntoView({behavior: 'smooth'})">
Discover the Features
<br />
<span class="text-xl"> {{< icon name="arrow-down">}} </span>
</button>

<div id="scrollto"></div>
<hr class="hidden w-full my-8 dark:block lg:my-12"
  style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.2);" />
<hr id="features" class="w-full my-8 dark:hidden lg:my-12"
  style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.8);" />

<div class="w-full mt-12 text-center lg:text-left">
  <div class="gap-12 flex flex-col lg:grid lg:grid-cols-2">

    <div>
      <h2 class="py-2 mt-12 mb-8 text-4xl font-bold leading-none tracking-tighter text-black not-prose dark:text-white">
        Easy-peasy Setup.
      </h2>
      <p class="text-xl text-gray-800 dark:text-gray-300 sm:text-xl">
        Flyscrape is a standalone scraping tool and does not need Node.js or Python.
        Simply run <code
          class="px-2 py-1 text-sm text-black border border-gray-500 rounded-md dark:text-white whitespace-nowrap">flyscrape new</code>
        and you're ready to scrape.
        <br />
        <br />
        <a href="/docs/getting-started"
          style=" display: inline-block; color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));    text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-position: from-font;">Visit
          the Getting Started Guide</a>
      </p>
    </div>

    <img src="/images/flyscrapenew.gif" class="block rounded-lg order-last lg:order-none w-full mx-auto" loading="lazy" style="max-width: 570px" />
  </div>

  <hr class="hidden dark:block my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.2);" />
  <hr class="w-full dark:hidden my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.8);" />

  <div class="gap-12 flex flex-col lg:grid lg:grid-cols-2">
    <img src="/images/flyscrapebrowser.gif" class="block rounded-lg order-last lg:order-none w-full mx-auto" loading="lazy"  style="max-width: 570px"/>

    <div>
      <h2 class="py-2 mt-12 mb-8 text-4xl font-bold leading-none tracking-tighter text-black not-prose dark:text-white">
        Browser / JS rendering.
      </h2>
      <p class="text-xl text-gray-800 dark:text-gray-300 sm:text-xl">
        Browser Mode can help you scrape even the most difficult sites. Whether the site heavily relies on JavaScript or has Anti-Bot measures, it's always worth a shot.
        <br />
        <br />
        <a href="/docs/configuration/browser-mode"
          style=" display: inline-block; color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));    text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-position: from-font;">Visit
          the Browser Mode Documentation</a>
      </p>
    </div>

  </div>

  <hr class="hidden dark:block my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.2);" />
  <hr class="w-full dark:hidden my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.8);" />

  <div class="gap-12 flex flex-col lg:grid lg:grid-cols-2">

    <div>
      <h2 class="py-2 mt-12 mb-8 text-4xl font-bold leading-none tracking-tighter text-black not-prose dark:text-white">
        Access your Cookies.
      </h2>
      <p class="text-xl text-gray-800 dark:text-gray-300 sm:text-xl">
        Give Flyscrape access to the cookie store of your personal browser. This makes scraping protected websites, that require an active login session easy as cake.
        <br />
        <br />
        <a href="/docs/configuration/cookies"
          style=" display: inline-block; color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));    text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-position: from-font;">Visit
          the Cookie Documentation</a>
      </p>
    </div>

    <img src="/images/flyscrapecookies.gif" class="block rounded-lg order-last lg:order-none w-full mx-auto" loading="lazy" style="max-width: 570px" />
  </div>

  <hr class="hidden dark:block my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.2);" />
  <hr class="w-full dark:hidden my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.8);" />

  <div class="gap-12 flex flex-col lg:grid lg:grid-cols-2">
    <img src="/images/flyscraperequestcontrol.gif" class="block rounded-lg order-last lg:order-none w-full mx-auto" loading="lazy"  style="max-width: 570px"/>

    <div>
      <h2 class="py-2 mt-12 mb-8 text-4xl font-bold leading-none tracking-tighter text-black not-prose dark:text-white">
        Precise Request Control.
      </h2>
      <p class="text-xl text-gray-800 dark:text-gray-300 sm:text-xl">
        Precisely control how fast requests are processed, what links to follow or what sites to avoid.
        8 different dials allow you to fine-tune Flyscrape's behaviour for virtually every website.
        <br />
        <br />
        <a href="/docs/configuration"
          style=" display: inline-block; color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));    text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-position: from-font;">Browse all Configuration Options</a>
      </p>
    </div>

  </div>

  <hr class="hidden dark:block my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.2);" />
  <hr class="w-full dark:hidden my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.8);" />

  <div class="gap-12 flex flex-col lg:grid lg:grid-cols-2">

    <div>
      <h2 class="py-2 mt-12 mb-8 text-4xl font-bold leading-none tracking-tighter text-black not-prose dark:text-white">
        Extract exactly what you need.
      </h2>
      <p class="text-xl text-gray-800 dark:text-gray-300 sm:text-xl">
        Flyscrape comes with the full power of JavaScript, allowing you to precisely define what you want to scrape from a website. 
        With its familiar jQuery- or cheerio-like API selecting HTML elements becomes second nature.
        <br />
        <br />
        <a href="/docs/api-reference"
          style=" display: inline-block; color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));    text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-position: from-font;">Visit
          the API Reference</a>
      </p>
    </div>

    <img src="/images/flyscrapequery.jpg" class="block rounded-lg order-last lg:order-none w-full mx-auto" loading="lazy" style="max-width: 570px"/>
  </div>

  <hr class="hidden dark:block my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.2);" />
  <hr class="w-full dark:hidden my-24"
    style="border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.8);" />


  <h2
    class="py-2 mx-auto mt-12 mb-8 text-4xl font-bold leading-none tracking-tighter text-black  not-prose dark:text-white text-center">
    Want to give Flyscrape a try?
  </h2>
  <p class="mx-auto text-xl text-gray-800 dark:text-gray-300 sm:text-xl text-center">
    Dive into our user-friendly guide and discover how to get started with ease.
  </p>

</div>
<div class="mx-auto my-12 text-lg ">


  <a href="/docs/getting-started"
    class="inline-block px-8 py-3 text-lg font-semibold text-center text-white transition-all duration-200 ease-in bg-black rounded-full cursor-pointer focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-white dark:text-black dark:focus:ring-primary-800">Get
    Started <span style="position:relative;margin-left: 2px;top: -1px">{{< icon name="chevron-right">}}</span></a>

</div>

<script async src="https://app.flyscrape.com/script.js?v=0"></script>