Skip to content

Commit 1b27900

Browse files
nirmalkcnirmalkc
committed
images and smooth scroll
1 parent b449c25 commit 1b27900

8 files changed

Lines changed: 111 additions & 29 deletions

File tree

‎components/core/Landing.js‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@ import { Header } from '..'
1212
import { AiOutlineGateway, AiOutlineFileImage, AiFillGithub, AiOutlineInstagram, AiOutlineTwitter, AiOutlineLink } from "react-icons/ai";
1313
import { FiInstagram, FiTwitter, FiLink, FiPenTool, FiSearch, FiMousePointer, FiGithub } from "react-icons/fi";
1414

15+
// Images
16+
// import bannerBackgroundImage from '../../public/vercel.svg';
1517

1618
// link
1719
import Link from "next/link";
1820

21+
// Styled Component
1922
import styled from "styled-components";
2023

2124
// LandingBanner
@@ -26,6 +29,10 @@ const LandingBanner = styled.section`
2629
align-items: center;
2730
min-height: 100vh;
2831
background-color: var(--color-brand);
32+
// background-image: url(${props => props.backgroundImage});
33+
background-position: center center;
34+
background-repeat: no-repeat;
35+
background-size: cover;
2936
`;
3037

3138
const BannerHeader = styled.div`
@@ -179,7 +186,7 @@ const SectionTitle = styled.div`
179186

180187
const SectionFileTypes = styled.section`
181188
padding: 6rem 0;
182-
background-color: rgba(var(--color-brand-rgb), 0.03);
189+
background-color: var(--color-neutral-20);
183190
`;
184191

185192
const SectionContact = styled.section`
@@ -190,6 +197,16 @@ const SectionContact = styled.section`
190197
const SectionContactCredits = styled.p`
191198
margin: 1rem 0;
192199
color: var(--color-neutral-80);
200+
201+
a {
202+
color: var(--color-brand);
203+
text-decoration: underline;
204+
205+
&:hover,
206+
&:focus {
207+
color: var(--color-brand-secondary);
208+
}
209+
}
193210
`;
194211

195212
const SocialLinks = styled.div`
@@ -213,10 +230,10 @@ const SocialLinks = styled.div`
213230
214231
&:hover,
215232
&:focus {
216-
background-color: rgba(var(--color-brand-rgb), 6%);
233+
background-color: var(--color-brand);
217234
218235
svg {
219-
fill: var(--color-neutral-10);
236+
stroke: var(--color-neutral-10);
220237
}
221238
}
222239
}
@@ -276,7 +293,7 @@ const FeatureIconCardItem = styled.div`
276293
background: var(--color-neutral-10);
277294
border-radius: 1rem;
278295
padding: 3.2rem 2.8rem;
279-
box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 16%);
296+
box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 16%);
280297
281298
282299
.card-icon {
@@ -325,9 +342,9 @@ const Landing = ({ setOpen, user, setUser }) => {
325342
<BannerHeader>
326343
<Logo><AiOutlineGateway /><div>TryShape</div></Logo>
327344
<Navigation>
328-
<a href="#keyfeatures">Key Features</a>
329-
<a href="#filesupport">File Support</a>
330-
<a href="#contact">Contact</a>
345+
<a data-scroll href="#keyfeatures">Key Features</a>
346+
<a data-scroll href="#filesupport">File Support</a>
347+
<a data-scroll href="#contact">Contact</a>
331348
</Navigation>
332349
<ActionBar>
333350
<Link href="/app">

‎components/utils/Header.js‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,52 @@ import { FaShapes } from "react-icons/fa";
1414

1515
// Button
1616
import Button from "react-bootstrap/Button";
17+
import InputGroup from 'react-bootstrap/InputGroup'
18+
import FormControl from 'react-bootstrap/FormControl'
19+
20+
// Styled Component
21+
import styled from "styled-components";
22+
23+
const AppHeader = styled.div`
24+
position: fixed;
25+
z-index: 1;
26+
top: 0;
27+
right: 0;
28+
display: flex;
29+
justify-content: space-between;
30+
width: 100%;
31+
padding: 0.6rem 0.8rem;
32+
background-color: var(--color-brand);
33+
34+
.navbar-action--primary {
35+
padding: 0.3rem 1rem;
36+
border: solid 1px var(--color-primary-accent);
37+
background-color: var(--color-primary-accent);
38+
font-size: var(--fs-sm);
39+
font-weight: var(--fw-bold);
40+
color: var(--color-neutral-90);
41+
42+
svg {
43+
margin: -2px 0.6rem 0 0;
44+
}
45+
46+
&:hover,
47+
&:focus {
48+
border: solid 1px var(--color-neutral-10);
49+
background-color: var(--color-neutral-10);
50+
color: var(--color-brand);
51+
}
52+
53+
&:active {
54+
background-color: rgba(var(--color-neutral-10-rgb), 90%) !important;
55+
color: var(--color-brand) !important;
56+
}
57+
}
58+
`;
59+
60+
const NavbarSearchInput = styled(InputGroup)`
61+
width: 60%;
62+
`;
1763

1864
const Header = ({ setOpen, user, setUser }) => {
1965
// console.log(user);
@@ -32,7 +78,7 @@ const Header = ({ setOpen, user, setUser }) => {
3278
};
3379

3480
return (
35-
<div>
81+
<AppHeader>
3682
<Link href="/">
3783
<a>
3884
TryShape
@@ -41,6 +87,14 @@ const Header = ({ setOpen, user, setUser }) => {
4187
</span>
4288
</a>
4389
</Link>
90+
<NavbarSearchInput>
91+
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
92+
<FormControl
93+
placeholder="Username"
94+
aria-label="Username"
95+
aria-describedby="basic-addon1"
96+
/>
97+
</NavbarSearchInput>
4498
{(user.email || user.displayName) ? (
4599
<>
46100
<div>
@@ -60,11 +114,11 @@ const Header = ({ setOpen, user, setUser }) => {
60114
</Button>
61115
</>
62116
) : (
63-
<Button onClick={() => setOpen(true)}>
117+
<Button onClick={() => setOpen(true)} className="navbar-action--primary">
64118
<div>Sign In</div>
65119
</Button>
66120
)}
67-
</div>
121+
</AppHeader>
68122
);
69123
};
70124

‎components/utils/ShapeList.js‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React, { useState } from "react";
22

3+
// Bootstrap
4+
import Container from 'react-bootstrap/Container'
5+
36
// Styled Component
47
import styled from "styled-components";
58

@@ -34,20 +37,25 @@ import { formatRelative } from "date-fns";
3437

3538
// Shape Listing Styled-Componentns
3639
const ShapeCards = styled.div`
37-
display: flex;
38-
flex-wrap: wrap;
39-
justify-content: center;
40-
align-items: center;
40+
padding: 4rem 0 2rem 0;
41+
display: grid;
42+
grid-template-columns: repeat(3, minmax(240px, 1fr));
43+
grid-gap: 2rem;
44+
// display: flex;
45+
// flex-wrap: wrap;
46+
// justify-content: center;
47+
// align-items: center;
48+
4149
`;
4250

4351
const ShapeCard = styled.div`
44-
width: 400px;
45-
min-height: 456px;
46-
border: 1px solid #ececec;
47-
border-radius: 4px;
48-
padding: 5px;
49-
margin: 5px;
50-
background-color: #ebebeb;
52+
padding: 1rem 1.6rem;
53+
border-radius: 0.6rem;
54+
background-color: var(--color-neutral-10);
55+
56+
&:hover {
57+
box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 16%);
58+
}
5159
`;
5260

5361
const ShapeActions = styled.div`
@@ -74,8 +82,8 @@ const ShapeDetailsItems = styled.li`
7482
word-wrap: break-word;
7583
`;
7684

77-
const ShapePallete = styled.div`
78-
margin-top: 5px;
85+
const ShapeCardsContainer = styled.div`
86+
background-color: var(--color-neutral-20);
7987
`;
8088

8189
const ShapeCardHeader = styled.div`
@@ -242,8 +250,9 @@ const ShapeList = ({ setOpen, user, data }) => {
242250
};
243251

244252
return (
245-
<ShapePallete>
246-
<ShapeCards>
253+
<ShapeCardsContainer>
254+
<Container>
255+
<ShapeCards>
247256

248257
{ shapeToExport && <ExportShape
249258
show={ showExportModal }
@@ -327,7 +336,8 @@ const ShapeList = ({ setOpen, user, data }) => {
327336
</React.Fragment>
328337
))}
329338
</ShapeCards>
330-
</ShapePallete>
339+
</Container>
340+
</ShapeCardsContainer>
331341
);
332342
};
333343

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"react-infinite-scroll-component": "^6.1.0",
2424
"react-loader-spinner": "^4.0.0",
2525
"react-switch": "^6.0.0",
26+
"smooth-scroll": "^16.1.3",
2627
"styled-components": "^5.3.0"
2728
},
2829
"devDependencies": {

‎pages/_app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useEffect, useState } from "react";
22

33
// styles
4-
import '../styles/global.css';
54
import 'bootstrap/dist/css/bootstrap.min.css';
5+
import '../styles/global.css';
66

77
// toaster
88
import { Toaster } from "react-hot-toast";

‎public/bg-banner.png‎

37.1 KB
Loading

‎public/images/bg-banner.png‎

37.1 KB
Loading

‎styles/global.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
/* Neutral */
1313
--color-neutral-10: #ffffff;
14-
--color-neutral-20: #F2F7F9;
15-
--color-neutral-30: #ffffff;
14+
--color-neutral-20: #f6f6f9;
15+
--color-neutral-30: #f6f7fa;
1616
--color-neutral-40: #ffffff;
1717
--color-neutral-50: #ffffff;
1818
--color-neutral-60: #ffffff;

0 commit comments

Comments
 (0)