Skip to content

Commit 3193084

Browse files
author
Danny Ruchtie
committed
Added the B varaint for the A/B test
Commented out all of the old template
1 parent 2d967f4 commit 3193084

File tree

7 files changed

+171
-96
lines changed

7 files changed

+171
-96
lines changed

‎packages/homepage/src/assets/icons/home-angulair.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/screens/home/hero/elements.js‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const StyledEditorLink = styled.a`
9393

9494
export const HeroBottom = styled.div`
9595
position: absolute;
96-
bottom: -30%;
96+
bottom: -10%;
9797
left: 0;
9898
right: 0;
9999
display: flex;
@@ -142,7 +142,7 @@ export const HeroImage = styled.img`
142142
`;
143143

144144
export const Title = styled.h1`
145-
font-size: 2.5rem;
145+
font-size: 3rem;
146146
line-height: 57px;
147147
font-family: ${props => props.theme.homepage.appleFont};
148148
@@ -166,11 +166,37 @@ export const SubTitle = styled.h2`
166166
font-weight: normal;
167167
font-size: 1.125rem;
168168
line-height: 1.3;
169-
color: ${props => props.theme.homepage.white};
169+
color: ${props => props.theme.homepage.gray};
170170
margin: 0;
171171
margin-bottom: 1rem;
172172
173173
${props => props.theme.breakpoints.sm} {
174174
font-size: 0.875rem;
175175
}
176176
`;
177+
178+
// All for the B variant for A/B test
179+
180+
export const SandboxButtons = styled.section`
181+
height: 4rem;
182+
width: auto;
183+
margin: 4rem 0;
184+
`;
185+
186+
export const Sandbox = styled.a`
187+
display: inline-block;
188+
width: 4rem;
189+
height: 4rem;
190+
margin: 0 2rem;
191+
opacity: 0.2;
192+
border: none;
193+
background-color: transparent;
194+
background-size: cover;
195+
transform: scale(1);
196+
transition: all 100ms ease-in;
197+
198+
:hover {
199+
transform: scale(0.9);
200+
opacity: 1;
201+
}
202+
`;

‎packages/homepage/src/screens/home/hero/index.js‎

Lines changed: 118 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,122 @@
1-
import React, { useState, useEffect, useRef } from 'react';
1+
import React, { useRef } from 'react';
2+
// import React, { useState, useEffect, useRef } from 'react';
3+
24
import { motion } from 'framer-motion';
3-
import { Socket } from 'phoenix';
5+
// import { Socket } from 'phoenix';
46

57
import Button from '../../../components/Button';
68
import {
79
HeroWrapper,
810
SignUp,
911
Border,
10-
StyledEditorLink,
12+
SandboxButtons,
13+
Sandbox,
14+
// StyledEditorLink,
1115
HeroImage,
1216
HeroBottom,
13-
CountText,
17+
// CountText,
1418
Title,
1519
SubTitle,
16-
InspiredText,
20+
// InspiredText,
1721
} from './elements';
1822

1923
import hero from '../../../assets/images/hero-ide-home.png';
2024

21-
import BoxAnimation from './BoxAnimation';
25+
import react from '../../../assets/icons/home-react.svg';
26+
import vanilla from '../../../assets/icons/home-js.svg';
27+
import vue from '../../../assets/icons/home-vue.svg';
28+
import angulair from '../../../assets/icons/home-angulair.svg';
29+
import more from '../../../assets/icons/home-more.svg';
2230

23-
export default () => {
24-
const [boxes, setBoxes] = useState([]);
25-
const [sandboxesCreatedCount, setSandboxesCreatedCount] = useState(0);
26-
const [showPlane, setShowPlane] = useState(true);
27-
28-
const createBox = React.useCallback(
29-
({ position, rotation } = {}) => {
30-
setBoxes(b => {
31-
if (b.length > 10) {
32-
setShowPlane(false);
33-
setTimeout(() => {
34-
setShowPlane(true);
35-
36-
setBoxes(bb => {
37-
const newBoxes = [...bb];
38-
newBoxes.length = 1;
39-
return newBoxes;
40-
});
41-
}, 1000);
42-
}
43-
const newBoxes = [
44-
{
45-
key: Math.floor(Math.random() * 10000) + '',
46-
position: position || [
47-
-5 + Math.random() * 10,
48-
0 + Math.random() * 2.5,
49-
15,
50-
],
51-
rotation: rotation || [
52-
Math.random() * 1,
53-
Math.random() * 1,
54-
Math.random() * 1,
55-
],
56-
},
57-
...b,
58-
];
59-
60-
return newBoxes;
61-
});
62-
},
63-
[setBoxes]
64-
);
65-
66-
React.useEffect(() => {
67-
const timeout = setTimeout(() => {
68-
createBox({ position: [0, 0, 10], rotation: [1.2, 0, 0] });
69-
setSandboxesCreatedCount(i => i + 1);
70-
}, 1000 + Math.random() * 500);
71-
72-
return () => {
73-
clearTimeout(timeout);
74-
};
75-
}, [createBox]);
76-
77-
const socketRef = useRef(
78-
typeof window === 'undefined'
79-
? undefined
80-
: new Socket('wss://codesandbox.io/anon-socket')
81-
);
31+
// import BoxAnimation from './BoxAnimation';
8232

83-
useEffect(() => {
84-
const socket = socketRef.current;
85-
if (socket) {
86-
socket.connect();
87-
88-
const channel = socket.channel('sandbox-created', {});
89-
channel.join();
90-
channel.on('new-sandbox', () => {
91-
if (document.hasFocus()) {
92-
createBox();
93-
}
94-
95-
setSandboxesCreatedCount(i => i + 1);
96-
});
97-
98-
return () => {
99-
channel.leave();
100-
socket.disconnect();
101-
};
102-
}
103-
return () => {};
104-
}, [createBox]);
33+
export default () => {
34+
// const [boxes, setBoxes] = useState([]);
35+
// const [sandboxesCreatedCount, setSandboxesCreatedCount] = useState(0);
36+
// const [showPlane, setShowPlane] = useState(true);
37+
38+
// const createBox = React.useCallback(
39+
// ({ position, rotation } = {}) => {
40+
// setBoxes(b => {
41+
// if (b.length > 10) {
42+
// setShowPlane(false);
43+
// setTimeout(() => {
44+
// setShowPlane(true);
45+
46+
// setBoxes(bb => {
47+
// const newBoxes = [...bb];
48+
// newBoxes.length = 1;
49+
// return newBoxes;
50+
// });
51+
// }, 1000);
52+
// }
53+
// const newBoxes = [
54+
// {
55+
// key: Math.floor(Math.random() * 10000) + '',
56+
// position: position || [
57+
// -5 + Math.random() * 10,
58+
// 0 + Math.random() * 2.5,
59+
// 15,
60+
// ],
61+
// rotation: rotation || [
62+
// Math.random() * 1,
63+
// Math.random() * 1,
64+
// Math.random() * 1,
65+
// ],
66+
// },
67+
// ...b,
68+
// ];
69+
70+
// return newBoxes;
71+
// });
72+
// },
73+
// [setBoxes]
74+
// );
75+
76+
// React.useEffect(() => {
77+
// const timeout = setTimeout(() => {
78+
// createBox({ position: [0, 0, 10], rotation: [1.2, 0, 0] });
79+
// setSandboxesCreatedCount(i => i + 1);
80+
// }, 1000 + Math.random() * 500);
81+
82+
// return () => {
83+
// clearTimeout(timeout);
84+
// };
85+
// }, [createBox]);
86+
87+
// const socketRef = useRef(
88+
// typeof window === 'undefined'
89+
// ? undefined
90+
// : new Socket('wss://codesandbox.io/anon-socket')
91+
// );
92+
93+
// useEffect(() => {
94+
// const socket = socketRef.current;
95+
// if (socket) {
96+
// socket.connect();
97+
98+
// const channel = socket.channel('sandbox-created', {});
99+
// channel.join();
100+
// channel.on('new-sandbox', () => {
101+
// if (document.hasFocus()) {
102+
// createBox();
103+
// }
104+
105+
// setSandboxesCreatedCount(i => i + 1);
106+
// });
107+
108+
// return () => {
109+
// channel.leave();
110+
// socket.disconnect();
111+
// };
112+
// }
113+
// return () => {};
114+
// }, []);
105115

106116
const ideRef = useRef();
107117

108118
return (
109119
<HeroWrapper>
110-
<BoxAnimation boxes={boxes} showPlane={showPlane} />
111-
112120
<motion.div
113121
initial={{ opacity: 0, y: 140 }}
114122
animate={{ opacity: 1, y: 0 }}
@@ -128,6 +136,21 @@ export default () => {
128136
>
129137
An instant IDE and prototyping tool for rapid web development.
130138
</SubTitle>
139+
140+
<SandboxButtons>
141+
<Sandbox href="/s/new" style={{ backgroundImage: `url(${react})` }} />
142+
<Sandbox
143+
href="/s/vanilla"
144+
style={{ backgroundImage: `url(${vanilla})` }}
145+
/>
146+
<Sandbox href="/s/vue" style={{ backgroundImage: `url(${vue})` }} />
147+
<Sandbox
148+
href="/s/angulair"
149+
style={{ backgroundImage: `url(${angulair})` }}
150+
/>
151+
<Sandbox href="/s" style={{ backgroundImage: `url(${more})` }} />
152+
</SandboxButtons>
153+
131154
<motion.div
132155
initial={{ opacity: 0, y: 20 }}
133156
animate={{ opacity: 1, y: 0 }}
@@ -151,18 +174,20 @@ export default () => {
151174
delay: 1,
152175
}}
153176
>
177+
{/* <BoxAnimation boxes={boxes} showPlane={showPlane} /> */}
178+
154179
<HeroBottom>
155180
<div ref={ideRef}>
156-
<CountText>
181+
{/* <CountText>
157182
<span style={{ fontWeight: 600, color: 'white' }}>
158183
{sandboxesCreatedCount}{' '}
159184
</span>
160185
{sandboxesCreatedCount === 1 ? 'sandbox' : 'sandboxes'} created
161186
since you opened this page
162-
</CountText>
187+
</CountText> */}
163188

164189
<div style={{ position: 'relative' }}>
165-
<StyledEditorLink
190+
{/* <StyledEditorLink
166191
href="/s/m7q0r29nn9"
167192
target="_blank"
168193
rel="noreferrer noopener"
@@ -171,7 +196,7 @@ export default () => {
171196
Inspired by the sandboxes created by drcmda
172197
</InspiredText>
173198
Open Sandbox
174-
</StyledEditorLink>
199+
</StyledEditorLink> */}
175200

176201
<HeroImage alt="editor with project open" src={hero} />
177202
</div>

0 commit comments

Comments
 (0)