Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7618494

Browse files
DannyRuchtiegarethxCompuIves
authored
Added the B varaint for the A/B test (codesandbox#3898)
* Added the B varaint for the A/B test Commented out all of the old template * Added border to bottom of headerwrapper * Fix link to angular template * It's angular (Typo) * Fixed mobile Layout * Quick fix for Height header (will fix more later) * fixed hight problem * Added extra component heroB for easy switching Added extra component heroB for easy switching. you can load eighter HeroA (Old) or HeroB(New) in the pages > index.js * Added second index2 * added amplitude event * exclude index2 from sidemap * fixed index of hero * fixed padding on old hero * Fix sourcemap * Reuse existing identify logic Co-authored-by: garethx <[email protected]> Co-authored-by: Ives van Hoorne <[email protected]>
1 parent 38006be commit 7618494

File tree

10 files changed

+430
-3
lines changed

10 files changed

+430
-3
lines changed

‎packages/homepage/gatsby-config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ module.exports = {
6161
`gatsby-plugin-styled-components`,
6262
`gatsby-plugin-react-helmet`,
6363
`gatsby-plugin-remove-trailing-slashes`,
64-
`gatsby-plugin-sitemap`,
64+
{ resolve: `gatsby-plugin-sitemap`, options: { exclude: ['/index2'] } },
6565
{
6666
resolve: `gatsby-plugin-google-tagmanager`,
6767
options: {

‎packages/homepage/src/assets/icons/home-angular.svg

Lines changed: 4 additions & 0 deletions
Loading

‎packages/homepage/src/assets/icons/home-js.svg

Lines changed: 3 additions & 0 deletions
Loading

‎packages/homepage/src/assets/icons/home-more.svg

Lines changed: 3 additions & 0 deletions
Loading

‎packages/homepage/src/assets/icons/home-react.svg

Lines changed: 10 additions & 0 deletions
Loading

‎packages/homepage/src/assets/icons/home-vue.svg

Lines changed: 4 additions & 0 deletions
Loading

‎packages/homepage/src/pages/index.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2+
import { identify } from '@codesandbox/common/lib/utils/analytics';
23

34
import TitleAndMetaTags from '../components/TitleAndMetaTags';
45
import Layout, { WRAPPER_STYLING } from '../components/layout';
5-
import Hero from '../screens/home/hero';
6+
import HeroA from '../screens/home/hero';
67
import Prototype from '../screens/home/prototype';
78
import Started from '../screens/home/started';
89
import LoadInView from '../components/LoadInView';
@@ -25,7 +26,7 @@ const Homepage = () => (
2526
margin-bottom: 8rem;
2627
`}
2728
>
28-
<Hero />
29+
<HeroA />
2930
</section>
3031

3132
<div style={WRAPPER_STYLING}>
@@ -56,4 +57,6 @@ const Homepage = () => (
5657
</Layout>
5758
);
5859

60+
identify('hero0420', 'A');
61+
5962
export default Homepage;

‎packages/homepage/src/pages/index2.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { identify } from '@codesandbox/common/lib/utils/analytics';
3+
4+
import TitleAndMetaTags from '../components/TitleAndMetaTags';
5+
import Layout, { WRAPPER_STYLING } from '../components/layout';
6+
7+
import HeroB from '../screens/home/heroB';
8+
import Prototype from '../screens/home/prototype';
9+
import Started from '../screens/home/started';
10+
import LoadInView from '../components/LoadInView';
11+
import Experiment from '../screens/home/experiment';
12+
import Teams from '../screens/home/teams';
13+
import Share from '../screens/home/share';
14+
import Join from '../screens/home/join';
15+
import Explore from '../screens/home/explore';
16+
17+
// eslint-disable-next-line
18+
console.log(
19+
'Hi, We love curious people that dive in to see how things are working! We are always looking for talented, hard working people. Drop us a line and show us your work. We are hiring: https://codesandbox.io/jobs'
20+
);
21+
22+
const Homepage = () => (
23+
<Layout noWrapperStyling>
24+
<TitleAndMetaTags />
25+
<section
26+
css={`
27+
margin-bottom: 8rem;
28+
`}
29+
>
30+
<HeroB />
31+
</section>
32+
33+
<div style={WRAPPER_STYLING}>
34+
<LoadInView>
35+
<Prototype />
36+
</LoadInView>
37+
<LoadInView>
38+
<Started />
39+
</LoadInView>
40+
</div>
41+
<LoadInView>
42+
<Explore />
43+
</LoadInView>
44+
<div style={WRAPPER_STYLING}>
45+
<LoadInView>
46+
<Experiment />
47+
</LoadInView>
48+
<LoadInView>
49+
<Teams />
50+
</LoadInView>
51+
<LoadInView>
52+
<Share />
53+
</LoadInView>
54+
<LoadInView>
55+
<Join />
56+
</LoadInView>
57+
</div>
58+
</Layout>
59+
);
60+
61+
identify('hero0420', 'B');
62+
63+
export default Homepage;

‎packages/homepage/src/screens/home/heroB/elements.js

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
import styled, { keyframes } from 'styled-components';
2+
3+
const dropIn = (offset = 100) => keyframes`
4+
0% {
5+
transform: translateY(${offset}px) translateZ(200px);
6+
filter: blur(20px);
7+
opacity: 0;
8+
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
9+
}
10+
11+
70% {
12+
filter: blur(0);
13+
opacity: 1;
14+
box-shadow: 0;
15+
}
16+
17+
100% {
18+
transform: translateZ(0px);
19+
filter: blur(0);
20+
opacity: 1;
21+
box-shadow: 0;
22+
}
23+
`;
24+
25+
export const EditorElement = styled.img`
26+
animation: ${props => dropIn(props.i * 250)} 3s;
27+
animation-delay: ${props => props.i * 100}ms;
28+
animation-fill-mode: backwards;
29+
30+
z-index: ${props => props.i};
31+
`;
32+
33+
export const HeroWrapper = styled.section`
34+
border-bottom: 1px solid #242424;
35+
position: relative;
36+
display: flex;
37+
justify-content: center;
38+
39+
text-align: center;
40+
overflow: hidden;
41+
padding: 0 2rem;
42+
min-height: 768px;
43+
44+
perspective: 1000;
45+
}
46+
47+
@media screen and (min-width: 576px) {
48+
min-height: 768px;
49+
50+
}
51+
52+
@media screen and (min-width: 768px) {
53+
min-height: 960px;
54+
55+
}
56+
57+
@media screen and (min-width: 960px) {
58+
min-height: 1024px;
59+
}
60+
61+
`;
62+
63+
export const SignUp = styled.p`
64+
font-size: 13px;
65+
line-height: 0.8125rem;
66+
text-align: center;
67+
margin-top: 0.5rem;
68+
color: #999;
69+
`;
70+
71+
export const Border = styled.div`
72+
position: absolute;
73+
background: ${props => props.theme.homepage.grey};
74+
left: 0;
75+
width: 100%;
76+
height: 1px;
77+
`;
78+
79+
export const StyledEditorLink = styled.a`
80+
transition: 0.3s ease opacity;
81+
position: absolute;
82+
display: flex;
83+
flex-direction: column;
84+
align-items: center;
85+
padding-top: 110px;
86+
top: 0;
87+
bottom: 0;
88+
left: 0;
89+
right: 0;
90+
transition: 0.3 ease all;
91+
border-radius: 4px;
92+
font-size: 1.25rem;
93+
text-decoration: none;
94+
95+
color: white;
96+
font-weight: 400;
97+
background-color: rgba(0, 0, 0, 0.5);
98+
opacity: 0;
99+
100+
&:hover {
101+
opacity: 1;
102+
}
103+
`;
104+
105+
export const HeroBottom = styled.div`
106+
position: absolute;
107+
bottom: -10%;
108+
left: 0;
109+
right: 0;
110+
display: flex;
111+
flex-direction: column;
112+
justify-content: center;
113+
align-items: center;
114+
115+
${props => props.theme.breakpoints.sm} {
116+
padding: 0 0.5rem;
117+
line-height: 1.4;
118+
bottom: -50px;
119+
}
120+
`;
121+
122+
export const CountText = styled.div`
123+
font-size: 1.25rem;
124+
color: #757575;
125+
margin-bottom: 1.5rem;
126+
${props => props.theme.breakpoints.sm} {
127+
font-size: 0.875rem;
128+
}
129+
`;
130+
131+
export const InspiredText = styled.span`
132+
transition: 0.3s ease color;
133+
font-size: 1rem;
134+
color: #757575;
135+
margin-bottom: 1rem;
136+
text-decoration: none;
137+
138+
${props => props.theme.breakpoints.sm} {
139+
font-size: 0.875rem;
140+
}
141+
`;
142+
143+
export const HeroImage = styled.img`
144+
max-width: 576px;
145+
min-width: 100%;
146+
padding: 0 1rem;
147+
148+
overflow: hidden;
149+
border-radius: 4px;
150+
box-shadow: rgba(0, 0, 0, 0.3) 20px 14px 47px 0px;
151+
152+
@media screen and (min-width: 576px) {
153+
max-width: 576px;
154+
padding: 0 1rem;
155+
}
156+
157+
@media screen and (min-width: 768px) {
158+
max-width: 768px;
159+
padding: 0 1rem;
160+
}
161+
162+
@media screen and (min-width: 960px) {
163+
max-width: 960px;
164+
padding: 0 1rem;
165+
}
166+
`;
167+
168+
export const Title = styled.h1`
169+
font-size: 3rem;
170+
line-height: 57px;
171+
font-family: ${props => props.theme.homepage.appleFont};
172+
173+
color: ${props => props.theme.homepage.white};
174+
padding: 0;
175+
margin: 0;
176+
margin-bottom: 0.5rem;
177+
font-weight: 500;
178+
179+
${props => props.theme.breakpoints.md} {
180+
font-size: 1.8rem;
181+
line-height: 1.2;
182+
}
183+
184+
${props => props.theme.breakpoints.sm} {
185+
font-size: 1.4rem;
186+
}
187+
`;
188+
189+
export const SubTitle = styled.h2`
190+
font-weight: normal;
191+
font-size: 1.125rem;
192+
line-height: 1.3;
193+
color: ${props => props.theme.homepage.gray};
194+
margin: 0;
195+
margin-bottom: 1rem;
196+
197+
${props => props.theme.breakpoints.sm} {
198+
font-size: 0.875rem;
199+
}
200+
`;
201+
202+
// All for the B variant for A/B test
203+
204+
export const SandboxButtons = styled.section`
205+
height: auto;
206+
width: auto;
207+
margin: 5rem 0;
208+
`;
209+
210+
export const Sandbox = styled.a`
211+
display: inline-block;
212+
width: 2rem;
213+
height: 2rem;
214+
margin: 0 0.75rem;
215+
opacity: 0.2;
216+
border: none;
217+
background-color: transparent;
218+
background-size: cover;
219+
transform: scale(1);
220+
transition: all 100ms ease-in;
221+
222+
@media screen and (min-width: 576px) {
223+
width: 3rem;
224+
height: 3rem;
225+
margin: 0 1rem;
226+
}
227+
228+
@media screen and (min-width: 768px) {
229+
width: 4rem;
230+
height: 4rem;
231+
margin: 0 2rem;
232+
}
233+
234+
:hover {
235+
transform: scale(0.9);
236+
opacity: 1;
237+
}
238+
`;

0 commit comments

Comments
 (0)