-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (152 loc) · 7.22 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<link rel="manifest" href="/icon/site.webmanifest">
<link rel="mask-icon" href="/icon/safari-pinned-tab.svg" color="#323232">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#181818">
<meta name="msapplication-config" content="/icon/browserconfig.xml">
<meta name="theme-color" content="#181818">
<meta name="description"
content="Daily planning and motivation has never been easier. Create, manage, and share your tasks, events, and flows with friends.">
</meta>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Project CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/shape.css">
<link rel="stylesheet" href="css/mockup.css">
<!-- Project Scripts -->
<script src="js/main.js"></script>
<script src="js/card.js"></script>
<script src="js/mockup.js"></script>
<title>Your day, redesigned - Flowductive</title>
</head>
<body class="bg-dark text-center text-white">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<div class="container-fluid" id="navbar">
<header class="d-flex flex-wrap justify-content-center py-2 mb-auto border-bottom-dark-red">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto mt-1 text-light text-decoration-none">
<img src="assets/icon.png" width="50px" class="mx-2" />
<h4 class="my-1">Flowductive</h4>
</a>
<ul class="nav nav-pills my-2 ms-4">
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="https://www.flowductive.com/mailing" class="nav-link">Mailing List</a></li>
<li class="nav-item"><a href="https://flowductive.substack.com/p/a-beginners-guide-to-flowductive?showWelcome=true" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="https://www.flowductive.com/press" class="nav-link">Press</a></li>
</ul>
</header>
</div>
<div class="card card1 position-absolute" id="card1"></div>
<div class="card card2 position-absolute" id="card2"></div>
<div class="card card3 position-absolute" id="card3"></div>
<div class="mockup1 position-absolute" id="mockup1"></div>
<div class="mockup2 position-absolute" id="mockup2"></div>
<main>
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4" src="assets/icon.png" alt="" width="144" height="144">
<h1 class="display-5 fw-bold">Your day, redesigned.</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4 subtitle">
Manage your tasks and events quickly, stay motivated with Flows, and connect with your friends. Now available
on iOS + macOS.
</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" onclick="window.location.href='https://apps.apple.com/us/app/flowductive/id1598874582';"
class="btn btn-primary btn-lg px-4 gap-3" style="z-index: 1000;">Download</button>
<button type="button" onclick="window.location.href='https://www.flowductive.com/mailing';"
class="btn btn-outline-secondary btn-lg px-4" style="z-index: 1000;">Get Updates</button>
</div>
</div>
</div>
</main>
<div style="height: 450px"></div>
<div class="bg-light text-dark p-4">
<p class="display-5 p-4 mt-4 fw-bold">Stay focused with Flows.</p>
<img src="assets/flows_explained.png" width="400px" alt=""></img>
<hr style="opacity: 0.1">
<div class="container my-4">
<div class="row align-items-center gy-5">
<div class="col-md">
<img src="assets/Mockup3.png" width="600px"></img>
</div>
<div class="col-md h5 pb-4" style="text-align: left">
<p class="text-wrap">A fun, social, and unique way to commit time to productive activity.</p>
<ul>
<li class="pb-2">Flowductive finds the right Flow for you</li>
<li class="pb-2">Tackle decks of time-blocking cards daily</li>
<li class="pb-2">Balance your time with Health, Growth, and Grind</li>
</ul>
<p>
<a href="https://www.linkedin.com/pulse/how-flow-can-transform-your-day-flowductive/?trackingId=Yp3nO1qU2MTBYK0j6kMhJQ%3D%3D"
target="_blank">Learn More →</a>
</p>
</div>
</div>
</div>
</div>
<div class="container p-4 my-4">
<div class="row align-items-center">
<div class="col-md text-end">
<p class="display-5 fw-bold pb-4">Find your focus</p>
<p>Starting a Flow is quick and easy.</p>
<p>Spend more time focusing on what matters most.</p>
<p>Track your total productive time.</p>
<p>
</div>
<div class="col-md">
<img src="assets/Mockup4.png" width="350px" style="offset: 1000px 1000px" id="mockup4"></img>
</div>
</div>
</div>
<div class="container p-4 my-4">
<div class="row align-items-center">
<div class="col-md order-last order-md-first">
<img src="assets/Mockup5.png" width="350px" style="offset: 1000px 1000px" id="mockup4"></img>
</div>
<div class="col-md text-start order-first order-md-last">
<p class="display-5 fw-bold pb-4">Seamlessly sync</p>
<div class="pb-3">
<img src="assets/applecal.png" width="30px" class="pe-2"></img>
<img src="assets/googlecal.png" width="35px" class="pe-2">
<!--<img src="assets/outlook.png" width="30px" class="pe-2">-->
</div>
<p>Sync with your favorite third-party providers.</p>
<p>Flowductive syncs across platforms in seconds.</p>
<p>Upcoming events are shown when starting your Flows.</p>
<p>
</div>
</div>
</div>
<div class="container p-4 my-4">
<div class="row align-items-center">
<div class="col-md text-end">
<p class="display-5 fw-bold pb-4">Join your friends <span class="coming-soon">Coming Soon</span></p>
<p>Follow your friends' productivity journeys.</p>
<p>Post updates about your motivational goals.</p>
<p>Send encouragement to your followers.</p>
<p>
</div>
<div class="col-md">
<img src="assets/Mockup6.png" width="350px" style="offset: 1000px 1000px" id="mockup4"></img>
</div>
</div>
</div>
<div class="container p-4 my-4">
<p><a href="privacy.html">App Privacy Policy</a></p>
<p><a href="terms.html">App Terms of Service</a></p>
</div>
</body>
</html>