Skip to content

Commit 0af375d

Browse files
atapasatapas
authored
Merge pull request #44 from TryShape/Add-a-Landing-Page-#10
Add a landing page #10
2 parents 348a1d2 + 2bd11aa commit 0af375d

5 files changed

Lines changed: 307 additions & 137 deletions

File tree

‎components/core/App.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,11 @@ const App = (props) => {
105105
setShapeAction={setShapeAction} />
106106
{loading ? (
107107
<Loader
108-
style={{margin: '20% auto auto 42%'}}
108+
style={{position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)'}}
109109
type="Circles"
110-
color="#eb3d86"
111-
height={300}
112-
width={300}
110+
color="rgba(var(--color-brand-rgb), 0.6)"
111+
height={200}
112+
width={200}
113113
/>
114114
) : (
115115
<ShapeList

‎components/core/Landing.js‎

Lines changed: 90 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22

33
import Button from 'react-bootstrap/Button';
4-
import Container from 'react-bootstrap/Container'
5-
import Row from 'react-bootstrap/Row'
6-
import Col from 'react-bootstrap/Col'
4+
import Container from 'react-bootstrap/Container';
5+
import Row from 'react-bootstrap/Row';
6+
import Col from 'react-bootstrap/Col';
7+
import Navbar from 'react-bootstrap/Navbar';
78

89
// Header
910
import { Header } from '..'
@@ -16,8 +17,7 @@ import IconSvg from '../../public/images/icon-svg.svg';
1617
import IconCss from '../../public/images/icon-css.svg';
1718

1819
// icon
19-
import { AiOutlineGateway, AiOutlineFileImage, AiFillGithub, AiOutlineInstagram, AiOutlineTwitter, AiOutlineLink } from "react-icons/ai";
20-
import { FiLinkedin, FiTwitter, FiShare, FiShare2, FiPenTool, FiSearch, FiMail, FiGithub } from "react-icons/fi";
20+
import { FiMenu, FiLinkedin, FiTwitter, FiShare, FiShare2, FiPenTool, FiSearch, FiMail, FiGithub } from "react-icons/fi";
2121

2222
// link
2323
import Link from "next/link";
@@ -31,7 +31,7 @@ const LandingBanner = styled.section`
3131
display: flex;
3232
justify-content: center;
3333
align-items: center;
34-
min-height: 100vh;
34+
min-height: calc(100vh - 74px);
3535
background-color: var(--color-brand);
3636
background: rgb(93,33,210);
3737
background: linear-gradient(180deg, rgba(93,33,210,1) 0%, rgba(175,33,210,1) 100%);
@@ -54,18 +54,20 @@ const LandingBanner = styled.section`
5454
}
5555
`;
5656

57-
const BannerHeader = styled.div`
58-
position: fixed;
59-
z-index: 1;
60-
top: 0;
61-
right: 0;
62-
display: flex;
63-
flex-grow: 1;
64-
justify-content: space-between;
65-
width: 100%;
66-
padding: 1.4rem 1.8rem;
57+
const BannerHeader = styled(Navbar)`
58+
padding: 1rem 1.8rem !important;
6759
background-color: var(--color-brand);
6860
61+
.navbar-toggler:hover,
62+
.navbar-toggler:focus {
63+
background-color: rgba(var(--color-neutral-10-rgb), 0.2);
64+
}
65+
66+
.navbar-toggler.active,
67+
.navbar-toggler:active {
68+
background-color: rgba(var(--color-neutral-100-rgb), 0.2);
69+
}
70+
6971
.navbar-action--primary {
7072
padding: 0.48rem 1.4rem;
7173
border: solid 1px var(--color-primary-accent);
@@ -93,22 +95,35 @@ const BannerHeader = styled.div`
9395
`;
9496

9597
const BannerBody = styled.div`
98+
margin-top: -74px;
99+
96100
.banner-title {
97101
font-size: var(--fs-xl);
98102
font-weight: var(--fw-bold);
99103
color: var(--color-neutral-10);
104+
105+
@media (max-width: 767px) {
106+
font-size: var(--fs-lg);
107+
}
100108
}
101109
102110
.banner-desc {
103111
margin: 1.2rem 2rem 2.6rem 0;
104112
font-size: var(--fs-md);
105113
font-weight: var(--fw-light);
106114
color: var(--color-neutral-10);
115+
116+
@media (max-width: 767px) {
117+
font-size: var(--fs-rg);
118+
}
107119
}
120+
121+
108122
`;
109123

110124
const BannerBodyActions = styled.div`
111125
display: flex;
126+
justify-content: center;
112127
grid-gap: 1rem;
113128
114129
.banner-action--primary {
@@ -164,7 +179,7 @@ const BannerBodyActions = styled.div`
164179
const Logo = styled.h1`
165180
width: 152px;
166181
height: 32px;
167-
background-image: url(${ImgLogo});
182+
background: url(${ImgLogo}) left center no-repeat;
168183
margin: 0;
169184
line-height: 1;
170185
`;
@@ -174,6 +189,7 @@ const Navigation = styled.div`
174189
flex-direction: row;
175190
align-items: center;
176191
grid-gap: 2.4rem;
192+
margin-right: 2.4rem;
177193
178194
a {
179195
font-size: var(--fs-rg);
@@ -185,10 +201,25 @@ const Navigation = styled.div`
185201
color: var(--color-primary-accent) !important;
186202
}
187203
}
204+
205+
@media (max-width: 767px) {
206+
border-top: solid 1px rgba(var(--color-neutral-10-rgb), 0.2);
207+
margin: 0.4rem 0 0.8rem 0;
208+
padding-top: 1rem;
209+
flex-direction: column;
210+
grid-gap: 0.6rem;
211+
}
212+
188213
`;
189214

190215
const ActionBar = styled.div`
191-
216+
@media (max-width: 768px) {
217+
display: flex;
218+
219+
button {
220+
flex: 1;
221+
}
222+
}
192223
`;
193224

194225
const SectionAbout = styled.section`
@@ -261,6 +292,14 @@ const FeatureCards = styled.div`
261292
grid-template-columns: repeat(3, minmax(240px, 1fr));
262293
grid-gap: 2.6rem;
263294
margin: 4rem 0 0 0;
295+
296+
@media (max-width: 991px) {
297+
grid-template-columns: repeat(2, minmax(240px, 1fr));
298+
}
299+
300+
@media (max-width: 767px) {
301+
grid-template-columns: repeat(1, minmax(240px, 1fr));
302+
}
264303
`;
265304

266305
const FeatureCardItem = styled.div`
@@ -316,6 +355,14 @@ const FileSupportCards = styled.div`
316355
grid-template-columns: repeat(3, minmax(240px, 1fr));
317356
grid-gap: 2.6rem;
318357
margin: 4rem 0 0 0;
358+
359+
@media (max-width: 991px) {
360+
grid-template-columns: repeat(2, minmax(240px, 1fr));
361+
}
362+
363+
@media (max-width: 767px) {
364+
grid-template-columns: repeat(1, minmax(240px, 1fr));
365+
}
319366
`;
320367

321368
const FileSupportCardItem = styled.div`
@@ -370,40 +417,42 @@ const Landing = ({ setOpen, user, setUser }) => {
370417

371418
return(
372419
<div>
420+
<BannerHeader sticky="top" expand="md">
421+
<Navbar.Brand><Logo><div className="sr-only">TryShape</div></Logo></Navbar.Brand>
422+
<Navbar.Toggle>
423+
<FiMenu color="var(--color-neutral-10" size="24px"/>
424+
</Navbar.Toggle>
425+
<Navbar.Collapse className="justify-content-end">
426+
<Navigation>
427+
<a data-scroll href="#keyfeatures">Key Features</a>
428+
<a data-scroll href="#filesupport">File Support</a>
429+
<a data-scroll href="#contact">Contact</a>
430+
</Navigation>
431+
<ActionBar>
432+
<Link href="/app">
433+
<Button className="navbar-action--primary">
434+
<FiSearch />Browse Now
435+
</Button>
436+
</Link>
437+
</ActionBar>
438+
</Navbar.Collapse>
439+
</BannerHeader>
373440
<LandingBanner>
374-
<BannerHeader>
375-
<Logo><div className="sr-only">TryShape</div></Logo>
376-
<Navigation>
377-
<a data-scroll href="#keyfeatures">Key Features</a>
378-
<a data-scroll href="#filesupport">File Support</a>
379-
<a data-scroll href="#contact">Contact</a>
380-
</Navigation>
381-
<ActionBar>
382-
<Link href="/app">
383-
<Button className="navbar-action--primary">
384-
<FiSearch />Browse Now
385-
</Button>
386-
</Link>
387-
</ActionBar>
388-
</BannerHeader>
389441
<BannerBody>
390442
<Container>
391-
<Row>
392-
<Col>
393-
<h2 className="banner-title">Create, Export, Share, and Use any Shapes of your choice.</h2>
394-
<p className="banner-desc">
443+
<Row className="justify-content-md-center">
444+
<Col lg="8" className="d-flex flex-column justify-content-center">
445+
<h2 className="banner-title text-center">Create, Export, Share, and Use any Shapes of your choice.</h2>
446+
<p className="banner-desc text-center">
395447
TryShape is an opensource platform to create shapes of your choice using a simple,
396448
easy-to-use interface. You can create banners, circles, polygonal shapes, export them as
397449
SVG, PNG, and even as CSS.
398450
</p>
399451
<BannerBodyActions>
400452
<Link href="/app"><Button className="banner-action--primary"><FiPenTool/>Try Now</Button></Link>
401-
<Link href="/app"><Button className="banner-action--secondary"><FiGithub />GitHub</Button></Link>
453+
<Link href="/app"><Button variant="outline-secondary"><FiGithub />GitHub</Button></Link>
402454
</BannerBodyActions>
403455
</Col>
404-
<Col>
405-
<svg id="ace05a6f-f1ac-4978-a3bb-3e2345b819e7" style={{ width: '80%', height: 'auto' }} data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="767.65456" height="595.99576" viewBox="0 0 767.65456 595.99576"><path d="M682.61225,523.03207l-1.25114,14.70664a6.50753,6.50753,0,0,1-7.0276,5.92562l-122.57092-10.4275a6.50753,6.50753,0,0,1-5.92562-7.02759l1.25115-14.70664a6.50751,6.50751,0,0,1,7.02759-5.92562l122.57092,10.4275A6.50753,6.50753,0,0,1,682.61225,523.03207Z" transform="translate(-216.17273 -152.0021)" fill="#6c63ff"/><path d="M707.04188,594.76651l-13.5758,5.7921c-3.29649,1.40644-6.68936.88483-7.56294-1.16272l-29.9841-70.2782c-.87359-2.04755,1.09775-4.85779,4.39424-6.26424l13.5758-5.7921c3.29649-1.40644,6.68936-.88483,7.563,1.16272l29.9841,70.2782C712.30971,590.54982,710.33837,593.36006,707.04188,594.76651Z" transform="translate(-216.17273 -152.0021)" fill="#6c63ff"/><path d="M635.17273,571.99786H405.28351a95.00238,95.00238,0,1,0-94.11078,82,94.76382,94.76382,0,0,0,34-6.27246v92.27246a8,8,0,0,0,8,8h282a8,8,0,0,0,8-8v-160A8,8,0,0,0,635.17273,571.99786Z" transform="translate(-216.17273 -152.0021)" fill="#e6e6e6"/><path d="M652.17271,726.9979h-282a9.01016,9.01016,0,0,1-9-9v-160a9.01016,9.01016,0,0,1,9-9h282a9.01016,9.01016,0,0,1,9,9v160A9.01016,9.01016,0,0,1,652.17271,726.9979Zm-282-176a7.00818,7.00818,0,0,0-7,7v160a7.00818,7.00818,0,0,0,7,7h282a7.00818,7.00818,0,0,0,7-7v-160a7.00818,7.00818,0,0,0-7-7Z" transform="translate(-216.17273 -152.0021)" fill="#3f3d56"/><path d="M652.61225,534.03207l-1.25114,14.70664a6.50753,6.50753,0,0,1-7.0276,5.92562l-122.57092-10.4275a6.50753,6.50753,0,0,1-5.92562-7.02759l1.25115-14.70664a6.50751,6.50751,0,0,1,7.02759-5.92562l122.57092,10.4275A6.50753,6.50753,0,0,1,652.61225,534.03207Z" transform="translate(-216.17273 -152.0021)" fill="#6c63ff"/><path d="M677.04188,605.76651l-13.5758,5.7921c-3.29649,1.40644-6.68936.88483-7.56294-1.16272l-29.9841-70.2782c-.87359-2.04755,1.09775-4.85779,4.39424-6.26424l13.5758-5.7921c3.29649-1.40644,6.68936-.88483,7.563,1.16272l29.9841,70.2782C682.30971,601.54982,680.33837,604.36006,677.04188,605.76651Z" transform="translate(-216.17273 -152.0021)" fill="#6c63ff"/><rect x="881.40957" y="159.51212" width="32" height="32" transform="translate(-137.98952 429.73239) rotate(-37.44104)" fill="#6c63ff"/><circle cx="540.54098" cy="180.1523" r="22" fill="#ff6584"/><path d="M751.06926,347.81191a23,23,0,1,1,32.24425,4.2788A23.02588,23.02588,0,0,1,751.06926,347.81191Zm34.93509-26.74957a21,21,0,1,0-3.90673,29.44041A21.0239,21.0239,0,0,0,786.00435,321.06234Z" transform="translate(-216.17273 -152.0021)" fill="#3f3d56"/><path d="M902.05033,199.66752l-20.67012-26.9953,26.9953-20.67012,20.67012,26.9953Zm-17.86627-26.62323,18.23834,23.81938,23.81938-18.23834L908.00344,154.806Z" transform="translate(-216.17273 -152.0021)" fill="#3f3d56"/><rect x="936.19123" y="337.97492" width="32" height="32" transform="translate(-235.19888 499.80362) rotate(-37.44104)" fill="#6c63ff"/><path d="M956.832,378.13032,936.16187,351.135l26.9953-20.67012,20.67012,26.9953Zm-17.86627-26.62323,18.23834,23.81938,23.81938-18.23834L962.7851,333.26875Z" transform="translate(-216.17273 -152.0021)" fill="#3f3d56"/><rect x="0.99998" y="572.99579" width="624" height="2" fill="#3f3d56"/><path d="M324.17271,628.9979a96,96,0,1,1,96-96A96.10874,96.10874,0,0,1,324.17271,628.9979Zm0-190a94,94,0,1,0,94,94A94.10645,94.10645,0,0,0,324.17271,438.9979Z" transform="translate(-216.17273 -152.0021)" fill="#3f3d56"/><circle cx="316.42142" cy="185.00645" r="53.51916" fill="#6c63ff"/><path d="M540.46971,356.84454l-.05566-2c3.7207-.10351,7.001-.33691,9.46582-2.13769a6.148,6.148,0,0,0,2.38134-4.52832,3.51431,3.51431,0,0,0-1.15283-2.89453c-1.63623-1.38184-4.269-.93457-6.188-.05469l-1.65478.75879,3.17334-23.19043,1.98144.27148-2.69921,19.72656c2.60742-.7666,5.02343-.43652,6.67822.96094a5.471,5.471,0,0,1,1.86035,4.49219,8.13264,8.13264,0,0,1-3.2002,6.07324C547.89256,356.63653,543.77684,356.75177,540.46971,356.84454Z" transform="translate(-216.17273 -152.0021)" fill="#2f2e41"/><rect x="342.04698" y="172.76822" width="10.77148" height="2" fill="#2f2e41"/><rect x="308.04698" y="172.76822" width="10.77148" height="2" fill="#2f2e41"/><path d="M609.17271,551.4979h-126a4.50492,4.50492,0,0,1-4.5-4.5V445.77719A46.33163,46.33163,0,0,1,524.952,399.4979h41.2207a4.50529,4.50529,0,0,1,4.49951,4.4248l43.00049,143.002v.07325A4.50493,4.50493,0,0,1,609.17271,551.4979Z" transform="translate(-216.17273 -152.0021)" fill="#2f2e41"/><path d="M525.47529,440.45264l14.75882.116a6.50753,6.50753,0,0,1,6.44872,6.55088l-.96658,123.00987a6.50753,6.50753,0,0,1-6.55087,6.44873l-14.75883-.116a6.50753,6.50753,0,0,1-6.44872-6.55088l.96658-123.00987A6.50753,6.50753,0,0,1,525.47529,440.45264Z" transform="translate(-216.17273 -152.0021)" fill="#6c63ff"/><path d="M510.67271,435.4979a22,22,0,1,1,44,0v49h-44Z" transform="translate(-216.17273 -152.0021)" fill="#2f2e41"/><path d="M516.78472,311.80158c5.06888-5.21551,12.43274-6.11235,19.36224-5.5448,7.42071.60778,14.452,3.07282,21.73106,4.44394,7.17984,1.35243,14.96391,1.95823,21.82646-1.03737a20.09144,20.09144,0,0,0,11.72323-15.979,29.03592,29.03592,0,0,0-5.257-20.47853c-4.7-6.64121-11.37734-11.50575-18.31814-15.589-14.96175-8.802-31.64438-16.50389-49.15015-17.92771-15.80435-1.28544-32.563,3.08229-43.68061,14.88551-10.42169,11.06441-14.85811,26.506-15.78063,41.37629-1.17743,18.97911,3.2519,37.722,4.85473,56.54079,1.24718,14.64319.78012,32.22265-11.11218,42.73862-10.519,9.30159-26.53626,9.19063-38.93809,4.10945-14.741-6.03956-25.08444-19.59752-32.90776-32.9229-1.99162-3.39231-3.86369-6.85277-5.67931-10.342-.8915-1.71327-3.48138-.19808-2.59041,1.51416,7.32148,14.07023,15.83772,28.12423,28.64444,37.8742,11.19745,8.52481,26.13832,12.63128,39.97878,9.02829a32.25043,32.25043,0,0,0,17.098-10.80463c4.74351-5.91016,7.233-13.18243,8.27145-20.62227,1.11153-7.96315.724-15.98758-.08116-23.95954-.96937-9.59732-2.5146-19.12452-3.573-28.71137-1.80249-16.32711-2.05082-33.2722,4.4005-48.69846a48.551,48.551,0,0,1,12.63135-17.97966A46.21559,46.21559,0,0,1,501.324,243.66126c16.9591-3.51936,34.19917,1.24561,49.55139,8.426a139.42789,139.42789,0,0,1,22.1571,12.43257c6.19746,4.43557,11.96927,10.24516,14.3566,17.65293,2.05742,6.38406,1.88616,13.94139-2.21567,19.508-4.38377,5.94925-11.98089,7.43475-18.94639,7.07658-14.30661-.73566-28.72417-9.05-43.11964-4.30484a20.74419,20.74419,0,0,0-8.444,5.22776c-1.34634,1.38529.77277,3.50888,2.12132,2.12132Z" transform="translate(-216.17273 -152.0021)" fill="#2f2e41"/></svg>
406-
</Col>
407456
</Row>
408457
</Container>
409458
</BannerBody>

0 commit comments

Comments
 (0)