Skip to content

Commit 890e571

Browse files
author
Danny Ruchtie
committed
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
1 parent c6c5e30 commit 890e571

File tree

7 files changed

+709
-117
lines changed

7 files changed

+709
-117
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React from 'react';
22

33
import TitleAndMetaTags from '../components/TitleAndMetaTags';
44
import Layout, { WRAPPER_STYLING } from '../components/layout';
5-
import Hero from '../screens/home/hero';
5+
import HeroB from '../screens/home/heroB';
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,8 @@ const Homepage = () => (
2526
margin-bottom: 8rem;
2627
`}
2728
>
28-
<Hero />
29+
<HeroB />
30+
{/* A/B Test Components HeroA = Old, HeroB is New */}
2931
</section>
3032

3133
<div style={WRAPPER_STYLING}>

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

Lines changed: 92 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,108 @@
1-
import React, { useRef } from 'react';
2-
// import React, { useState, useEffect, useRef } from 'react';
1+
import React, { useState, useEffect, useRef } from 'react';
32

43
import { motion } from 'framer-motion';
5-
// import { Socket } from 'phoenix';
4+
import { Socket } from 'phoenix';
65

76
import Button from '../../../components/Button';
87
import {
98
HeroWrapper,
109
SignUp,
1110
Border,
12-
SandboxButtons,
13-
Sandbox,
14-
// StyledEditorLink,
11+
StyledEditorLink,
1512
HeroImage,
1613
HeroBottom,
17-
// CountText,
14+
CountText,
1815
Title,
1916
SubTitle,
20-
// InspiredText,
17+
InspiredText,
2118
} from './elements';
2219

2320
import hero from '../../../assets/images/hero-ide-home.png';
2421

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 angular from '../../../assets/icons/home-angular.svg';
29-
import more from '../../../assets/icons/home-more.svg';
30-
31-
// import BoxAnimation from './BoxAnimation';
22+
import BoxAnimation from './BoxAnimation';
3223

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

116107
const ideRef = useRef();
117108

@@ -137,20 +128,6 @@ export default () => {
137128
An instant IDE and prototyping tool for rapid web development.
138129
</SubTitle>
139130

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/angular"
149-
style={{ backgroundImage: `url(${angular})` }}
150-
/>
151-
<Sandbox href="/s" style={{ backgroundImage: `url(${more})` }} />
152-
</SandboxButtons>
153-
154131
<motion.div
155132
initial={{ opacity: 0, y: 20 }}
156133
animate={{ opacity: 1, y: 0 }}
@@ -174,20 +151,20 @@ export default () => {
174151
delay: 1,
175152
}}
176153
>
177-
{/* <BoxAnimation boxes={boxes} showPlane={showPlane} /> */}
154+
<BoxAnimation boxes={boxes} showPlane={showPlane} />
178155

179156
<HeroBottom>
180157
<div ref={ideRef}>
181-
{/* <CountText>
158+
<CountText>
182159
<span style={{ fontWeight: 600, color: 'white' }}>
183160
{sandboxesCreatedCount}{' '}
184161
</span>
185162
{sandboxesCreatedCount === 1 ? 'sandbox' : 'sandboxes'} created
186163
since you opened this page
187-
</CountText> */}
164+
</CountText>
188165

189166
<div style={{ position: 'relative' }}>
190-
{/* <StyledEditorLink
167+
<StyledEditorLink
191168
href="/s/m7q0r29nn9"
192169
target="_blank"
193170
rel="noreferrer noopener"
@@ -196,7 +173,7 @@ export default () => {
196173
Inspired by the sandboxes created by drcmda
197174
</InspiredText>
198175
Open Sandbox
199-
</StyledEditorLink> */}
176+
</StyledEditorLink>
200177

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

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import styled from 'styled-components';
2+
3+
export const AnimationContainer = styled.div`
4+
position: absolute;
5+
top: 0;
6+
left: 0;
7+
right: 0;
8+
bottom: 0;
9+
z-index: 0;
10+
`;
11+
12+
export const FallbackImageBackground = styled.div`
13+
background-image: url(${props => props.fallback});
14+
width: 100%;
15+
height: 100%;
16+
background-size: cover;
17+
background-position: 50% 50%;
18+
`;

0 commit comments

Comments
 (0)