Skip to content

Commit ab7911e

Browse files
CloudPower97CloudPower97
committed
feat: first commit
1 parent c361d5c commit ab7911e

File tree

3 files changed

+37
-301
lines changed

3 files changed

+37
-301
lines changed

‎client/src/components/FeatureCard/FeatureCard.module.css

Lines changed: 1 addition & 279 deletions
Original file line numberDiff line numberDiff line change
@@ -1,283 +1,5 @@
1-
@media screen and (prefers-reduced-motion: reduce) {
2-
.FeatureCard {
3-
min-height: 250px;
4-
transition: none;
5-
6-
& h5 {
7-
text-align: center;
8-
}
9-
10-
& .FeatureIcon {
11-
align-items: center;
12-
background-color: #ececec;
13-
clip-path: circle(50px at 50.1% 50.9%);
14-
display: flex;
15-
justify-content: center;
16-
z-index: 1;
17-
18-
@media screen and (prefers-reduced-motion: reduce) {
19-
& svg {
20-
border-radius: 50%;
21-
fill: var(--orange);
22-
height: 100px;
23-
line-height: 100px;
24-
position: relative;
25-
transition: none;
26-
width: 100px;
27-
}
28-
}
29-
30-
& svg {
31-
border-radius: 50%;
32-
fill: var(--orange);
33-
height: 100px;
34-
line-height: 100px;
35-
transition: transform 0.25s ease-out;
36-
width: 100px;
37-
}
38-
39-
@media screen and (prefers-reduced-motion: reduce) {
40-
&::before {
41-
background-image: var(--orange-gradient);
42-
bottom: 0;
43-
content: '';
44-
left: 0;
45-
opacity: 0;
46-
position: absolute;
47-
right: 0;
48-
top: 0;
49-
transition: none;
50-
z-index: -1;
51-
}
52-
}
53-
54-
&::before {
55-
background-image: var(--orange-gradient);
56-
bottom: 0;
57-
content: '';
58-
left: 0;
59-
opacity: 0;
60-
position: absolute;
61-
right: 0;
62-
top: 0;
63-
transition: opacity 0.25s ease-out;
64-
z-index: -1;
65-
}
66-
}
67-
68-
&:hover,
69-
&:focus {
70-
& .FeatureIcon {
71-
& svg {
72-
fill: #ececec !important;
73-
filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
74-
transform: scale(1.15);
75-
}
76-
77-
&::before {
78-
opacity: 1;
79-
}
80-
}
81-
}
82-
83-
&:global(.documents) {
84-
& .FeatureIcon {
85-
@media screen and (prefers-reduced-motion: reduce) {
86-
& svg {
87-
fill: var(--purple);
88-
}
89-
}
90-
91-
& svg {
92-
fill: var(--purple);
93-
}
94-
95-
@media screen and (prefers-reduced-motion: reduce) {
96-
&::before {
97-
background-image: var(--purple-gradient);
98-
}
99-
}
100-
101-
&::before {
102-
background-image: var(--purple-gradient);
103-
}
104-
}
105-
106-
& h5 {
107-
color: var(--purple);
108-
}
109-
}
110-
111-
&:global(.authors) {
112-
& .FeatureIcon {
113-
@media screen and (prefers-reduced-motion: reduce) {
114-
& svg {
115-
fill: var(--orange);
116-
}
117-
}
118-
119-
& svg {
120-
fill: var(--orange);
121-
}
122-
123-
@media screen and (prefers-reduced-motion: reduce) {
124-
&::before {
125-
background-image: var(--orange-gradient);
126-
}
127-
}
128-
129-
&::before {
130-
background-image: var(--orange-gradient);
131-
}
132-
}
133-
134-
& h5 {
135-
color: var(--orange);
136-
}
137-
}
138-
139-
&:global(.documents) {
140-
& .FeatureIcon {
141-
@media screen and (prefers-reduced-motion: reduce) {
142-
& svg {
143-
fill: var(--purple);
144-
}
145-
}
146-
147-
& svg {
148-
fill: var(--purple);
149-
}
150-
151-
@media screen and (prefers-reduced-motion: reduce) {
152-
&::before {
153-
background-image: var(--purple-gradient);
154-
}
155-
}
156-
157-
&::before {
158-
background-image: var(--purple-gradient);
159-
}
160-
}
161-
162-
& h5 {
163-
color: var(--purple);
164-
}
165-
}
166-
167-
&:global(.periodicals) {
168-
& .FeatureIcon {
169-
@media screen and (prefers-reduced-motion: reduce) {
170-
& svg {
171-
fill: var(--red);
172-
}
173-
}
174-
175-
& svg {
176-
fill: var(--red);
177-
}
178-
179-
@media screen and (prefers-reduced-motion: reduce) {
180-
&::before {
181-
background-image: var(--red-gradient);
182-
}
183-
}
184-
185-
&::before {
186-
background-image: var(--red-gradient);
187-
}
188-
}
189-
190-
& h5 {
191-
color: var(--red);
192-
}
193-
}
194-
195-
&:global(.organizations) {
196-
& .FeatureIcon {
197-
@media screen and (prefers-reduced-motion: reduce) {
198-
& svg {
199-
fill: var(--blue);
200-
}
201-
}
202-
203-
& svg {
204-
fill: var(--blue);
205-
}
206-
207-
@media screen and (prefers-reduced-motion: reduce) {
208-
&::before {
209-
background-image: var(--blue-gradient);
210-
}
211-
}
212-
213-
&::before {
214-
background-image: var(--blue-gradient);
215-
}
216-
}
217-
218-
& h5 {
219-
color: var(--blue);
220-
}
221-
}
222-
223-
&:global(.conferences) {
224-
& .FeatureIcon {
225-
@media screen and (prefers-reduced-motion: reduce) {
226-
& svg {
227-
fill: var(--green);
228-
}
229-
}
230-
231-
& svg {
232-
fill: var(--green);
233-
}
234-
235-
@media screen and (prefers-reduced-motion: reduce) {
236-
&::before {
237-
background-image: var(--green-gradient);
238-
}
239-
}
240-
241-
&::before {
242-
background-image: var(--green-gradient);
243-
}
244-
}
245-
246-
& h5 {
247-
color: var(--green);
248-
}
249-
}
250-
251-
&:global(.publishing-companies) {
252-
& .FeatureIcon {
253-
@media screen and (prefers-reduced-motion: reduce) {
254-
& svg {
255-
fill: var(--plum);
256-
}
257-
}
258-
259-
& svg {
260-
fill: var(--plum);
261-
}
262-
263-
@media screen and (prefers-reduced-motion: reduce) {
264-
&::before {
265-
background-image: var(--plum-gradient);
266-
}
267-
}
268-
269-
&::before {
270-
background-image: var(--plum-gradient);
271-
}
272-
}
273-
274-
& h5 {
275-
color: var(--plum);
276-
}
277-
}
278-
}
279-
}
2801
.FeatureCard {
2+
height: 353px;
2813
min-height: 250px;
2824
transition: transform 0.5s ease-out;
2835

‎client/src/containers/Home/Home.js

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { Section, Container, Row, Col } from 'react-materialize'
2+
import { Section, Container, Row, Col, Divider, Button } from 'react-materialize'
33
import Parallax from 'components/Parallax'
44
import { Link } from 'react-router-dom'
55
import FeatureCard from 'components/FeatureCard'
@@ -10,7 +10,9 @@ import {
1010
mdiBookOpenPageVariant,
1111
mdiCalendarMultiple,
1212
mdiFeather,
13+
mdiArrowRight,
1314
} from '@mdi/js'
15+
import Icon from '@mdi/react'
1416
import homeImage from 'assets/img/home.jpg'
1517

1618
const Home = () => (
@@ -24,9 +26,22 @@ const Home = () => (
2426

2527
<Section>
2628
<Container>
27-
<h1 className="center grey-text text-darken-2">
28-
An online subscription-based scientific citation indexing service
29-
</h1>
29+
<div
30+
className="center"
31+
style={{
32+
paddingBottom: '3rem',
33+
}}>
34+
<h1 className="center grey-text text-darken-2">
35+
An online scientific citation indexing service
36+
</h1>
37+
38+
<Link to="/learn-more">
39+
<Button className="hoverable move-icon-forward blueGradient" large>
40+
Discover more
41+
<Icon path={mdiArrowRight} size="1.3rem" />
42+
</Button>
43+
</Link>
44+
</div>
3045

3146
<Row>
3247
<Col s={12} l={6} xl={4}>
@@ -44,7 +59,7 @@ const Home = () => (
4459
<FeatureCard
4560
icon={mdiFileDocumentBoxMultipleOutline}
4661
title="Documents"
47-
content="Look up for authors by first name, last name, organization or ORCID"
62+
content="Look up for documents by title, number of pages or DOI"
4863
className="documents"
4964
/>
5065
</Link>
@@ -54,7 +69,7 @@ const Home = () => (
5469
<FeatureCard
5570
icon={mdiBookOpenPageVariant}
5671
title="Periodicals"
57-
content="Look up for authors by first name, last name, organization or ORCID"
72+
content="Look up for periodicals by title or ISSN"
5873
className="periodicals"
5974
/>
6075
</Link>
@@ -64,7 +79,7 @@ const Home = () => (
6479
<FeatureCard
6580
icon={mdiDomain}
6681
title="Organizations"
67-
content="Look up for authors by first name, last name, organization or ORCID"
82+
content="Look up for organizations by name and location"
6883
className="organizations"
6984
/>
7085
</Link>
@@ -74,7 +89,7 @@ const Home = () => (
7489
<FeatureCard
7590
icon={mdiCalendarMultiple}
7691
title="Conferences"
77-
content="Look up for authors by first name, last name, organization or ORCID"
92+
content="Look up for conferences by name and location"
7893
className="conferences"
7994
/>
8095
</Link>
@@ -84,7 +99,7 @@ const Home = () => (
8499
<FeatureCard
85100
icon={mdiFeather}
86101
title="Publishing Companies"
87-
content="Look up for authors by first name, last name, organization or ORCID"
102+
content="Look up for publishing companies by name"
88103
className="publishing-companies"
89104
/>
90105
</Link>

0 commit comments

Comments
 (0)